When using AnQi CMS to manage website content, you may encounter a seemingly minor but annoying problem: Even though formatted HTML code is entered during backend editing, these HTML tags are displayed as plain text on the front-end page, even presented directly with angle brackets, losing the original style and layout.This not only affects the aesthetics of the page, but also reduces the carefully arranged content.Why is that, and how should we solve it?

Understanding the reason why HTML tags are escaped

The Anqi CMS adopts a template engine similar to Django, 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 a crucial security mechanism - automatic escaping.

This mechanism will convert HTML special characters, such as the angle brackets (<and>), the ampersand (&") representing HTML entities or special characters, and the quotation marks (&)"and'）et al., convert to the corresponding HTML entity encoding (such as&lt;/&gt;/&amp;This is the core purpose to effectively prevent cross-site scripting (XSS) attacks. 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 the user's safety.

Although this feature is crucial for security, in certain specific scenarios, we indeed need to allow 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 and trustworthy HTML code and want it to be normally parsed by the browser, AnQi CMS providessafeThe filter. This filter is the most commonly used and the 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.|safe，The template engine will recognize that this content should be rendered as raw HTML without escaping. For example, if your article content is stored inarchive.ContentVariables, and the 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 content such as categories or single-pagecategory.Contentorpage.Content), if it contains HTML that needs to be rendered, the same handling method can also be used.safeThe filter tells the template engine: "I know this content is safe, please output it directly without escaping."

Solution two: usingautoescapeTag (for content blocks)

In addition to using for individual variables:safeOutside the filter, Anqi CMS also provides a more macro control method, namelyautoescapetag. This tag can be used to turn on or off the automatic escaping function 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 %}

On the contrary, if you want to force enable escaping in a specific area (even though AnQi CMS is enabled by default), or if you want to enable it locally after disabling it globally, you can use{% autoescape on %}However, scenarios where automatic escaping is disabled are usually very rare and carry high risks, and it is recommended not to use it lightly unless absolutely necessary.The default automatic escaping mechanism of the website is an important line of defense for safety.

Solution three: Handling Markdown content (renderwithsafeCombination)

The Anqi CMS supports Markdown editors, which provides a convenient writing experience for content creators.Markdown content is usually saved in plain text format, but when displayed on the front end, we need to parse it into HTML to display the format correctly.

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配合safeA filter is used to ensure that the HTML tags generated by Markdown are not doubly escaped, thus displaying correctly on the page.

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

{{ item.Content|render|safe }}

Hereitem.ContentIt is Markdown text,|renderand parse 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 offThe tags will disable security protection. Therefore, they can only be applied to youCompletely trustHTML code must be strictly reviewed. Do not use these functions for content submitted by users directly, which has not been cleaned or verified, otherwise it is easy to suffer from XSS attacks.
  2. Content Source Judgment:
    • Backend Administrator Rich Text Content:For the main text of the article, product details, single-page content, category details, etc., which are input by the backend administrator through a rich text editor, they are usually considered trustworthy and suitable for use|safe.
    • User submitted content:For comments and messages, 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 displaying on the frontend.|safeAnd only display plain text.
  3. Default behavior:The default behavior of AnQi CMS is to escape HTML tags, which is itself a good security practice.We should follow this default behavior as much as possible, and only in a few scenarios where it is truly necessary to display HTML, should we unescape using the aforementioned method.
  4. Specify the filter order:When used simultaneouslyrenderandsafethen,renderMust be at the front, first convert Markdown to HTML, then bysafeEnsure that HTML is not escaped.

MasteredsafeFilter,renderas well as filtersautoescapeThe correct use of tags allows you to freely control the HTML rendering of content in Anqi CMS, ensuring both rich content display and website security protection.Always remember that convenience and security go hand in hand. Reasonably utilizing these tools can make your website operation more efficient and stable.

Frequently Asked Questions (FAQ)

  1. Q: Why did the bold text and images I entered in the rich text editor on the Anqi CMS backend all become plain text when displayed on the front end?A: This is because the Anqie CMS template engine defaults to automatically escaping HTML tags to prevent potential cross-site scripting (XSS) attacks. The editor generates HTML tags such as<strong>/<img>) was converted to `&lt;strong&gt;