JavaScript 中的安全编码：10 个关键实践

引言

JavaScript 作为现代 Web 开发的核心语言，几乎无处不在------从简单的前端交互到复杂的 Node.js 后端应用。然而，正是这种广泛的应用使 JavaScript 成为攻击者的主要目标。本文旨在为开发者提供 10 个关键的安全编码实践，帮助构建更安全的 JavaScript 应用程序。我们将从最常见的跨站脚本攻击(XSS)开始，逐步深入到框架选择、编码规范、工具使用等多个层面，为您呈现一份全面的 JavaScript 安全编码指南。

正文内容

1. 防范跨站脚本攻击(XSS)

跨站脚本攻击(XSS)是 JavaScript 安全中最常见也最危险的问题之一。XSS 攻击的特殊之处在于它直接针对用户浏览器，攻击者可以利用它窃取会话信息、操纵页面内容甚至安装恶意软件。

要全面防范 XSS，应采取以下措施：

javascript 复制代码

// 不安全的做法：直接插入未处理的用户输入
document.getElementById('output').innerHTML = userInput;

// 安全的做法：使用textContent而不是innerHTML
document.getElementById('output').textContent = userInput;

输入验证：对所有用户提供的数据进行严格验证，只接受预期的字符集。
输出编码：在将数据呈现到页面时进行适当的编码，确保特殊字符被转义。
内容安全策略(CSP)：通过 CSP 头部限制可执行的脚本来源。
安全Cookie设置：为Cookie添加HttpOnly和Secure标志，防止通过JavaScript访问敏感Cookie。

2. 选择安全的JavaScript框架

现代前端框架如React、Angular和Vue.js都内置了自动输出编码的安全机制。这些框架通过虚拟DOM和其他安全机制，大大降低了XSS的风险。

然而，框架也提供了一些"逃生舱口"功能，如React的dangerouslySetInnerHTML和Angular的bypassSecurityTrustAs*系列方法。这些方法应尽量避免使用，除非确实必要且已采取其他安全措施。

3. 避免内联脚本

内联脚本(直接在HTML中编写的JavaScript)不仅难以维护，还会增加XSS的风险。最佳实践是将所有JavaScript代码放在独立的外部文件中，并通过CSP头部明确允许这些文件。

html 复制代码

<!-- 不安全的做法：内联脚本 -->
<button onclick="doSomething()">点击我</button>

<!-- 安全的做法：外部脚本 -->
<script src="script.js"></script>

4. 启用严格模式

JavaScript的严格模式('use strict')通过限制某些危险语法和行为，帮助编写更安全的代码。严格模式的主要优势包括：

禁止意外创建全局变量
使eval和arguments更安全
禁止使用未来可能成为关键字的标识符
使this在全局函数中为undefined而非window对象

javascript 复制代码

// 启用严格模式
'use strict';

// 在严格模式下，以下代码会抛出错误
undefinedVar = 10; // ReferenceError

5. 利用开源安全工具

开源社区提供了大量工具来帮助检测和预防JavaScript安全问题。以下是一些值得推荐的工具：

DOMPurify：用于净化HTML输入，防止XSS。
Retire.js：检查项目中使用的JavaScript库是否有已知漏洞。
npm audit/yarn audit：检查依赖项的安全问题。
Semgrep：静态代码分析工具，可检测多种安全问题。
ZAP：动态应用安全测试工具，但使用前需获得授权。

6. 明确区分文本和代码

在JavaScript中操作DOM时，必须明确区分应作为文本处理的内容和应作为代码执行的内容。使用innerText或textContent而非innerHTML来插入纯文本内容。

javascript 复制代码

// 不安全的做法
element.innerHTML = userProvidedData;

// 安全的做法
element.textContent = userProvidedData;

7. 安全使用属性设置

当使用setAttribute设置元素属性时，只应使用安全的静态属性。避免将用户提供的数据用于动态属性如onclick或onmouseover。

安全属性示例包括：class, id, title, alt, value等。而on*系列事件处理属性则属于不安全属性。

8. 后端输入验证

前端输入验证虽能提升用户体验，但绝不能替代后端验证。攻击者可以轻松绕过前端验证，直接向后端发送恶意数据。

javascript 复制代码

// 前端验证（仅用于用户体验）
function validateInput(input) {
    return /^[a-zA-Z0-9]+$/.test(input);
}

// 后端也必须进行相同的验证
// (示例为伪代码，实际实现取决于后端语言)
app.post('/api/submit', (req, res) => {
    if (!/^[a-zA-Z0-9]+$/.test(req.body.input)) {
        return res.status(400).send('Invalid input');
    }
    // 处理合法输入...
});

9. 避免危险函数

JavaScript中有一些函数因其特性而特别危险，尤其是在处理用户输入时。这些函数包括：

eval()：执行字符串作为代码
Function()构造函数：类似eval
setTimeout()/setInterval()：使用字符串而非函数
document.write()：可能覆盖整个文档
innerHTML/outerHTML：可能导致XSS

javascript 复制代码

// 极其危险的做法
eval(userInput);

// 同样危险的变体
new Function(userInput)();

// 相对安全的做法
setTimeout(() => {
    console.log('安全代码');
}, 1000);

10. 全面应用安全开发实践

JavaScript应用的安全不应局限于语言特性本身，还应包括全面的安全开发实践。这包括：

安全的系统开发生命周期(S-SDLC)：将安全考虑融入整个开发过程。
参数化查询：防止SQL注入
加密：数据传输和存储加密
身份验证和授权：可靠的用户管理系统
依赖管理：定期更新第三方库

结论

JavaScript的安全编码是一个需要持续关注和学习的领域。从防范XSS攻击到选择合适的框架，从启用严格模式到利用安全工具，再到避免危险函数，每个环节都至关重要。安全不是一蹴而就的，而是需要在日常开发中不断实践和强化的习惯。

作为开发者，我们可以从今天开始，选择一两个最佳实践应用到当前项目中。随着经验的积累，逐步引入更多的安全措施，最终构建出既功能强大又安全可靠的JavaScript应用。记住，安全不是可选项，而是每个负责任开发者的基本职责。

通过知识共享和持续改进，我们可以让JavaScript生态不仅更加强大和高效，同时也更加安全。