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

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

The template engine of AnQi CMS has taken full consideration of security in its design.When you output any content in the template, the template engine will default to HTML escaping it.This means, if your rich text content includes such as<script>HTML tags that are not parsed by the browser as executable code, but are converted to<script>Entity characters are displayed as plain text. This default escaping mechanism is the first line of defense for website security, as it effectively prevents malicious scripts from causing harm by injecting content.

However, for those who really need to display HTML structures, such as article bodies, product detail pages with complex layouts, or detailed introductions of categories, and single pages, the default escaping behavior will cause the content to be rendered incorrectly, displaying a pile of raw HTML tags.In this case, we need to explicitly tell the Anqi CMS template engine that certain content is confirmed 'safe' HTML and can be directly output.The most commonly used and direct way to achieve this is to use|safefilter.

Use|safeFilter to safely output rich text

|safeThe filter is an instruction to inform 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 when outputting the variable.|safe.

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

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

Similarly, the handling of content for category detail pages or single-page detail pages is also 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 the content, directly outputting it as HTML code to the browser, thus achieving the correct rendering of rich text content.

UseautoescapeTags for more flexible control

In addition to using for individual variables:|safeThe template engine of AnQi CMS also provides a filter,autoescapeTags can control the automatic escaping behavior within a code block. If you have multiple variables in a template area that need to turn off or on HTML escaping, useautoescapeTags will avoid repeated use|safeThe filter will be more concise and intuitive.

You can use{% autoescape off %}To close the automatic escaping of a block and use it at the end of the block{% 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 its action is within the tag, which can conveniently manage rich text output within a specific area.

Rendering and security of Markdown content

The AnQi CMS also supports Markdown editors, which provides content creators with another convenient writing method.After you enable the Markdown editor in the background, the system will automatically convert Markdown syntax to HTML.If you need to render Markdown content in the template, even if the Markdown editor is not enabled, you can alsoarchiveDetailsuch as tags,ContentAdded in the field parametersrender=trueRender强制.

For example:

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

Please note, whether through Markdown editor automatic conversion, or throughrender=trueThe parameters are manually converted, and the final content generated is all 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 guarantee for safe output: backend content filtering

Though|safeFilters andautoescapeThe tag provides necessary control for front-end template output of rich text content, but their core logic is 'trust' the content output.