How to safely embed template variables into JavaScript code using the `escapejs` filter?

In the daily use of AnQi CMS, we often need to display content from the backend management, such as article titles, user comments, or other dynamic data, on the front-end page.This content is not just plain text, it also needs to be used in JavaScript code, such as variable values, function parameters, or dynamically generated HTML fragments.However, embedding template variables directly into JavaScript code without proper handling may introduce a significant security vulnerability - cross-site scripting (XSS).

As an enterprise-level content management system that emphasizes security and efficiency, Anqi CMS is built with a powerful template engine and provides a series of filters to help us safely handle data. Among them,escapejsFilter is specifically designed to solve XSS problems in JavaScript.

Why do you need to embed JavaScript code safely?

Imagine if your website had a comment section where users could submit comments. If a malicious user submitted a comment containing JavaScript code, like<script>alert('您的Cookie被盗！')</script>And you directly embed this comment content into a JavaScript variable:

<script>
    var comment = "{{ user_comment }}"; // 假设 user_comment 是恶意评论
    // ... 后续代码使用 comment 变量
</script>

When the page is loaded, this malicious JavaScript code will be executed by the browser, leading to an XSS attack.An attacker may steal the user's session information (Cookie), modify page content, or even redirect the user to a phishing website.

AnQi CMS understands the importance of data security, and therefore provides in template design:escapejsSuch tools help us avoid such problems.

escapejsThe working principle of the filter

escapejsThe filter acts like a 'purifier', which can convert special characters in strings, such as single quotes, double quotes, backslashes, newline characters, etc., into JavaScript-safe\uxxxxEncoding form.Through this transformation, characters that might originally be interpreted as part of a JavaScript code structure become ordinary string content, thereby losing the ability to execute malicious code.

To be specific,escapejsIt will convert any character other than letters (a-zA-Z), numbers, spaces, and slashes (/) to\uxxxxThe Unicode escape sequence.This way, whatever is contained in the original string, it will ultimately become a pure string literal that will not be misinterpreted as JavaScript code by the browser.

How to use in Anqi CMS templateescapejs?

In the Django-like template engine of AnQi CMS, useescapejsThe filter is very intuitive. You just need to embed the template variables you need in JavaScript through the pipe symbol|Withescapejsto connect them.

For example, suppose you have a variable for the article titlearchive.TitleYou want to assign it to a JavaScript variable:

<script>
    // 未使用 escapejs，存在安全隐患
    // var articleTitleUnsafe = "{{ archive.Title }}"; 

    // 使用 escapejs 确保安全
    var articleTitle = "{{ archive.Title|escapejs }}";
    console.log(articleTitle); // 这将安全地打印文章标题
</script>

Ifarchive.TitleThe value ofIt's an "interesting" articlethen unusedescapejsWhen not used, the JavaScript code might become:

var articleTitleUnsafe = "It's an "interesting" article"; // 语法错误，甚至可能注入代码

while usingescapejsAfter, it will safely convert to: English

var articleTitle = "It\u0027s an \u0022interesting\u0022 article"; // 安全，且是有效的JavaScript字符串

This processed string, no matter how complex its original content is or how many special characters it contains, can be correctly parsed as a regular string in JavaScript. It will not disrupt the syntax structure of JavaScript and will not execute any potential malicious code within it.

You can also useescapejsFor more complex scenarios, such as passing dynamic content as a parameter to a JavaScript function:

<script>
    function displayContent(title, content) {
        alert("标题：" + title);
        // 这里 content 变量可能包含HTML，后续在DOM中插入时仍需注意上下文
        document.getElementById('article-area').innerHTML = content; 
    }

    // 假设 archive 是当前文档对象
    var safeTitle = "{{ archive.Title|escapejs }}";
    var safeContent = "{{ archive.Content|escapejs }}"; // 注意：这里仅是使其成为安全的JS字符串，而非安全的HTML
    
    displayContent(safeTitle, safeContent);
</script>

<div id="article-area"></div>

In this example,archive.ContentIt may contain HTML tags.escapejswill ensuresafeContentis a safe string literal in JavaScript code. However, when JavaScript assigns it toinnerHTMLWhen, the browser will interpret it as HTML.archive.ContentItself contains malicious HTML or JS, it may still trigger XSS at this time.So,escapejsResolved the issue of embedding template variables in JS, but if the content of JS variables will eventually be included in the HTML**DOM, then the JS code itself also needs to ensure that the content is safe, or only insert into text nodes.

Summary

In the AnQi CMS, utilizingescapejsThe filter is a critical step to safely embed dynamic data into JavaScript code. It converts potentially dangerous characters into safe\uxxxxEncoding effectively prevents cross-site scripting (XSS) attacks, thereby ensuring the security of your website's users and the integrity of the data. Always remember that when placing template variables into<script>When a JavaScript string literal is inside a tag, it should use `