How to safely output HTML code in the AnQiCMS template to prevent escaping?

In website operation, we often encounter situations where we need to output content containing HTML code.For example, images, links in the main text, or customized layout styles, etc.When you output this content in the AnQiCMS template, you may find that it is not displayed as interactive elements as expected, but rather in the form of raw HTML code, such as<p>这是一个段落</p>Became<p>这是一个段落</p>This is the core issue we are discussing today: how to safely output HTML code containing content in the AnQiCMS template without escaping.

The default behavior of AnQiCMS template content

AnQiCMS template engine places the security of the website at a very important position during design.For the prevention of cross-site scripting attacks (XSS), it defaults to escaping all content output in the template.This means, any character that is recognized as a special character in HTML tags, such as</>/&/"/'will be automatically converted to their corresponding HTML entities.

For example, a content that originally is<script>alert('Hello!')</script>will be changed to after default escaping.<script>alert('Hello!')</script>This way, the browser will not treat it as 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 do indeed hope to present in HTML format, such as carefully formatted content in a backend rich text editor, this default escaping behavior requires additional processing to release this 'safety restraint'.

Solution one: usesafeUnescape default filter escape

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

• Usage method: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 main body HTML of the article, you can output it like this:

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

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

• Safety warning: Although safeThe filter provides convenience, but its use is not without risk. Once you have used|safeit means that you guarantee the safety of this content to the template engine. IfarchiveContentAccidentally included unreviewed malicious scripts, which, if executed by the browser, could lead to severe XSS attacks, potentially leaking user information or damaging website functionality. Therefore, when usingsafeBefore the filter,Always confirm that the source of content is absolutely reliable and secure, or that the content itself has been strictly filtered and verified.

Solution two: usingrenderThe filter processes Markdown content

In AnQiCMS, you may take advantage of its powerful content model features, writing articles or page content through the Markdown editor. Markdown is a lightweight markup language that uses simple symbols such as#Indicates the title,*Italic can be quickly formatted. When this Markdown content needs to be displayed as formatted HTML on the front end, AnQiCMS providesrenderThe filter completes this transformation task.

• Usage method:renderThe filter will process Markdown text and convert it to the corresponding HTML structure. Since the result is HTML, it usually also needs to be accompanied bysafeThe filter is used together to ensure that the converted HTML tags can be correctly parsed by the browser, rather than being escaped again.
  • For example, ifcategoryContentVariables store the Markdown format of category introductions, and you can output it like this:

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

  • In this example,|renderThe filter first processes the Markdown text and converts it to HTML, then|safeThe filter ensures that these HTML tags can be parsed and displayed normally by the browser.It is worth noting that some core fields in the AnQiCMS backend content management (such as "document content", "category content", etc.), when you enable the Markdown editor in the backend, the system may automatically convert Markdown to HTML before the content enters the template.But when handling custom fields or when explicit rendering behavior control is needed, use it explicitly in the templaterenderThe filter is still the recommended practice.

Points to note in practice

When outputting content containing HTML code in the AnQiCMS template, be sure to pay attention to the following points to ensure the security and stability of the website:

1. Trust the sourceUse only content sources you trust completelysafeFilter. For example, content edited and published by the website administrator through a rich text editor in the background, as it usually goes through the built-in security filtering of the system, it can be considered safe.
2. Handle user input carefully: For any unprocessed HTML content submitted from the user's front-end (such as comments, messages, etc.), it must not be directly passed through|safeFilter output. This is the most common XSS attack entry point.If it is indeed necessary to display user-submitted content containing HTML, it must be strictly cleaned and filtered on the server side, for example, by using an HTML whitelist mechanism, only allowing safe HTML tags and attributes to be displayed, and removing all potential malicious scripts