How to safely display rich text content containing HTML tags in AnQiCMS templates?

In website operation, we often need to display text content that includes rich formats and interactive elements, which is what we commonly refer to as rich text.This content may include bold, italic, links, images, even tables, and other HTML tags.How to ensure that these HTML tags can be rendered correctly in the AnQiCMS template while also considering the website's security is a topic worth discussing.

Understand the default security mechanism of AnQiCMS templates

Firstly, we need to understand a core security design of the AnQiCMS template system: by default, to prevent security vulnerabilities such as Cross-Site Scripting (XSS), the template automatically escapes HTML tags when outputting variables. This means that if you directly output rich text content containing HTML tags, such as the article details, for example, the{{ archive.Content }}Place it in the template, what you see will not be formatted content, but content with angle brackets<and>will be converted to<and>of the original HTML code.

This default escaping behavior is an important part of website security. Imagine if a malicious user injected a segment of<script>alert('您被攻击了！')</script>And if the system does not perform any processing and directly displays it, then all users accessing the page may be at risk.Therefore, the default handling method of AnQiCMS is for the protection of the website and its visitors.

UsesafeThe filter renders HTML content correctly

When you confirm that certain rich text content is safe and可信的, and you wish for it to be displayed on the page in its original HTML format, AnQiCMS providessafeA filter to explicitly inform the template system that 'this content is safe and should not be HTML-escaped'.

UsesafeThe filter is very simple, you just need to add it after the variable you want to output.|safe[en]It means that. For example, when displaying the article detail page, the article content is usually rich text, and we need it to be displayed in a formatted HTML.

{# 假设archive.Content包含了文章的HTML富文本内容 #}
<div class="article-content">
    {{ archive.Content|safe }}
</div>

Pass|safe[en], the browser willarchive.Contentof<p>/<a>/<img>Identify and render tags, thus presenting the format you expect. This is particularly important for content that needs to retain the original formatting, such as articles, product descriptions, or custom pages.

Special handling of Markdown content andrenderParameters

AnQiCMS also supports Markdown editor, which brings great convenience to content creators.When you have enabled the Markdown editor under the "Global Settings" -> "Content Settings" in the background, and the content is saved in Markdown format, there will be an additional step for the template to process these contents.

For Markdown formatted content, AnQiCMS'sarchiveDetailorpageDetailtags, in theContentfield, can be used withrenderParameters to control the conversion from Markdown to HTML.

• render=true:Explicitly indicates that the template will convert Markdown content to HTML.
• render=false：Indicates that the template does not convert Markdown content and outputs the original Markdown text directly.

Even if you have usedrender=trueConvert Markdown to HTML, the converted HTML content may still contain tags that need to be parsed. Therefore, to ensure that these converted HTML can be displayed correctly, you usually still need to combine|safeFilter.

{# 假设archive.Content是Markdown格式，需要转换为HTML并安全显示 #}
<div class="article-markdown-content">
    {% archiveDetail articleMarkdownContent with name="Content" render=true %}
    {{ articleMarkdownContent|safe }}
</div>

This is,render=trueIt will first parse Markdown syntax (such as## 标题,**加粗**) into HTML tags (such as<h2>标题</h2>,<strong>加粗</strong>), then|safeThe filter ensures that these HTML tags can be rendered normally by the browser.

In-depth considerations of security: when to usesafe?

AlthoughsafeFilters can solve HTML rendering issues, but the term 'secure' is not easy to discuss. UsesafeThis means that you fully trust the source of the variable's content. Therefore, when usingsafe, please be sure to carefully evaluate:

1. Is the source of the content trustworthy?

   • Trusted source:Website administrators or editors can edit and publish content directly from the backend. AnQiCMS usually performs backend security filtering (such as sensitive word filtering) on this type of content to reduce XSS risks.
   • Untrusted source:User-submitted comments, messages, forum posts, etc. This content is highly likely to contain maliciously injected code. For such content,Strongly do not recommend using it directly|safe.The backend of AnQiCMS should have strict input filtering and output escaping mechanisms to handle user submitted data.Even if you need to display rich text submitted by users, you should ensure that the backend has done sufficient filtering and sanitization.

2. Is AnQiCMS's backend security in place?The AnQiCMS project advantages mention 'Security mechanisms: including anti-crawling interference code, content security management, sensitive word filtering, and other functions to ensure content safety and compliance.' }]This indicates that the system has considered content security in multiple aspects on the backend.For content input through the backend editor (not directly submitted by the user), it is usually processed for security once, reducing the risk of direct XSS.|safeFilter means you trust the AnQiCMS backend filter to be enough to deal with.

In short,safeThe filter is crucial for displaying rich text content, but it also requires developers to take on the responsibility of content safety. Always ensure that only content from trusted sources and thoroughly filtered on the backend is marked assafe.

【en】###