How to safely display rich text content containing HTML tags on the front page?

In website operations, we often need to display content containing images, links, bold text, and other rich formats, which is known as rich text content.But safely displaying these rich text with HTML tags on the front-end page is a practical yet cautious task.Auto CMS is an efficient content management system that fully considers this point and provides us with a clear solution.

Understand the rich text content in Anqi CMS

When we write articles, product descriptions, or single-page content in the backend editor of the Anqi CMS, the system provides an intuitive rich text editor.You can easily insert images, set text styles (such as bold, italic), create lists, and even embed videos or code blocks.These operations appear normal in the background because the editor is responsible for converting your formatting intentions into standard HTML tags.

默认的安全机制：HTML自动转义

When displaying content on the website front-end, security is always the primary consideration.To prevent potential cross-site scripting (XSS) attacks, the template engine of Anqi CMS (which uses a syntax similar to Django's Pongo2 template engine) defaults to perform a very important security operation: HTML auto-escape.

简单来说，这意味着如果您直接将富文本内容像普通文本一样输出到页面上，比如：

<div>{{ archive.Content }}</div>

那么，像<script>alert('XSS')</script>Such HTML tags will not be parsed and executed by the browser, but will be escaped as<script>alert('XSS')</script>Display as plain text. This default behavior greatly reduces the risk of the website being attacked by malicious code, ensuring user browsing safety.

Safe display of rich text: use|safeFilter

However, for the rich text content that we create, which we hope the browser can correctly render its styles and structure, this default automatic escaping is no longer what we want. For example, the main text of the article, the description on the product detail page, we hope it can display in bold, images, and other effects, rather than a pile of<p>/<img>The original label.

This is when we need to explicitly tell the template engine of AnQi CMS: "This content has been reviewed by me, and I believe it is safe HTML, please do not escape it and render it directly." Achieving this is done by using|safeFilter.

For example, taking the article detail page as an example, assume that the article content is stored inarchive.Contentin the field, you need to call it like this in the template:

<div>
    {{- archive.Content|safe }}
</div>

Or if it is single-page content, it may use:

<div>
    {{- pageContent|safe }}
</div>

Here are the|safeThe filter will cancel the default HTML escaping, allowing the browser to recognize and render HTML tags within the content, thereby displaying rich text correctly.

Markdown content rendering control

If you have enabled the Markdown editor in the AnQi CMS backend and the content is written using Markdown, then when displayed on the front end, in addition to using|safeFilter outside,archiveDetail/pageDetailof the tagsContent字段还支持一个renderParameter.

In content settings, you can choose whether to automatically convert Markdown content to HTML by default. If you want to have more precise control over the conversion behavior, or ensure that the content is rendered correctly even when automatic conversion is turned off, you can explicitly specify it when callingrender=true:

<div>
    {%- archiveDetail articleContent with name="Content" render=true %}
    {{articleContent|safe}}
</div>

This way, the system will first convert the Markdown content to HTML, and then through|safeThe filter ensures that it is rendered by the browser. If you do not wish to perform Markdown conversion, you can setrender=false.

Auto CMS even supports integrating third-party plugins like MathJax and Mermaid to display mathematical formulas and flowcharts, these advanced features usually require adding specific JS/CSS references to your template files (such asbase.htmlThe auto of the header, and when outputting related content, it is also necessary to ensure|safeProper use of the filter, as well as the correct display of Markdown contentrender.

Security practice recommendations

Use|safeThe filter is convenient, but remember the security implications behind it.It is equivalent to you making a security guarantee for this HTML content.

1. Always use with caution|safe:Use it only when you are sure that the content source is reliable and will not contain malicious scripts.
2. Strengthen backend content review:The Auto CMS provides sensitive word filtering, anti-crawling interference code and other security mechanisms.Combine manual review to ensure that the rich text content submitted by users or content contributors does not contain dangerous HTML or JavaScript code.Any content from an untrusted source should be strictly sanitized (sanitization) before storing and displaying.
3. Regularly update the system:Keep your CMS system and all plugins up to date to obtain the latest security patches and protection measures.

In summary, the Anqi CMS provides strong security protection by default when handling the display of rich text content. When we want to show the richness of the content, we need to understand and use it correctly.|safeFilter, as well as combined when necessaryrenderParameters, we can provide visitors with beautiful and complete page content while ensuring website security.

---

Common Questions (FAQ)

1. Why does the front-end page only display plain text instead of images and links when I publish articles with content that clearly has images and links, and all HTML tags are exposed?

This is usually because you haven't used rich text content in the template|safeFilter.The template engine of AnQi CMS defaults to escaping all HTML tags to prevent XSS attacks.{{ archive.Content }}or{{ pageContent }}）to modify{{ archive.Content|safe }}or{{ pageContent|safe }}.

2. If I use a filter|safeis my website completely safe?

No.|safeThe filter tells the template engine 'This content is safe, please render it directly'.It does not perform any security checks or cleaning on the content itself.|safeThe filter will actually cause it to be executed, thereby leading to XSS attacks.The real security needs to start from the source: ensure that the content input from the background is strictly verified and filtered, to prevent malicious HTML or JavaScript code from being saved to the database.Auto CMS provides some built-in security features, such as sensitive word filtering, but it is crucial to combine them with manual review and a sense of security awareness.

How to correctly display Markdown formatted content in AnQi CMS?

If you have enabled the Markdown editor in the background and written Markdown content, in addition to using|safeFilter outside, you also need to make sure that the Markdown content is correctly converted to HTML. When usingarchiveDetail/pageDetailEnglish tags obtainedContentthe field, you can try addingrender=trueparameters, such as{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}.This will indicate that the system should convert Markdown to HTML before displaying.In most cases, if the background is set to automatically convert Markdown to HTML, this parameter may not be mandatory, but explicitly specifying it can provide stronger control.