How to safely output rich text content containing HTML tags in the Anqi CMS template?

In website operation, rich text content is widely used in scenarios such as articles, product introductions, and single pages due to its rich expressions, such as inserting images, custom font styles, and tables.AnQi CMS is an efficient content management system that also fully supports the editing and storage of various rich text content.However, while rich text content brings convenience, it also hides a non-negligible security challenge - how to safely output these contents containing HTML tags in templates to prevent potential cross-site scripting (XSS) attacks.

The template engine of Anqi CMS was designed with security in mind.When you output any content in a template, the template engine will default to escaping it as HTML.<script>Such HTML tags, they will not be parsed by the browser as executable code, but will be converted to<script>Entities, such as characters, are displayed as plain text.This default escaping mechanism is the first line of defense for website security, which can effectively prevent malicious scripts from causing harm by content injection.

However, for content that indeed needs to display HTML structure, such as article body, complex layout of product detail pages, or detailed introduction of categories and single pages, the default escaping behavior will cause the content to be rendered incorrectly, instead of displaying a mess of raw HTML tags.In this case, we need to explicitly tell the security CMS template engine that certain content is confirmed 'safe' HTML and can be directly output.|safeFilter.

Use|safeFilter-safe rich text output

|safeThe filter is an instruction to tell the template engine 'Do not escape this content'. When you are sure that the HTML content contained in a variable is safe and harmless, and you want it to be parsed and rendered by the browser, you can add it to the output of the variable.|safe.

For example, when outputting the content of an article on the article detail page, we usually usearchiveDetailTag to retrieve data. If the article content is entered from a rich text editor, which includes paragraph, images, links, and other HTML structures, then when outputting in the template, it needs to be handled in this way:

<div>
    {# archiveContent 变量包含了文章的富文本内容 #}
    {%- archiveDetail archiveContent with name="Content" %}
    {{ archiveContent|safe }}
</div>

Similarly, the handling methods for the category detail page or single page detail page content are consistent:

{# 输出分类详情内容 #}
<div>
    {%- categoryDetail categoryContent with name="Content" %}
    {{ categoryContent|safe }}
</div>

{# 输出单页面详情内容 #}
<div>
    {%- pageDetail pageContent with name="Content" %}
    {{ pageContent|safe }}
</div>

By adding to the variable|safethe template engine will skip the processing ofarchiveContent/categoryContentorpageContentThe process of HTML escaping, directly outputting it as HTML code to the browser, thus achieving the correct rendering of rich text content.

Useautoescapefor more flexible control of tags

Except for using for a single variable|safeThe filter, the template engine of AnQi CMS also providesautoescapeTags can control the automatic escaping behavior within a code block. If you have multiple variables in a template area that need to be turned off or on HTML escaping, useautoescapeTags will be used repeatedly|safeFilters are more concise and intuitive.

You can use{% autoescape off %}to disable automatic escaping for a certain block, and use{% autoescape on %}or{% endautoescape %}to restore the default escaping behavior.

{% autoescape off %}
    <div class="rich-text-area">
        {# 这个区域内的所有变量，包括 rich_text_var1 和 rich_text_var2，都将关闭自动转义 #}
        <p>{{ rich_text_var1 }}</p>
        <p>{{ rich_text_var2 }}</p>
    </div>
    {# 如果这里需要恢复转义，可以使用 {% autoescape on %} #}
{% endautoescape %}

autoescape offThe scope of the action is within its tags, which can conveniently manage rich text output within a specific area.

Rendering and security of Markdown content

The AnQi CMS also supports Markdown editor, which provides another convenient way for content creators to write.When you enable the Markdown editor in the background, the system will automatically convert Markdown syntax to HTML.archiveDetailof the tagsContentin the field parametersrender=trueRender forcefully.

For example:

<div>
    {# 强制渲染Markdown内容为HTML，并安全输出 #}
    {%- archiveDetail articleMarkdownContent with name="Content" render=true %}
    {{ articleMarkdownContent|safe }}
</div>

Please note, whether it is automatically converted through the Markdown editor orrender=trueParameters are manually converted, and the final content generated is always HTML. Therefore, when outputting these HTML contents in the front-end template, it still needs to be combined with|safeFilter to ensure that HTML tags can be parsed correctly.

Deep security guarantees for safe output: backend content filtering

Although|safefilters andautoescapeTags provide necessary control for outputting rich text content in front-end templates, but their core logic is to 'trust' the content they output.