In the daily operation of Anqi CMS, we often use the Markdown editor to enrich content display, which allows us to conveniently format articles, insert code examples, and even mathematical formulas and flowcharts.However, this convenience also comes with potential security risks, especially when dealing with Markdown content submitted by users and dynamically embedding it into JavaScript code snippets on web pages.escapejsThe filter becomes especially important, as it acts like an invisible barrier, silently protecting the security of our website.

Why do we needescapejsFilter?

Imagine, we allow users to insert JavaScript code into Markdown content, for example, a simplealert('hello').When AnQiCMS renders this Markdown to HTML and displays it on the page, if the rendered HTML string is directly assigned to a JavaScript variable or passed as a parameter to a JavaScript function without proper handling, then this code may be executed in the user's browser.<script>alert('XSS攻击！')</script>Such code may be executed, leading to severe cross-site scripting (XSS) attacks such as session hijacking and data theft.

The default setting of Anqi CMS will automatically escape the output HTML content to prevent most XSS attacks. However, when the content is embedded intoJavaScript contextEnglish translation: (For example, if you are rendering Markdown to HTML and using the resulting HTML string as a JavaScript variable's value), simple HTML escaping is not enough.JavaScript has its own set of special character rules, such as single quotes, double quotes, backslashes, etc., which need to be correctly escaped in JS strings.escapejsthe filter comes into play.

escapejsThe working principle and practical application

escapejsThe core function of the filter is to convert special characters in a string (including quotes, backslashes, and some control characters that need to be escaped in JavaScript) into Unicode escape sequences, for example,\u0022Representing double quotes,\u003Crepresents the less than symbol.This way, the segment that might be parsed as executable JavaScript code by the browser would be treated as ordinary string data when embedded in a JavaScript string, rather than a command, effectively preventing the execution of malicious scripts.

Consider a scenario, our Markdown content contains the following HTML snippet (which could be the result of Markdown rendering):

<p>这是一段内容</p><script>alert('XSS攻击！');</script><p>更多内容</p>

If we want to dynamically display this content using JavaScript to somedivfor example:

var content = "{{ article.Content }}"; // 假设article.Content是未经处理的Markdown渲染结果
document.getElementById('myDiv').innerHTML = content;

Here are the{{ article.Content }}If we output it directly,alert('XSS攻击！')it will execute.

For security reasons, we need to process in the template.article.ContentApplyescapejsFilter:

var content = "{{ article.Content|escapejs|safe }}";
document.getElementById('myDiv').innerHTML = content;

Here,escapejsThe filter will first convert.article.Contentof</>/'/"And other special HTML characters as well as JavaScript special characters into the like.\u003C/\u003E/\u0027/\u0022Such Unicode escape sequences. For example, the original<script>tags will be converted to\u003Cscript\u003E.

You may notice that we usually useescapejsimmediately after|safeFilter. This is because the template engine of Anqi CMS defaults to escaping all output as HTML. If not|safe,escapejsGenerated\u003Cscript\u003EThis Unicode escape sequence itself may be further HTML-escaped into&amp;#x003Cscript&amp;#x003EThis will cause the JavaScript string content to be corrupted and cannot be parsed correctly.|safeis used to inform the template engine,escapejs已经处理过了，其输出是安全的，不需要再进行额外的HTML转义，直接按字面量输出即可，确保JavaScript代码能够正确地将其识别为字符串内容。

escapejsWith content security practices

In the Anqi CMS,escapejsThe filter is an important part of building secure web applications. It is not only for Markdown content, but also for any data coming from user input and may be embedded in the JavaScript context.escapejsTo be processed.This, together with other security features provided by AnQiCMS, such as anti-crawling interference code, content security management, and sensitive word filtering, constitutes a multi-layered website security protection system.

As website operators, we should not only focus on the aesthetics and functionality of the content, but also always be vigilant of potential security risks.Understand the data flow, clearly identify where the content is placed in HTML (whether it is within pure HTML elements, HTML attribute values, or JavaScript strings), and then choose the correct escaping strategy, which is crucial for ensuring the health of the website content and a smooth user experience.

Common Questions (FAQ)

1.escapejsfilters andescapeWhat are the differences between filters? escapeThe filter is used in the HTML context, it converts special HTML characters (such as</>/&/"/'） converts to HTML entities to prevent them from being parsed as HTML tags or attributes.escapejsThe filter is specifically used in the JavaScript context, it converts special characters in the string (including HTML characters and escape characters required by JavaScript itself) into Unicode escape sequences, ensuring that this string can be safely parsed as part of JavaScript code (such as the value of a string variable), preventing XSS attacks.

2. When should I use it?escapejs|safeInstead of being separate,safeorescape?When you need to take user input or Markdown-rendered content asthe value of a JavaScript string variableorJavaScript function parameterEmbedded into HTML page<script>Inside a tag, it should useescapejs|safe.

  • Use alonesafeVery dangerous as it outputs content unchanged, which may lead to XSS if the content contains malicious JavaScript.
  • Use aloneescapeThe content will be escaped as HTML, but the output may not be suitable for direct embedding into JavaScript strings, which may cause JavaScript syntax errors or functional anomalies.
  • escapejs|safeThe combination ensures that the content is first safely escaped by JavaScript,safePrevented the template engine from performing a second HTML encoding, ensuring that the final output JavaScript string is both safe and effective.

3. If I haven't used the Markdown editor,escapejsis the filter still useful?Of course, it is useful.escapejsThe value of the filter is not limited to Markdown. Any string obtained from outside (such as user comments, API interfaces, rich text content stored in databases, etc.), which may contain special characters or potential JavaScript code, as long as you plan to embed it in an HTML page.JavaScript context(For example, dynamically constructed JS strings, oronclickvalues of such event properties), should all be considered for useescapejsThe filter is processed. This is a basic practice of web security, no matter how the content comes from, as long as it involves the JS context, one should be vigilant.