When processing article content containing HTML tags in the AnQiCMS template, safely outputting is a crucial issue, which directly relates to the security and user experience of the website.Especially when the content of the article may be input by the background rich text editor, or when comments or messages submitted by users contain custom HTML, improper handling is prone to cross-site scripting attacks (XSS).AnQiCMS as a content management system that focuses on security and efficiency, provides the corresponding mechanisms to help us meet this challenge.

Understanding Risk: Why is it necessary to output HTML securely?

When displaying content on the website front end, if user input or rich text editor content is output without processing, malicious users may be able to inject malicious JavaScript code. These codes, when executed in other users' browsers, may cause including but not limited to the following hazards:

  • Steal user privacy data:For example, Cookie, Session token, etc.
  • Hijack user session:Imitate user operations.
  • Tamper with page content:Maliciously modify web pages, publish false information.
  • Phishing attack:Lure users to click malicious links or submit sensitive information.

Therefore, it is the basic responsibility of website operators to ensure that all content containing HTML is strictly reviewed and processed before being output to the front end.

AnQiCMS default security mechanism: automatic escaping

AnQiCMS's template engine adopts syntax similar to Django's template engine and took security into account from the beginning. By default, when you use double curly braces{{ 变量 }}When outputting content, the template engine will automatically escape any HTML tags and special characters. This means that, like<will be escaped to&lt;,>will be escaped to&gt;,"will be escaped to&quot;Wait. This automatic escaping is the first and most effective defense against XSS attacks.

For example, if your article contentarchive.Contentincluding<h1>文章标题</h1><script>alert('XSS');</script>When you use the template directly.{{ archive.Content }}When displayed, the browser will show it as plain text:<h1>文章标题</h1><script>alert('XSS');</script>Instead of parsing and executing the HTML and JavaScript code within it.

When is it necessary to output raw HTML?|safeFilter

Although automatic escaping ensures safety, but sometimes we also indeed need the page to correctly render the expected HTML format in the article, such as bold, italic, images, links, and so on.This content is usually sourced from administrators who carefully edit and format the content using a rich text editor (such as the document content editor in AnQiCMS backend).

In this case, we need to explicitly tell the template engine that this content is 'safe', and it does not need to be escaped. It should be parsed and rendered according to the original HTML structure. AnQiCMS provides|safeFilter to meet this requirement.

The method of use is very simple, add it after the variable you want to output|safeand it is done:

{# 假设 archive.Content 包含了管理员通过富文本编辑器输入的HTML内容 #}
<div>
    {{ archive.Content|safe }}
</div>

By|safeThe filter, the template engine will trust this sectionarchive.ContentIt is safe and harmless HTML, and it is output to the browser as is, thus rendering the style and structure of the article normally.

Important reminder: |safeThe filter tells the template engine that "this content is safe, do not escape it". Therefore, you mustvery certainis|safeThe content being processed is reliable, purified, or entered by a fully trustworthy administrator. If used to output user-submitted content directly, unprocessed (such as comments or messages), even if it uses|safeIt may also reintroduce XSS risks.

Special processing of Markdown content:render=trueThe parameter with|safe

AnQiCMS supports Markdown editor, which brings great convenience to content creators.When you use Markdown to write articles in the background, the Markdown text needs to be converted to HTML first before it can be rendered normally on the front end.

ForarchiveDetailMarkdown format content obtained by tags (for exampleContentField), AnQiCMS providesrender=trueparameter to control whether Markdown to HTML conversion is performed.

But, it only performsrender=trueThe converted HTML content, if it still contains in{{ }}Print inside, the default is still escaped. So, the correct way is to use firstrender=trueparameter to convert Markdown to HTML, and then cooperate with|safeThe filter to safely output this HTML:

{# 获取Markdown格式的文章内容,并转换为HTML,然后安全输出 #}
{% archiveDetail articleContent with name="Content" render=true %}
    <div>
        {{ articleContent|safe }}
    </div>
{% endarchiveDetail %}

This way, Markdown text will be correctly parsed as HTML and safely displayed to the user.

Fine-grained control: Other auxiliary filters

except|safeIn addition to the filter, AnQiCMS also provides some other filters that can assist in the safe handling or formatting of content in specific scenarios:

  • striptagsandremovetags:If you want to display plain text (for example, in an article summary) without any HTML tags, you can usestriptagsa filter to remove all HTML tags.{{ archive.Description|striptags }}If you only want to remove specific HTML tags, you can useremovetagsfilter.{{ archive.Content|removetags:"script,iframe"|safe }}These filters are very useful in reducing information volume or strictly controlling content format

  • escapejs:This filter is specifically used to escape special characters in JavaScript code to prevent malicious code from being embedded in JavaScript strings.Although it is rare to directly output article content as JS in AnQiCMS templates, it can be useful in specific scenarios where dynamic JS code generation is needed.{{ "<script>alert('xss');</script>"|escapejs|safe }}

**Practical Suggestions

  1. Trust the source and use cautiously|safe:Always use only when you are sure that the content source (such as, from the rich text editor input of the backend administrator) is safe|safeFilter. For any content that users can submit directly (such as public comments, message boards), even if it is preliminarily filtered on the backend, it should be avoided to be used directly|safeOr use a more strict custom cleaning logic.
  2. Backend cleaning is the first line of defense:AnQiCMS has built-in content security management and sensitive word filtering functions in its design.Fully utilize these background functions, clean and verify the content from the source, which is the most fundamental measure to prevent XSS.The processing of the template layer is a secondary defense.
  3. Follow the principle of least privilege:If a piece of content does not need HTML rendering, do not use it.|safe. Let the default automatic escaping mechanism of the template engine take effect, it will save you a lot of trouble on security.
  4. Regular security audits:Even with all security measures in place, it is recommended to regularly scan for security vulnerabilities and audit the code on the website to ensure no risk points are missed.

Understanding AnQiCMS's default security mechanisms and using them appropriately|safeFilters and other auxiliary filters, we can efficiently and safely output article content containing HTML tags in the template, enriching the website display effect while effectively preventing XSS attacks.


Frequently Asked Questions (FAQ)

1. Why do I output directly?{{ archive.Content }}, The HTML tags (such as<strong>/<img>) in the article were not rendered, but displayed as plain text?

This is because AnQiCMS's template engine has enabled the automatic escaping mechanism by default, which is to prevent XSS attacks. When you use{{ 变量 }}When outputting syntax, the template engine will convert HTML tags and special characters (such as</>/&/"to their HTML entity encodings (such as&lt;/&gt;This content will not be parsed as HTML by the browser, but will be displayed as plain text.If you need to render these HTML tags, you need to explicitly inform the template engine that the content is safe, please use|safefilter.

2.|safeFilters andrender=trueWhat are the differences between the parameters? How should I use them together?

render=trueParameters are mainly used to process Markdown formatted content. It tells AnQiCMS'sarchiveDetailThe tag converts Markdown text to HTML format. The result is still a string, and if it is output directly, it will be automatically escaped by the template engine. And|safeThe filter tells the template engine that a variable (regardless of its original format or whether it has been converted through Markdown) is now considered safe HTML and can be output directly without escaping again. Therefore, when the content of your article is in Markdown format and you want to render it as HTML on the front end, you need to use it first.render=trueConvert it to HTML and then use|safeThe filter ensures that this HTML is parsed correctly by the browser: `{% archive