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 formatting and interactive elements, which is what we commonly call rich text.This content may include bold, italic, links, images, and even tables with HTML tags.In AnQiCMS templates, how to ensure that these HTML tags can be rendered correctly while also considering the security of the website is a topic worth discussing.

Learn about the default security mechanism of AnQiCMS template

Firstly, we need to understand one of the core security designs of the AnQiCMS template system: by default, to prevent security vulnerabilities such as cross-site scripting attacks (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 details of an article,{{ archive.Content }}put into the template, what you see will not be formatted content, but content with angle brackets<and>will be converted to<and>the original HTML code.

This default escaping behavior is an important aspect of website security. Imagine if a malicious user injected a segment into comments or article content.<script>alert('您被攻击了！')</script>And if the system does not process it and simply displays it, then all users visiting the page may be at risk.Therefore, this default handling method of AnQiCMS is to protect the website and its visitors.

UsesafeThe filter correctly renders HTML content.

When you confirm that certain rich text content is safe and trustworthy, and you want it to be displayed on the page in its original HTML format, AnQiCMS providessafeThe filter explicitly informs 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 need to output|safeIt can be. For example, when displaying the article detail page, the article content is usually rich text, and we need it to be displayed in formatted HTML:

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

By|safeThe browser will then convertarchive.Contentof<p>/<a>/<img>Tags are identified and rendered, thus presenting the format you expect. This is particularly important for content that needs to retain original formatting, such as articles, product descriptions, or custom pages.

Special handling of Markdown content andrenderParameter

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

Regarding the Markdown-formatted content of AnQiCMS'sarchiveDetailorpageDetailetc. tags, in theContentfield, can be combined withrenderParameters to control the conversion of Markdown to HTML.

• render=true: Clearly indicates that the template converts Markdown content to HTML.
• render=falseThe 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>

Thus,render=trueWill first parse Markdown syntax (such as## 标题,**加粗**) into HTML tags (such as<h2>标题</h2>,<strong>加粗</strong>Then,|safea filter to ensure that these HTML tags can be rendered normally by the browser.

Deep considerations of security: when to usesafe?

AlthoughsafeFilters can solve HTML rendering problems, but the words 'safe' are not easy to talk about. UsesafeThis means you completely trust the source of the variable's content. Therefore, when usingsafeyou must carefully evaluate:

1. Is the source content可信

   • credible sources:Website administrators or editors can directly edit and publish content in the background. AnQiCMS usually performs backend security filtering (such as sensitive word filtering) on this type of content to reduce XSS risks.
   • Untrusted source:Comments, messages, forum posts, and other content submitted by users. This content is highly likely to be maliciously injected with code. For such content,It is strongly recommended not to use directly|safeThe backend of AnQiCMS should have strict input filtering and output escaping mechanisms to handle submitted user data.Even if you need to display rich text submitted by users, you should ensure that the backend has performed sufficient filtering and sanitization.

2. Is AnQiCMS's backend security in place?AnQiCMS project advantages include 'security mechanisms: including anti-capture interference code, content security management, sensitive word filtering, and other functions to ensure content security and compliance.'This indicates that the system has multiple considerations for content security.For content entered through the backend editor (not submitted directly by the user), it is usually processed once for security, reducing the risk of direct XSS attacks.But when displaying such content on the front end, combine|safeFilters mean you trust AnQiCMS's backend filtering is sufficient to handle it.

In short,safeThe filter is the key to 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 fully filtered on the backend is marked assafe.

###