How to prevent external JavaScript code from injecting through HTML when AnQiCMS template is rendered?

In website content management, security is always one of the core considerations.Especially in the template rendering phase, if not prevented, maliciously designed external JavaScript code may be injected through HTML, causing cross-site scripting attacks (XSS), which can lead to data theft, page content tampering, even session hijacking, posing huge risks to the website and users.Understand how AnQiCMS handles security issues in template rendering and master the corresponding preventive strategies, which is crucial for maintaining the healthy operation of the website.

The foundation of security for AnQiCMS template engine: automatic escape mechanism

AnQiCMS uses a syntax similar to the Django template engine, this design philosophy has laid the foundation for security from the very beginning.The most core security mechanism is 'auto-escape'. When we pass data through{{变量}}The form is output to the template when, AnQiCMS template engine will default to escaping these special HTML characters in the data.

For example, if a user entered in the content<script>alert('XSS');</script>This code, if output directly, will be recognized by the browser as JavaScript and executed. However, due to the automatic escaping mechanism of AnQiCMS, these angle brackets<and>Will be converted to HTML entity encoding, for example<script>alert('XSS');</script>This way, the browser will only display it as plain text, without executing the JavaScript code within it, effectively preventing most HTML injection and XSS attacks.This is the first and most basic security barrier provided by the AnQiCMS template from its initial design.

Deep understandingsafeFilter: Flexible and risky at the same time

Although automatic escaping is the default and safe behavior, in certain specific scenarios, we may need to output content that includes HTML structure, such as article details, rich text editor generated content, etc.This forced escaping will actually destroy the normal display of the content.To meet such needs, AnQiCMS providessafefilter.

When you know for sure that a variable's content is safe and needs to be rendered in HTML, you can use{{变量|safe}}Indicate to the template engine to skip automatic escaping. For example, if the content of an article edited with a rich text editor contains an image tag<img>or link tag<a>Add it when outputting in the template|safeTo ensure that these HTML structures can be correctly parsed and rendered by the browser

However,safeThe filter is a double-edged sword. Once usedsafeYou are essentially telling the template engine, 'I believe the content of this variable is safe, and there is no need to check, please output it directly.' This means that if the source data contains malicious JavaScript code (such as through untrusted user input or unverified third-party content), and you use|safeTherefore, these malicious codes may be successfully injected and executed, leading to XSS attacks. Therefore, when usingsafeWhen filtering, always be cautious and ensure that the source of the content is absolutely trustworthy.

exceptsafeFilter, AnQiCMS also providesescapeFilter (or its aliase) andautoescapeLabels to control escaping behavior more finely. Usually, since it is automatically escaped by default,escapefilters are rarely used explicitly. AndautoescapeThe tag allows you to turn on or off automatic escaping in specific areas of the template, providing more flexible control. For example,{% autoescape off %}...{% autoescape on %}can be used to wrap a code block that you do not want to be escaped.

Build a defense line for content input: source control

Relying solely on the template engine's escape mechanism is not enough; the content should be strictly reviewed when entering the AnQiCMS system, building the first line of defense.

1. Background content management configuration:AnQiCMS provides the function of 'whether to automatically filter external links' in the 'Content Settings'.Although this is mainly for SEO considerations, to reduce unnecessary external links, but it can also indirectly reduce the risk of malicious scripts being introduced through external links.When processing content, you can also make use of the built-in "sensitive word filtering" feature to prevent some known high-risk keywords or phrases from entering the content, although this cannot completely prevent all complex JavaScript injections.
2. Rich text editor and Markdown:AnQiCMS supports rich text editors and Markdown editors.These editors usually come with some security filtering features, which help to sanitize user input when converting it to HTML.Please note that these filters are not foolproof. If you have enabled the Markdown editor and have gone throughrenderThe filter renders it to HTML, and we also need to be vigilant about the source of Markdown content.
3. Editorial staff safety awareness:The most important aspect is the safety awareness of content editors. Train editors to emphasize not to directly copy and paste content from unreliable sources, especially including<script>Label or suspicious event attribute (such asonerror/onloadetc.) of the HTML snippet. Try to use the built-in features of the editor for formatting and content organization, rather than manually writing HTML.

Introducing external resources and template code review

External JavaScript files introduced by the template itself also need to be strictly managed in addition to the user's input content.

1. Static resource management:AnQiCMS's static resources (such as JS scripts, CSS styles) are usually stored in/public/static/Catalog. It is recommended to place all custom or third-party JS files in this controlled directory and ensure that these files are reviewed and secure.
2. Introduction of external JS libraries:If you need to include an external JavaScript library in the template (such as jQuery, Vue.js, etc.), please make sure to load it from the officially recommended CDN or a reliable source.Avoid loading scripts dynamically from unknown websites or through user-controllable fields.
3. Count code and plugin script:AnQiCMS provides the "count code tag" (pluginJsCodeThe function allows you to configure and insert third-party statistical scripts in the background.Although this provides convenience, it also means that you must trust the security of these third-party scripts.When pasting any statistical code or third-party script, please carefully check its content to ensure it does not contain any suspicious malicious code.

Summary and **practice**

It is a continuous task to prevent external JavaScript code from being injected through HTML. By combining the built-in security mechanisms of AnQiCMS and using it cautiouslysafeFilter, strengthen content input review and strictly manage external resources, you can greatly improve the security of the website:

• Default to trusting automatic escaping:Do not use unless absolutely necessary|safefilter.
• Use with caution.safe:Use only when you completely trust the content source and need HTML structure|safeand review it regularly|safecode.
• Strengthen content input:Utilize the background content filtering feature and enhance the safety awareness of editors to avoid pasting suspicious code.
• Review all external JS:Whether it is a JavaScript file written by yourself or provided by a third party, it should ensure that the source is reliable and does not contain malicious code.
• Keep Updating:Update AnQiCMS to the latest version to get the latest security patches and feature enhancements.

By following these strategies, you can build a stronger security line for the AnQiCMS website, protecting your website and users from the threat of malicious HTML injection.

Frequently Asked Questions (FAQ)

Q1: Why do I write directly in the AnQiCMS template<script>alert('hello');</script>and it does not execute?

A1: The AnQiCMS template engine defaults to processing all through{{变量}}The content is being HTML entity escaped. This means that, like</>these special HTML characters will be converted to</>Entity encoding is used to prevent the browser from recognizing it as executable script. This is a default security mechanism designed to prevent HTML injection and cross-site scripting (XSS) attacks.

Q2: Why does the HTML code I entered in the backend article editor, such as adding an image tag, only display text on the front end and not render the image?

A2: This is likely because you did not use|safeFilter. AnQiCMS defaults to escaping all HTML tags for security.If you are sure that the article content is safe and needs to be rendered in HTML format, for example, content generated by a rich text editor, then you need to output it like this in the template:{{ archive.Content|safe }}. Please ensure that the content source is reliable to avoid introducing unsafe HTML code.

Q3: How do I load an external JavaScript statistics script in the template to ensure safety?

A3: Take precautions when introducing external JavaScript.First, make sure the script source is official and reliable, and avoid using unknown links.Secondly, you can paste the statistical script content into the 'Function Management' -> 'Link Push' page of the AnQiCMS backend in the '360/Toutiao and other JS automatic submission' area.AnQiCMS will pass throughpluginJsCodeTags({{- pluginJsCode|safe }}Introduce these scripts securely at the bottom of the page. Avoid embedding directly in article content or template files from untrusted sources<script>tags, especially when used|safein such places.