What is the purpose of the `escapejs` filter in handling JavaScript code snippets in Markdown content?

In the daily operation of AnQi CMS, we often use the Markdown editor to enrich the content display, which allows us to conveniently format articles, insert code examples, and even mathematical formulas and flowcharts.However, this convenience is also accompanied by potential security risks, especially when dealing with Markdown content submitted by users and dynamically embedding it into web page JavaScript code fragments.At this moment, understand and use correctlyescapejsThe filter is particularly important, as it acts like an invisible barrier, silently guarding the security of our website.

Why do we needescapejsFilter?

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

The AnQi CMS defaults to automatically escaping the output HTML content to prevent most XSS attacks. However, when the content is embedded intoJavaScript contextAt the moment (for example, when you are using a rendered Markdown HTML string as a JavaScript variable value), simple HTML escaping is not enough.JavaScript has its own set of special character rules, such as single quotes, double quotes, backslashes, and so on. In JavaScript strings, they need to be correctly escaped. At this point,escapejsThe filter comes into play.

escapejsworking 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, etc.) into Unicode escape sequences, such as\u0022Represent double quotes,\u003CRepresents the less than symbol. In this way, what might have been parsed by the browser as an executable JavaScript code snippet, when embedded in a JavaScript string, would be treated as plain string data rather than a command, effectively preventing the execution of malicious scripts.

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

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

If we want to dynamically display this content using JavaScript to somedivsuch as:

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

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

For safety reasons, we need to encodearticle.ContentapplyescapejsFilter:

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

Here, escapejsThe filter will first encodearticle.Contentof</>/'/"Special HTML characters and special characters in JavaScript, and convert them to such as\u003C/\u003E/\u0027/\u0022Such Unicode escape sequences. For example, the original<script>The label will be converted to\u003Cscript\u003E.

You may notice that we usually useescapejsimmediately after using|safeFilter. This is because the template engine of AnQi CMS defaults to escape all output in HTML. If not|safe,escapejsGenerated\u003Cscript\u003ESuch Unicode escape sequences themselves may be further HTML-escaped into&#x003Cscript&#x003EThis will cause the JavaScript string content to be destroyed and cannot be parsed correctly.|safeThe purpose is to tell the template engine,escapejsThe output has been processed, it is safe, no additional HTML escaping is required, output directly as a literal, ensure that JavaScript can correctly identify it as string content.

escapejsWith content security practices

In AnQi CMS,escapejsThe filter is an important part of building secure web applications. It is not just for Markdown content, but any data originating from user input and that may be embedded in the JavaScript context should be considered for use.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, etc., constitutes a multi-level website security protection system.

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

Frequently Asked Questions (FAQ)

1.escapejsFilters andescapeWhat are the differences between filters? escapeThe filter is mainly used in the HTML context, it will convert special HTML characters (such as</>/&/"/'The ampersand is converted to HTML entity to prevent it from being parsed as HTML tag or attribute.escapejsThe filter is specifically used in the JavaScript context, it converts special characters in strings (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 (for example, as the value of a string variable), preventing XSS attacks.

2. When should I useescapejs|safe, instead of separatelysafeorescape?When you need to use content that includes user input or Markdown-rendered content asThe value of a JavaScript string variableorJavaScript function argumentEmbedded in an HTML page<script>When inside a tag, it should be usedescapejs|safe.

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

3. If I had not used the Markdown editor,escapejsis the filter still useful?Of course it is.escapejsThe value of the filter is not limited to Markdown. Any string obtained from external sources (such as user comments, API interfaces, rich text content stored in databases, etc.) that may contain special characters or potential JavaScript code, as long as you plan to embed it in an HTML page.JavaScript context(For example, dynamic JS strings oronclickevent attribute values should be considered to useescapejsThe filter is being processed. This is a fundamental practice in web security, no matter the source of the content, one should be vigilant whenever it involves the JS context.