How to safely output content containing HTML tags in AnQiCMS templates (e.g., article text)?

A practical guide to safely output HTML tag content in AnQiCMS templates

When building a website with AnQiCMS, we often need to display content with rich formatting, such as article content, product descriptions, category details, or single-page content. This content is usually input through the backend rich text editor and naturally contains HTML tags such as<p>/<strong>/<em>/<a>et cetera.How to correctly and safely output these contents with HTML tags in front-end templates is a very important issue.If not handled properly, it may lead to abnormal display of the page, or even introduce security risks such as cross-site scripting (XSS).

The template engine design of AnQiCMS pays great attention to security.It defaults to handling variable content fetched from the background and outputted to the template in a 'cautious' manner.{{ 变量名 }}When outputting a string containing HTML tags in the form of, for example, article content, template engines automatically escape HTML special characters to prevent potential XSS attacks. For example, <will be escaped as<,>will be escaped as>,"will be escaped as"Thus, the user will not see the rendered HTML effect on the frontend, but the raw HTML tag strings that have not been parsed, for example, the page will display<p>这是一段加粗的文字</strong></p>.

So, when we determine that the content is safe and needs to be rendered in HTML format, what should we do? AnQiCMS provides|safea filter to solve this problem.

Use|safeFilter safe output of HTML content

|safeThe filter tells AnQiCMS template engine: "This content has been confirmed as safe HTML, please render it directly as HTML code without any escaping."

For example, to output the article text (archive.Content), and make the HTML tags active, we should write the template code like this:

{# 输出文章正文，并允许HTML标签渲染 #}
<div>
    {% archiveDetail articleContent with name="Content" %}
    {{ articleContent|safe }}
</div>

Here,archiveDetailtags are used to get the detailed content of the article,articleContentThe variable carries the main content. Next, by{{ articleContent|safe }}, we instruct the template engine toarticleContentbe treated as trusted code for parsing and rendering.

Similarly, for other content that may contain HTML tags, such as category descriptions (categoryDetailofContentfield), single-page content (pageDetailofContentfield), orsystemcopyright information in tags (SiteCopyright), as long as you confirm that this content is strictly reviewed and has no security risks, it can be used|safeFilter:

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

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

{# 输出系统设置中的版权信息，如果其中包含HTML标签 #}
<div>
    {% system siteCopyright with name="SiteCopyright" %}
    {{ siteCopyright|safe }}
</div>

Process Markdown format content

AnQiCMS also supports Markdown editor.When you use Markdown format to write articles in the background, the system will convert them to HTML code.

1. Markdown to HTML:If the Markdown editor is enabled in the "Global Settings" -> "Content Settings" orarchiveDetailThe label specifies explicitlyrender=true(such as{% archiveDetail with name="Content" render=true %}) AnQiCMS will convert Markdown text to HTML before output.
2. HTML safe rendering:The translated HTML still needs to be|safefiltered to be correctly rendered.

Therefore, even if the content is written in Markdown, it is recommended to add it in the template output.|safeFilter:

{# 输出Markdown转换后的文章内容，并安全渲染HTML #}
<div>
    {% archiveDetail articleContent with name="Content" render=true %}
    {{ articleContent|safe }}
</div>

render=trueEnsure Markdown is converted to HTML, and|safethen allow these HTML to be normally parsed by the browser.

when not to use|safefilters (or to use|escape)

Although|safeThe filter is very convenient when displaying rich content, but please remember the security implications behind it.|safeIt tells the system “This content is safe, please trust it”. Therefore,Must never directly pass through content from untrusted sources (such as user-submitted comments, messages, or any unsterilized input)|safeFilter output.This will directly expose the risk of XSS attacks, malicious users may insert JavaScript code, steal user information, modify page content, or even hijack sessions.

If you indeed need to display HTML tags as plain text (for example, in a code example) or to ensure that any existing HTML tags are escaped, you can rely on the default automatic escaping behavior of AnQiCMS, that is, not using|safeIf you need to explicitly escape, you can use|escapeFilter:

{# 显示HTML标签作为文本，而不是渲染它 #}
<pre>
    {% archiveDetail codeSnippet with name="SomeHtmlCodeField" %}
    {{ codeSnippet|escape }}
</pre>

this part|escapeThe filter will force HTML special characters to be escaped, ensuring they are displayed as literal text.

Summary

The AnQiCMS template mechanism provides a basic level of security protection through default HTML escaping. When you need to render confirmed-safe content with HTML tags, please use|safeFilter.But when handling any content from users or other untrusted sources, always be cautious and ensure that the content is strictly sanitized and verified on the server side to avoid potential security vulnerabilities.|safeThe filter is the key to ensure the completeness and content security of the AnQiCMS website.

---

Common Questions (FAQ)

1. Why does my article body show up?<p>/<strong>Are these HTML tags, rather than the rendered effect?This is usually because you are using them directly in the template{{ 变量名 }}The way to output the article content, and AnQiCMS template engine defaults to escaping HTML special characters for security reasons. To render HTML tags correctly, you need to use|safeFilter, for example{{ archive.Content|safe }}.

2. I get the content from user comments, which can be used directly|safeIs the filter output?Strongly do not recommend using it directly|safeFilter output of unprocessed user comment content.User comments may contain malicious HTML tags or JavaScript code, which, if directly output, could cause cross-site scripting (XSS) risks.Ensure rigorous server-side data cleaning, filtering, and sanitization before outputting any user-generated content, removing all untrusted HTML tags and attributes.|safe.

An article in Markdown format, if the Markdown editor is enabled on the backend, you still need to use|safe?Yes, you still need to use|safe.Even if the Markdown editor is enabled on the backend, the system will convert it to HTML, but the template engine will still follow the default escaping rules when outputting these HTMLs.|safeFilter, for example{{ articleContent|safe }}.