How to safely display rich text content containing HTML tags on the front-end page?

In website operation, we often need to display rich text content containing images, links, bold text, and other rich formats, which is also known as rich text content.But it is a practical and cautious task to safely display these rich texts with HTML tags on the front-end page.AnQi CMS as an efficient content management system fully considers this point and provides us with a clear solution.

Understand rich text content in Anqi CMS

When we write articles, product descriptions, or single-page content in the Anqi CMS backend editor, the system provides an intuitive rich text editor.You can easily insert images, set text styles (such as bold, italic), create lists, and even embed videos or code blocks.These operations look normal in the background because the editor is responsible for converting your formatting intentions into standard HTML tags.

Moreover, Anqi CMS also supports Markdown editors, which means you can choose to write using a more concise Markdown syntax, and the system will automatically convert it to HTML when the content is published.No matter which editing method is used, the content stored in the database will ultimately be a string containing HTML tags.

The default security mechanism: HTML automatic escaping

When displaying content on the front end of a website, security is always the primary consideration.To prevent potential cross-site scripting (XSS) attacks, the Anqi CMS template engine (which uses a syntax similar to Django's Pongo2 template engine) performs a very important security operation by default when processing content read from the database: HTML automatic escaping.

In simple terms, this means that if you output rich text content as plain text on a page, such as:

<div>{{ archive.Content }}</div>

Then, like<script>alert('XSS')</script>Such HTML tags are not executed by the browser, but are escaped into<script>alert('XSS')</script>Display in plain text. This default behavior greatly reduces the risk of websites being attacked by malicious code, ensuring user browsing safety.

Use to safely display rich text: |safeFilter

However, for the rich text content we create, which we hope the browser can render correctly with styles and structure, this default automatic escaping is no longer what we want. For example, the main text of an article, the description of a product detail page, we hope it can display in bold, images, and other effects, rather than a heap of<p>/<img>The original label.

This is when we need to explicitly tell the AnQi CMS template engine: 'This content has been reviewed by me, I believe it is safe HTML, please do not escape it, and render it directly.' The method to achieve this is to use|safefilter.

For example, assuming the article content is stored inarchive.Contentfield, you need to call it like this in the template:

<div>
    {{- archive.Content|safe }}
</div>

Or if it is a single page content, it may use:

<div>
    {{- pageContent|safe }}
</div>

Here|safeThe filter will cancel the default HTML escaping, allowing the browser to recognize and render HTML tags within the content, thereby correctly displaying rich text effects.

Markdown content rendering control

If you have enabled the Markdown editor in the Anqi CMS backend and the content is written in Markdown, then when displayed on the front end, in addition to using|safeFilter outside,archiveDetail/pageDetailsuch as tags,ContentThe field also supports arenderParameter.

In the content settings, you can choose whether to automatically convert Markdown content to HTML. If you want to fine-tune the conversion behavior or ensure that the content renders correctly even if the automatic conversion is turned off, you can explicitly specify it when calling itrender=true:

<div>
    {%- archiveDetail articleContent with name="Content" render=true %}
    {{articleContent|safe}}
</div>

This, the system will first convert Markdown content to HTML, and then through|safeThe filter ensures it is rendered by the browser. If you do not want to perform Markdown conversion, you can setrender=false.

AnQi CMS even supports integrating third-party plugins such as MathJax and Mermaid to display mathematical formulas and flowcharts. These advanced features usually require adding specific JS/CSS references to your template file (such asbase.htmlThe header, and the same needs to be ensured when outputting relevant content|safeThe correct use of filters, as well as the correct display of Markdown contentrender.

Security practice recommendations

Use|safeThe filter is convenient, but always remember the security implications behind it.It is equivalent to you making a safety guarantee for this HTML content.Therefore, the following suggestions can help you better maintain website security when using rich text content:

1. Always use prudently|safe:Use it only when you are sure of the reliability of the content source and that it does not contain malicious scripts.
2. Strengthen backend content review:AnQi CMS provides sensitive word filtering, anti-crawling interference code and other security mechanisms.Combine manual review to ensure that the rich text content submitted by users or content contributors does not contain dangerous HTML or JavaScript code.Any content from an untrusted source should be strictly sanitized on the backend before storage and display.
3. Regularly update the system:Keep your secure CMS system and all plugins up to date to obtain the latest security patches and protective measures.

In summary, Anqi CMS provides strong security protection by default when handling the display of rich text content. When we want to show the richness of the content, we can do so by understanding and using it correctly|safeFilter, and combine as necessaryrenderWith parameters, we can provide visitors with beautiful and functional page content while ensuring the safety of the website.

Frequently Asked Questions (FAQ)

1. Why does the content of the article I published, which clearly has images and links, only display plain text on the front page, and the HTML tags are all exposed?

This is usually because you have not used rich text content in the template|safeFilter. The Anqi CMS template engine defaults to escaping all HTML tags to prevent XSS attacks.If you want images and links to display correctly, you need to set the corresponding rich text variables (for example,{{ archive.Content }}or{{ pageContent }}) Change to{{ archive.Content|safe }}or{{ pageContent|safe }}.

2. If I use|safefilter, is my website completely safe?

No.|safeThe filter simply tells the template engine that this content is safe and should be rendered directly.It does not perform security checks or cleaning on the content itself. Therefore, if the rich text content stored in the database itself contains malicious scripts, using|safeThe filter ends up being executed, leading to an XSS attack.Ensure true security starts from the source: Make sure that the content input on the backend is strictly verified and filtered to prevent malicious HTML or JavaScript code from being saved to the database.AnQi CMS provides some built-in security features, such as sensitive word filtering, but combining manual review and security awareness is crucial.

How to correctly display Markdown format content in Anqi CMS?

If you have enabled the Markdown editor in the background and written Markdown content, in addition to using|safeOutside the filter, you also need to make sure that the Markdown content is correctly converted to HTML. When usingarchiveDetail/pageDetailto getContentfield, you can try to addrender=trueparameters, for example{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}This will indicate that the system will convert Markdown to HTML before displaying.In most cases, if the background is set to automatically convert Markdown to HTML, this parameter may not be mandatory, but specifying it explicitly can provide stronger control.