When managing website content with Anqi CMS, you may encounter a seemingly minor yet annoying problem: when editing in the background, you input formatted HTML code, but when displayed on the front-end page, these HTML tags are turned into plain text, even presented as angle brackets directly, losing the original style and layout.This not only affects the beauty of the page, but also discounts the carefully arranged content.What is this all about, and how should we solve it?

Understanding the reason why HTML tags are escaped

The Anqi CMS adopts a template engine similar to Django, and one of its design philosophies is to ensure website security.When we pass content (especially content that may contain HTML tags) from the backend to the frontend template for rendering, the template engine defaults to enabling an important security mechanism - automatic escaping.

This mechanism will handle HTML special characters, such as the angle brackets ()<and>), indicating HTML entities or special characters (ampersand)&), and quotation marks ("and'）等，转换成对应的HTML实体编码（如&lt;/&gt;/&amp;The core purpose of this approach is to effectively prevent cross-site scripting attacks (XSS). If a malicious user injects into the content,<script>Tags and executable code, automatic escaping ensures that these codes are displayed as plain text and not executed by the browser, thereby protecting the website and users.

Although this feature is crucial for security, in certain specific scenarios, we indeed need the browser to recognize and render the HTML code we input.

Solution One: UsesafeFilter (for trusted HTML content)

When you are sure that a piece of content is safe, reliable HTML code, and you want it to be normally parsed by the browser, Safe CMS providessafeFilter. This filter is the most commonly used and most direct method to solve the problem of HTML tags being escaped.

You just need to add it after the content variable where you need to output HTML.|safeThe template engine will recognize that this content should be rendered as raw HTML and not be escaped. For example, if your article content is stored inarchive.ContentIn the variable, and this content is entered through a rich text editor. If you want the bold, links, images, and other HTML tags to display normally, you can use it in the template like this:

{{ archive.Content|safe }}

Similarly, for categorized content or single-page content (such ascategory.Contentorpage.Content) if it contains HTML that needs to be rendered, the same handling approach can be adopted.safeThe filter tells the template engine: "I know this content is safe, please output it directly without escaping."

Solution two: useautoescapetags (for content blocks)

Except for using for a single variablesafeFilter aside, AnQi CMS also provides a more macro control method, that is,autoescapeTag. This tag can be used to enable or disable the automatic escaping feature of a content block.

If you have a specific content area that contains multiple variables, and you are sure that all the content within that area is safe HTML, then you can use{% autoescape off %}and{% endautoescape %}Wrap this area:

{% autoescape off %}
    <p>这段内容中的所有HTML标签都不会被转义：</p>
    <div>{{ myHtmlVariable }}</div>
    <span>{{ anotherHtmlSnippet }}</span>
{% endautoescape %}

Alternatively, if you want to force escape in a specific area (even though Aiqi CMS is enabled by default), or want to enable it locally after globally disabling escape, you can use{% autoescape on %}.However, the scenario of disabling automatic escaping is usually very rare and comes with high risk, it is recommended not to use it lightly unless absolutely necessary.The default automatic escaping mechanism of the website is an important defense line for security.

Solution Three: Handling Markdown content (renderWithsafeCombination)

The AnQi CMS supports Markdown editor, which provides a convenient writing experience for content creators.Markdown content is typically saved in plain text format, but in order to display it correctly on the front end, we need to parse it into HTML.

In this case, you need to userenderFilter.renderThe filter will convert Markdown syntax to HTML code. However, conversion alone is not enough, the converted HTML also needs to be配合safeFilter, so that these HTML tags generated by Markdown are not escaped twice, ensuring they are displayed correctly on the page.

So, when you are dealing with Markdown formatted content, the correct template syntax would be a combination like this:

{{ item.Content|render|safe }}

Here are theitem.ContentIt is Markdown text,|renderParse it into HTML,|safeEnsure that these HTML tags are not escaped and rendered normally.

Practical suggestions and precautions.

  1. Security is the primary consideration:Always keep in mind,safefilters andautoescape offTags will disable security protection. Therefore, they can only be applied to youFully trustedHTML code that has been strictly reviewed. Do not use these features for user-submitted content that has not been cleaned or verified, otherwise it is very easy to suffer from XSS attacks.
  2. Content source judgment:
    • Backend administrator rich text content:For the content of the article body, product details, single-page content, category details, etc., which are input by the backend administrator through a rich text editor, it is usually considered trustworthy and suitable for use|safe.
    • User submitted content:For example, comments and reviews. Even if a rich text editor is provided, strict content filtering, sensitive word checking, and even limiting the whitelist of available HTML tags should be performed on the backend, or completely avoid using them when displayed on the frontend.|safeAnd only the plain text is displayed.
  3. Default behavior:The default behavior of Anqi CMS is to escape HTML tags, which is a good security practice in itself.We should follow this default behavior as much as possible, and only in the few scenarios where HTML needs to be displayed, should we decode it as described above.
  4. Explicitly specify the filter order:When used at the same time,renderandsafewhenrenderIt must be done first, converting Markdown to HTML, and then bysafeEnsure HTML is not escaped.

MasteredsafeFilter,renderFilter as well asautoescapeThe correct use of tags allows you to freely control the HTML rendering of content in the Anqi CMS, ensuring both rich content display and website security protection.Always remember, convenience and safety in balance, and make reasonable use of these tools to make your website operation more efficient and stable.

Common Questions (FAQ)

  1. Q: I entered bold text and images in the rich text editor on the AnQi CMS backend, but these formats were all displayed as plain text on the front end. Why is that?A: This is because the default template engine of AnQi CMS automatically escapes HTML tags to prevent potential cross-site scripting (XSS) attacks. The HTML tags generated by the editor (such as<strong>/<img>）was converted to `&lt;strong&gt;