How to safely render HTML content generated by a rich text editor in the Anqi CMS template?
When building a website, a rich text editor (Rich Text Editor, abbreviated as RTE) is undoubtedly a powerful tool for content creation. It allows operators to edit content in a visual way, easily adding formats, images, links, and even tables, greatly enhancing the richness of content presentation.However, when this HTML content generated by RTE needs to be displayed in the website front-end template, how to ensure its safe rendering while retaining the expected style and structure is a problem that requires careful consideration.
AnQiCMS (AnQiCMS) is an efficient content management system that fully considers this requirement and has built-in corresponding security mechanisms and processing methods in the template engine.Understanding these mechanisms is crucial for ensuring the stable operation of the website and user information security.
Understanding the essence and potential risks of rich text content
The content output by the rich text editor is essentially a code snippet with various HTML tags. For example, a simple bold text may be output by RTE as<strong>加粗文字</strong>. Images and links will include<img>and<a>Tags, even complex table structures.
Although these HTML tags are essential for displaying beautiful content, unreviewed HTML content may also pose a security risk to websites, especially "cross-site scripting attacks" (XSS). Malicious users may insert malicious JavaScript code (such as<script>alert('您被攻击了！')</script>), if this code is directly rendered on the front end, it may be executed in the visitor's browser, steal cookies, hijack sessions, or even tamper with page content, causing serious harm to the website and users.
The default security strategy of AnQi CMS: automatic escaping
To prevent such risks, AnQi CMS has adopted a strict default security strategy at the template rendering level: all passed through{{ 变量 }}The HTML content displayed on the page will beAutomatically escape HTML entitiesThis means that the original<It will be converted into<,>It will be converted into>,"It will be converted into"etc.
This default escaping behavior ensures that even if malicious scripts are included in rich text content, they will be displayed as plain text and not executed by the browser.For a website, this is an important security measure.{{ archive.Content }}So the content displayed on the page will be including<p>/<strong>Escaped characters represent plain text, not formatted content. Although this ensures safety, it also loses the display effects of rich text.
Enable rich text rendering:|safeUse of filters
It is obvious that in order to display the rich content generated by the rich text editor correctly on the front end, we cannot allow all HTML tags to be escaped. At this time, Anqi CMS provides|safeA filter to solve this problem.
When you are sure that the content of a rich text field is safe and可信的, and you want the browser to parse and render it as true HTML structure, you can add it after the template variable|safeFilter. For example, if you want to display the article contentarchive.Contentand it was created by an administrator in the backend rich text editor, you can write it like this:
<div>{{ archive.Content|safe }}</div>
|safeThe filter explicitly tells the Anqi CMS template engine: "This content is safe, do not escape it as HTML entities, and output it directly as HTML code." Once used,|safeThe browser will format and display the content based on the HTML tags it contains, such as bold, italic, images, and so on will be displayed normally.
Important reminder: |safeThe filter is a "trust" symbol. Its use means that as a website operator, you have thoroughly reviewed the content or are confident that the source is absolutely credible.Do not use rich text content from untrusted users or without strict content review at will|safeFilterIf not, the website will be directly exposed to the risk of XSS attacks. Ideally, rich text content should only be edited and published by authorized, trusted administrators.
Special handling of Markdown content
The AnQi CMS also supports Markdown format content editing. If you enable the Markdown editor in the background and the content is written in Markdown syntax, then when displaying this type of content in the template, you will find thatarchiveDetailThe tag has arenderParameter.
When fromarchiveDetailThe tag retrieves content and wants to render it as HTML, for example:
{% archiveDetail articleContent with name="Content" render=true %}
<div>{{ articleContent|safe }}</div>
Hererender=trueThe parameter will indicate that the system should first convert the Markdown content to HTML format.Even after the conversion from Markdown to HTML, the final result is still HTML code.Therefore, if you want the browser to parse and display it as formatted content, not plain HTML text, youstill need to cooperate|safeFilter. This means|safeThe function is to process the final HTML output, whether it is direct HTML or HTML converted from Markdown.
More fine-grained control:autoescapeTags and other auxiliary filters
In some special scenarios, you may need to have more flexible escaping control for some parts of the template. Anqi CMS providesautoescapeTags allow you to turn on or off automatic escaping in specific areas of the template.
{# 默认情况下自动转义是开启的 #}
{% autoescape off %}
{# 在这个区块内，所有变量输出将不再自动转义，除非您手动使用 |escape #}
<div>{{ potentially_unsafe_html }}</div> {# 这段内容会被直接输出HTML #}
<div>{{ safe_text|escape }}</div> {# 这段内容会被手动转义 #}
{% endautoescape %}
{% autoescape on %}
{# 在这个区块内，所有变量输出将恢复自动转义 #}
<div>{{ regular_text }}</div> {# 这段内容会自动转义 #}
{% endautoescape %}
Generally, when dealing with rich text content, it is more common and convenient to use|safefilters.autoescapeTags are more commonly used in complex scenarios where local adjustment of the template's default escaping behavior is needed.
In addition, AnQi CMS also provides some other filters that can assist in the secure handling of content in certain situations:
|escapejsIf your rich text content may contain text that needs to be embedded into JavaScript code (for example, as a JS variable value), use|escapejsCan ensure that the JS code syntax is not broken and prevent JS injection.|striptagsand|removetagsIf you want to strip all HTML tags completely, or only remove specific HTML tags, you can use these filters.This is very useful when you only care about the text content and do not want to retain any formatting, and can be used as an extreme content purification method.|urlizeand|urlizetruncThese filters can automatically identify URLs and email addresses in text and convert them into clickable hyperlinks, while also addingrel="nofollow"Property. This is useful for handling plain text submitted by users, which may contain URLs, as it provides convenience while also increasing security.
**Practical Suggestions
In Anqi CMS template, safely rendering rich text content lies in 'trust' and 'control':
- Default to escaping.Understanding that the default behavior of Anqi CMS is to escape automatically. Intervention is only carried out when you explicitly need to render HTML.
- Exercise caution.
|safeUse rich text content only when you fully trust the content source (usually edited by backend administrators)|safefilter. - Strengthen content reviewEven administrators should be careful not to paste or enter malicious code from untrusted sources in a rich text editor.Consider configuring the backend to perform stricter audits on the rich text content of specific administrator groups.
- Utilize CMS functionality：Secure CMS is built-in with sensitive word filtering and other security mechanisms, which can effectively reduce the risk of malicious content publication.
- Regular updatesEnsure your CMS system is kept up to date to obtain the latest security patches and feature improvements.
By adhering to these principles, you can effectively balance the richness of content and the security of the Anqi CMS, providing users with a beautiful and secure browsing experience.