How to embed custom HTML code in Markdown content of AnQi CMS without it being escaped?

As a website operator familiar with the Aanqi CMS, I know the importance of flexibility and control in the content creation process for presenting high-quality content.It is essential to master the correct approach when integrating custom HTML code seamlessly into Markdown content.AnQiCMS as an enterprise-level content management system has achieved a good balance between content rendering and security.Next, I will introduce how to embed custom HTML code in AnQiCMS Markdown content without being escaped.

In AnQiCMS, content creation is usually done through the Markdown editor.Markdown's concise syntax makes writing articles efficient, but sometimes in order to achieve specific layouts, interactive effects, or embed third-party services, we may need to directly insert HTML code into Markdown content.However, for security reasons, AnQiCMS will escape the HTML content output by the page by default.<p>这是一个自定义段落</p>It may be displayed on the page as a literal meaning,<p>这是一个自定义段落</p> rather than an actual paragraph element.

To solve this problem, the core lies in understanding the template rendering mechanism and security strategy of AnQiCMS.AnQiCMS's template engine is similar to Django templates, it automatically escapes HTML tags when outputting variables to prevent cross-site scripting attacks (XSS).This mechanism enhances the security of the website but also limits the customization of content display.safeFilter.safeThe filter explicitly informs the template engine that the content it processes is reviewed and safe HTML, no additional escaping operations are required.

You can directly insert custom HTML code in the AnQiCMS Markdown editor. This means that, whether it is a simple<div>Labels, inline styles, or more complex HTML structures can be directly written into your Markdown content.The system will store these HTML codes along with Markdown text.When the page is requested and rendered, this embedded HTML will become part of the Markdown content, waiting to be processed by the template engine.

The key steps to implement custom HTML that is not escaped, focused in your template file:

You need to make sure that you have enabled the Markdown editor by going further into the "Content Settings" option under the "Global Settings" in the AnQiCMS admin panel.This is the basis on which you can write content in Markdown format.

Next, when you are editing content, whether it is writing documents, configuring category descriptions, or creating single-page content, you can directly embed the required custom HTML code in the Markdown editor. For example, if you want to add a custom information box with a specific background color and button to the article, you can write it like this:

这是一个常规的Markdown段落。

<div style="background-color: #e0f7fa; padding: 15px; border-radius: 8px; border: 1px solid #b2ebf2;">
  <h3 style="color: #00796b;">自定义信息提示</h3>
  <p>您可以在这里放置任何HTML内容，例如<b>加粗文本</b>或链接：<a href="https://en.anqicms.com" target="_blank">访问AnQiCMS</a>。</p>
  <button style="background-color: #00bcd4; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer;" onclick="alert('自定义按钮被点击！')">点击此处</button>
</div>

这是另一个Markdown段落，紧随自定义HTML之后。

Finally, in your template file (such as the one used to display article details,archive/detail.htmlor a single-page detail page,page/detail.htmletc.), when you call the stored Markdown content (usually,ContentWhen dealing with the variable of the field, please make sure to use|safeFilter. This is the key to ensure that the embedded HTML code can be correctly parsed and rendered by the browser. Here is an example of calling document content in a template:

<article class="content-area">
    <h1>{{ archiveDetail with name="Title" }}</h1>
    <div class="post-meta">
        <span>发布日期: {{ archiveDetail with name="CreatedTime" format="2006-01-02" }}</span>
        <span>浏览量: {{ archiveDetail with name="Views" }}</span>
    </div>
    <div class="article-body markdown-rendered">
        {# 关键步骤：使用 |safe 过滤器防止HTML转义 #}
        {% archiveDetail articleContent with name="Content" %}
        {{ articleContent|safe }}
    </div>
</article>

In the above example,{{ articleContent|safe }}Ensured that all HTML code embedded in the Markdown editor, including its style and JavaScript events, will be rendered on the web page as expected, rather than being escaped as plain text. For categorized content (}]}categoryContent) Or single-page content (pageContent) Also, the same processing method should be used.

Please pay special attention to,safeThe filter gives you the power to render any HTML on the page, but it also brings potential security risks. When you usesafeThe filter is telling the system explicitly that the content in the variable is trusted safe HTML and does not require escaping. If malicious HTML or JavaScript code introduced through user input or other untrusted sources is not filtered out,safeFilter processing may lead to cross-site scripting (XSS) attacks, thereby harming the security of the website and user data. Therefore, caution should be exercised in any scenario where user-generated content is submitted or external data is imported.safeFilter and ensure the content source is reliable or has undergone strict security review.

Frequently Asked Questions

问：Why does the HTML I write directly in Markdown not render as expected but instead shows up as code on the page? Answer: This is AnQiCMS to enhance website security, the default is to escape the HTML tags in the output content.|safeFilter and explicitly inform the template engine that this content is safe HTML.

Question: Using|safeWhat are the safety risks of the filter? Answer: Yes,|safeThe filter indicates the template engine to bypass HTML escaping and render the content directly.This means that if the rendered content contains malicious or unreviewed HTML/JavaScript code, this code will be executed in the user's browser, which may lead to cross-site scripting (XSS) attacks, and consequently, steal user information or disrupt page functionality.|safeWhen [condition], make sure you fully trust the source of the content.

Question: Besides|safeAnQiCMS also has other methods to prevent HTML from being escaped?|safeThe filter is the standard and recommended way to process the content of a single variable without escaping. Although template engines usually also support global{% autoescape off %}and{% autoescape on %}Tags can be used to control the escaping behavior of specific areas, but in the content rendering scenario, specific content variables should be used|safeIt is usually more accurate and secure to control, because it only acts on the data you specify.