How to safely output content containing HTML code in AnQiCMS templates and avoid it from being escaped?

In website operations, we often encounter situations where we need to output content containing HTML code.For example, images, links in the article body, or custom style layouts, etc.<p>这是一个段落</p>变成了<p>这是一个段落</p>This is the core issue we are discussing today: how to safely output content containing HTML code in AnQiCMS templates to avoid it being escaped.

AnQiCMS template content's default behavior

AnQiCMS template engine places a very important position on the security of the website.To prevent cross-site scripting (XSS) attacks, it defaults to escaping all content output in the template.</>/&/"/'will be automatically converted to their corresponding HTML entities.

For example, a content that originally is<script>alert('Hello!')</script>will become after default escaping.<script>alert('Hello!')</script>.So, the browser will not treat it as an executable script but display it as plain text, effectively preventing the execution of malicious code.This is a very robust security strategy.

However, for the legitimate content that we indeed hope to present in HTML format, such as carefully formatted content in the background rich text editor, this default escaping behavior requires us to perform additional processing to release this 'safety constraint'.

Solution One: UsesafeFilter disable default escaping

When you know for sure that the HTML code contained in a variable is safe and可信的, and you want the browser to parse and render it directly, AnQiCMS providessafeA filter to handle this situation. Its purpose is to tell the template engine: "This content is safe, please do not escape it as HTML, and output it as is!"}]

• Usage:safeThe use of the filter is very simple and intuitive. You just need to add it after the variable that needs to be unescaped.|safeFor example, if you have a variable namedarchiveContentThe variable stores the article's main HTML content, you can output it like this:

  <div>{{ archiveContent|safe }}</div>
  

  Here,archiveContentAll HTML tags will be normally parsed and rendered by the browser.

• Safety WarningAlthough:safeThe filter provides convenience, but its use is not without risk. Once you use|safe, it means you guarantee the safety of this content to the template engine. IfarchiveContentIf a web page不小心包含了未经严格审查的恶意脚本，那么这些脚本将会被浏览器执行，从而导致严重的XSS攻击，可能泄露用户信息或破坏网站功能。因此，在使用safeBefore the filter,Make sure the content source is absolutely reliable and secure, or the content itself has been strictly filtered and verified.

Solution two: userenderFilter handles Markdown content

In AnQiCMS, you may take advantage of its powerful content model features to write articles or page content using the Markdown editor. Markdown is a lightweight markup language that uses simple symbols (such as#to represent headings,*Represents italic) to quickly achieve formatting. When this Markdown formatted content needs to be displayed as formatted HTML on the front end, AnQiCMS providesrenderFilter to perform this conversion.

• Usage:renderThe filter will process the Markdown text and convert it to the corresponding HTML structure. Since the result is HTML, it usually also needs to be paired withsafeThe filter is used together to ensure that the converted HTML tags can be correctly parsed by the browser and not be escaped again.
  • For example,categoryContentThe variable stores a Markdown-formatted classification introduction, you can output it like this:

    
    <div>{{ categoryContent|render|safe }}</div>
    

  • In this example,|renderThe filter first processes the Markdown text and converts it into HTML,|safeThe filter ensures that these HTML tags can be normally parsed and displayed by the browser.It is worth noting that some core fields in AnQiCMS background content management (such as 'Document Content', 'Category Content', etc.), when you enable the Markdown editor in the background, the system may automatically convert Markdown to HTML before the content enters the template.renderThe filter is still the recommended practice.

Points to note in practice

In AnQiCMS template, when outputting content containing HTML code, please pay special attention to the following points to ensure the safety and stability of the website:

1. Trust the sourceOnly use for content sources you trust completelysafeFilter. For example, content edited and published by the website administrator through the rich text editor in the background, which has usually passed the system-built-in security filter, can be considered safe.
2. Handle user input carefully: For any unprocessed HTML content submitted from the user front end (such as comments, messages, etc.), it must never be directly passed through|safeFilter output.This is the most common XSS attack entry.