How to correctly display HTML rich text content in article content through the `safe` filter?

In website content operation, Rich Text content plays a crucial role.It allows us to enrich the expression of articles with various formats such as images, links, bold, italic, etc., enhancing the reading experience.Auto CMS (AutoCMS) provides a powerful backend editor, making it easy for us to create all kinds of excellent content.However, when this rich text content finally appears on the website page, it is sometimes found that the originally beautiful formatting and links have become the original HTML code string. Why is that?

The rich text content in Auto CMS and the default escape mechanism

The Anqi CMS supports inserting various rich text elements such as HTML tags, images, and videos in the backend content editor.When you edit and save articles, category descriptions, or single-page content through the backend editor, this rich content will be stored in the database in HTML format.

By default, to ensure the security of the website and prevent potential risks such as cross-site scripting (XSS) attacks, the template engine of Anqi CMS automatically performs 'escaping' processing on the HTML content obtained from the database and output to the page. This means that all HTML tags (such as<p>,<a>,<img>[auto]中的尖括号<and>[auto]会被替换成<and>English entities.This processing method can ensure that the browser treats this content as plain text rather than executable code, thereby avoiding potential security vulnerabilities.But it also leads to the display of the original HTML code on the page, rather than the rich text style you expected.

safe[auto]过滤器的作用：解锁富文本的正确显示

为了解决[auto]富文本内容被转义的问题，安企CMS的模板引擎提供了safeFilter.safeThe filter, as the name implies, tells the template engine that the content decorated by it is 'safe' and does not need to be escaped as HTML entities. It can be output directly as HTML code to the page. By applyingsafeFilter, the browser can correctly parse and render rich text content, restoring its original formatting, images, links, and styles.

How to use correctly in article contentsafeFilter

In the template files of AnQi CMS, when we obtain the rich text content of articles, categories, or single pages, we usually use specific tags to retrieve the data. For example, to get the detailed content of an article, we might usearchiveDetailLabel, assign content to a variable:

{# 假设您正在获取当前文章的完整内容，并将其赋值给 archiveContent 变量 #}
{% archiveDetail archiveContent with name="Content" %}

To ensure that this part of the content is displayed correctly as rich text, you need to output the variable whensafeThe filter is applied to it. Specifically, it is done by adding to the variable name.|safe.

Let us demonstrate with a typical example:

<div class="article-body">
    {# 这里是关键：将 safe 过滤器应用到 archiveContent 变量上 #}
    {{ archiveContent|safe }}
</div>

In this example,archiveContentThe variable contains the HTML content entered in the article editor. If not|safe,{{ archiveContent }}The escaped HTML string will be output (for example, you will see<p>文章内容</p>). While adding|safeafter,{{ archiveContent|safe }}The HTML code will be output directly (for example,<p>文章内容</p>), and the browser will render it as rich text content with styles, images, and links.

Similarly, if you are getting classified content (usingcategoryDetailtags) or single-page content (usingpageDetailtags) that includes rich text fields (such asDescriptionorContent), you also need to apply the same method.safeFilter:

{# 示例：显示分类详情的富文本描述内容 #}
{% categoryDetail categoryDescription with name="Description" %}
<div class="category-description">
    {{ categoryDescription|safe }}
</div>

{# 示例：显示单页面详情的富文本内容 #}
{% pageDetail pageContent with name="Content" %}
<div class="page-content">
    {{ pageContent|safe }}
</div>

Safety considerations: use with cautionsafeFilter

AlthoughsafeThe filter is the key to displaying rich text content, but its use requires special caution.As mentioned earlier, it will disable the default security escaping mechanism of the template engine.safeFilter may cause XSS (Cross-Site Scripting) vulnerability. Attackers may inject malicious scripts into articles to steal user data or hijack user sessions.

Therefore, when usingsafeFiltering, please make sure:

1. Content source is credible: All rich text content input through the backend editor should be created by trusted administrators or content editors.
2. Backend filtering is完善：The backend editor of AnQi CMS usually has certain security filtering capabilities, but it is still necessary to pay attention to system updates to ensure the effectiveness of the filtering mechanism.
3. Avoid uncleaned data：Do not directly use data from third-party sources that are untrusted, not strictly cleaned and verified on the server side,safethe filter.

Summary

safeThe filter is an indispensable tool for correctly displaying rich text content in the Anqi CMS template.It allows you to perfectly present articles, categories, or single pages in rich formats on the page.But while enjoying its convenience, please always remember the security implications behind it, always put content security first, and ensure the healthy and stable operation of the website.

---

Common Questions (FAQ)

1. Question: Why haven't I usedsafeFilter, images and links cannot be displayed, only text is shown<img>and<a>What tag code?答：This is because the template engine of AnQi CMS defaults to escaping all output content to prevent malicious script injection. When you do not usesafefilters, angle brackets<and>which will be converted to<and>auto HTML entities, causing browsers to not recognize them as HTML tags, but to display them as plain text.

2. Q: Can I usesafeDo you want a filter to display HTML content retrieved from an external API?答：In principle, it is permissible, but strongly recommended not to do so directly. Any HTML content from an unreliable source, when usingsafeThe filter should perform strict cleaning and validation on the server side before, to filter out potential malicious scripts or unsafe tags.This is done to avoid directly outputting unsafe external content to your website, thereby triggering XSS attack risks.

3. Question: BesidessafeFilters, are there any other similar filters?答：In the template filter of Anqi CMS,safeit is specifically used to cancel HTML escaping. Its counterpart isescapeFilter (or its alias)eIt is used to force HTML entity escaping (even though it is already done by default). Additionally,escapejsThe filter is used to escape JavaScript code, each serving different security or formatting needs. Typically, when dealing with the correct display of rich text content,safeFilter is the most direct and commonly used option.