How to safely display HTML content generated by the rich text editor in AnQiCMS templates?

In website operation, we often need to handle content from rich text editors, which usually contains richly formatted HTML code.However, when displaying these HTML contents on a website template, security is the primary concern.If not handled properly, malicious code (such as XSS attacks) may be injected, thereby harming the website and users.

AnQi CMS is a highly efficient, customizable, and secure enterprise-level content management system that fully considers content security issues from the very beginning.The system is committed to making all websites safe in the world, built-in anti-crawling interference codes, content security management, and sensitive word filtering functions, ensuring the safety and compliance of content from multiple levels.In terms of template rendering, Anqi CMS also provides a flexible and powerful mechanism to help users safely display rich text content.

Understanding rich text content and potential risks

The rich text editor allows content creators to easily add titles, lists, images, links, and even custom styles, which are ultimately stored in the form of HTML tags. For example, a simple bold text will be saved as<strong>您的文本</strong>Although this brings great convenience to the richness of the content, it also opens the door to potential security risks.

The most common risk is cross-site scripting (XSS) attacks. Malicious users may insert into rich text content.<script>Label, execute illegal JavaScript code, steal user data, tamper with page content, and even hijack user sessions.Moreover, non-standard HTML may also lead to chaotic page layout and style errors, affecting user experience.Therefore, how to display this content while preserving its richness and ensuring safety is a challenge that every website operator must face.

How AnQiCMS handles HTML content: default behavior and manual control

The Anqi CMS is developed based on Go language and Django template engine syntax, and its template system takes strict security measures by default when processing variable output.Unless explicitly indicated, all HTML tags and JavaScript code output from the backend will be automatically escaped.This means, similar<script>tags will become<script>Therefore, it is displayed in plain text, loses its execution capability, and greatly reduces the risk of XSS attacks.This 'default security' design is the foundation for AnQiCMS to ensure content security.

However, the original intention of using a rich text editor is to display formatted content, if all HTML is escaped, then the richness of the content will be lost.Therefore, AnQiCMS provides several ways to allow us to selectively display HTML based on the trust level and needs of the content.

Practical methods to ensure safe display of HTML

When you need to display the HTML content generated by the rich text editor in AnQiCMS templates, you can choose from the following strategies based on the actual situation:

1. UsesafeFilter (when you are sure the content is safe and you need to render HTML)

safeThe filter is the most direct and commonly used method in AnQiCMS templates, used to inform the template engine that the content it processes is "safe", does not require HTML escaping, and can be rendered directly as HTML code.

For example, on the document detail page, we usually call the document'sContentfield to display the article content. IfContentThe field contains HTML, and we want these HTML to be parsed normally by the browser, so we need to usesafeFilter:

{# 显示文档内容，并确保HTML被正常渲染 #}
<div>
    {%- archiveDetail articleContent with name="Content" %}
    {{ articleContent|safe }}
</div>

HerearchiveDetailThe tag is used to get the details of the document,articleContentis a temporary variable we define to storeContentthe content of the field. Then, through{{ articleContent|safe }}We explicitly tell the template engine,articleContentThe HTML in the variable is trustworthy, do not escape it and render it directly.

Important reminder: safeThe use of filters means you fully trust the source of the content. Once usedsafe，AnQiCMS will not perform any HTML escaping on the content.If the content contains malicious scripts, they may be executed.Therefore, ensure that only rich text content from trusted sources or strictly reviewed is usedsafefilter.

Second, use Markdown rendering (when editing Markdown content)

AnQi CMS supports Markdown editor, which provides another secure and efficient way for content creation and display.When the Markdown editor is enabled in the background and the content is stored in Markdown format, AnQiCMS can automatically convert Markdown to HTML during template rendering.

First, you need to enable the Markdown editor in the "Global Settings" -> "Content Settings" of the AnQiCMS backend.

Then, when calling fields containing Markdown content in the template, you can addrender=trueParameters to indicate the system to perform Markdown to HTML conversion. For example:

{# 假设Content字段存储的是Markdown内容，通过render=true进行转换，并用safe渲染 #}
<div>
    {%- archiveDetail articleContent with name="Content" render=true %}
    {{ articleContent|safe }}
</div>

The advantage of Markdown is that its syntax is relatively simple and not easily injected with complex malicious HTML.Convert it to HTML using the system's built-in converter, which to some extent provides a controlled HTML generation process, reducing the risk of directly handling users' arbitrary HTML.

3. Fine control: Remove or strip unnecessary HTML tags.

If some rich text content source is not fully trusted, or if you only want to display plain text and do not want any HTML tags to appear, AnQiCMS provides `striptags