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 the website template, security is the primary consideration.If not handled properly, malicious code (such as XSS attacks) may be injected, thereby damaging the website and users.
Understanding the potential risks of rich text content
The rich text editor allows content creators to easily add titles, lists, images, links, and even custom styles, which are all stored in the form of HTML tags. For example, a simple bold text would 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>Tags, execute illegal JavaScript code, steal user data, tamper with page content, and even hijack user sessions.Moreover, improper HTML may also cause page layout disorder 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 handling variable output.Unless explicitly indicated, all HTML tags and JavaScript code output from the backend to the template will be automatically escaped.<script>tags will become<script>Thus, it is displayed in plain text, losing its execution ability, which 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, the richness of the content will be lost.Therefore, AnQiCMS provides several ways to allow us to selectively display HTML based on the trustworthiness and requirements of the content.
practical methods to ensure safe HTML display
When we need to display the HTML content generated by the rich text editor in the AnQiCMS template, we can choose from the following strategies according to the actual situation:
First, usesafeFilter (when you are sure that the content is safe and need to render HTML)
safeThe filter is the most direct and most commonly used method in AnQiCMS templates, used to inform the template engine that the content of the variables it processes is 'safe', and does not require HTML escaping and can be rendered directly as HTML code.
For example, on the document detail page, we usually call theContentfield to display the article content. IfContentThe field contains HTML, and we hope that this HTML is parsed normally by the browser, which requires the use ofsafeFilter:
{# 显示文档内容，并确保HTML被正常渲染 #}
<div>
{%- archiveDetail articleContent with name="Content" %}
{{ articleContent|safe }}
</div>
Here are thearchiveDetailthe tag to get document details,articleContenta temporary variable we define to storeContentField content. Subsequently,{{ articleContent|safe }}we explicitly tell the template engine,articleContentthe HTML in the variables is trustworthy, do not escape it and render it directly.
Important reminder: safeThe use of the filter means that you completely trust the source of the content. Once usedsafeAnQiCMS will not perform any HTML escaping on the content.If the content contains malicious scripts, they may be executed.safeFilter.
Second, using Markdown rendering (when editing Markdown content)
First, you need to enable the Markdown editor in the "Global Settings" -> "Content Settings" of the AnQiCMS background.
Then, when calling fields containing Markdown content in the template, you can addrender=trueThe parameter indicates 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 lies in its relatively simple syntax structure, which is not easily injected with complex malicious HTML.Through the system's built-in converter, it is converted to HTML, which to some extent provides a controlled HTML generation process and reduces the risk of directly handling users' arbitrary HTML.
III. Fine control: Remove or strip unnecessary HTML tags
If some rich text content is not completely trusted, or you only want to display plain text and do not want any HTML tags to appear, AnQiCMS provides `striptags