How to ensure that HTML code is correctly parsed and not escaped when displaying rich text content using the `safe` filter?

In Anqi CMS, rich text content usually carries articles, product descriptions, or page details, etc., which often contains various HTML tags such as bold, italic, images, links, tables, etc.If this HTML code is not parsed correctly and is simply displayed as plain text, then what the user sees on the front end is a mess of code, not beautiful and structured content. This obviously has a serious impact on the reading experience and professionalism of the website.

The AnQi CMS template engine uses a syntax style similar to Django, its default behavior is for security reasons, it will escape all output variable content. This means that when you enter in the background rich text editor,<p>这是一段<b>加粗</b>的文字。</p>such content is output directly in the template, if not handled specially, the browser may receive<p>这是一段<b>加粗</b>的文字。</p>. At this point,pTags andbTags and the like are escaped into their HTML entities, so they are displayed directly on the page<p>and<b>Characters, not parsed and presented in bold text style by the browser.This escaping mechanism effectively prevents cross-site scripting attacks (XSS), and avoids malicious code being directly injected into the page for execution.

However, for the content we expect to be displayed as rich text by default, this escaping mechanism has become an obstacle. To solve this problem, Anqi CMS providessafefilter.safeThe core function of the filter is to clearly tell the template engine: "This content is safe, do not escape it in HTML, and parse and render it directly according to the HTML code within it."

safeThe core function and usage of the filter

UsesafeThe filter is very intuitive, you just need to add it after the variable that needs to be output and contains HTML code|safeAnd it is: {{ 变量名|safe }}.

For example, in the AnQi CMS template, when you need to display the detailed content of an article, you will usearchiveDetailtags to get the document content fieldContent. At this point, you will getarchiveContentVariables may contain HTML code edited by users through a rich text editor. To ensure that these HTML codes are correctly parsed, you should use it like this:

{%- archiveDetail articleContent with name="Content" %}
{{articleContent|safe}}

Similarly, if you need to display the detailed introduction of the category (categoryDetailofContentfield), the content of a single page (pageDetailofContentfield), or the description of a tag (tagDetailofContentfield), it also needs to be applied|safeFilter:

• Classification content:

  {%- categoryDetail categoryContent with name="Content" %}
  {{categoryContent|safe}}
  

• Single page content:

  {%- pageDetail pageContent with name="Content" %}
  {{pageContent|safe}}
  

• Label content:

  {%- tagDetail tagContent with name="Content" %}
  {{tagContent|safe}}
  

Through such processing, the template engine will no longer perform HTML escaping when outputting these variables, but will instead send the original HTML code directly to the browser, which will be responsible for parsing and presenting the expected rich text style.

safety considerations and **practice

AlthoughsafeThe filter solves the display problem of rich text content, but it must be used with caution as it essentially turns off the default security protection of the template engine. This means that if you willsafeThe filter is applied to user input coming from untrusted sources or that has not been strictly filtered, which may introduce XSS vulnerabilities.Malicious users may submit rich text content containing JavaScript code and execute these scripts on the page, thereby stealing user information, tampering with page content, and so on.

Therefore, **practice is:**

1. Only applied to trustworthy content: safeThe filter should only be used when you are sure that the content is safe and harmless, such as reviewed by a background administrator or generated by the system.
2. Utilizing the built-in security mechanism of CMS:The AnQi CMS itself provides multi-layer security mechanisms, such as sensitive word filtering, content security management, and other functions. When usingsafeBefore the filter, make sure that the relevant content has passed these built-in security checks.
3. Processing Markdown content:If you have enabled the Markdown editor, Anqi CMS will automatically convert Markdown syntax to HTML when saving or outputting content. In this case,safeThe filter is still necessary to ensure that the converted HTML code can be parsed correctly. The document mentions that,archiveDetailtags can even acceptrender=trueSpecify the parameter to explicitly perform the Markdown to HTML conversion, and then cooperate|safeEnsure rendering.

In short,safeThe filter is an indispensable tool in Anqi CMS for handling rich text content, allowing the page to display beautiful and structured content correctly.But while enjoying its convenience, always keep in mind its security features, and apply them to trusted, disinfected content, which is the key to ensuring the stable operation of the website.

Frequently Asked Questions (FAQ)

1. Q: If I forget to use the rich text content|safeWhat will happen to the filter?A: If you forget to use|safethe filter, all HTML tags (such as<p>,<b>,<img>etc.) will be escaped by the template engine into HTML entities (such as<p>,<b>,<img>Then it is displayed as plain text on the page. The user will see the original HTML code, rather than rendered bold text, images, or formatting effects.

2. Q:|safeFilters and{% autoescape off %}What are the differences between tags?A:|safefilter is fora single variableActive, it will cancel the HTML escaping of the variable content. And{% autoescape off %}Is aTemplate TagIt can be used to closea template code blockthe automatic HTML escaping of all variables. Usually,|safeUsed to precisely control the output of specific variables, while{% autoescape off %}is used for large-scale, known-safe template areas. For safety reasons, it is recommended to use as much as possible|safeFilter to minimize the scope of automatic escaping.

3. Q: I inserted JavaScript code in the backend rich text editor and then used|safeFilter, why did this JS code execute on the front end? Is it safe?A: That's exactly|safeThe reason to use the filter cautiously. When you use|safeWhen using a filter, you are telling the template engine that this content is 'safe' and does not require escaping processing.If the content contains JavaScript code, the template engine will directly output it to the page, and the browser will execute it as part of the page script.This is very unsafe because malicious users can exploit this mechanism to carry out XSS attacks. Therefore,Never do thisto|safeThe filter is applied to any content that may contain JavaScript code submitted by users or not verified, even if it is inserted in the background, it should ensure the reliability of the content source. The rich text editor of Anq CMS usually has a certain filtering mechanism, but developers and operators should understand|safeThe risk is crucial.