JavaScript 中如何防止 XSS (Cross-Site Scripting) 攻击？

推荐答案

为了防止 XSS 攻击，可以采取以下措施：

1. 输入验证和过滤：对用户输入的数据进行严格的验证和过滤，确保只允许合法的字符和格式。
2. 输出编码：在将用户输入的数据输出到页面时，使用适当的编码方式（如 HTML 实体编码）来防止恶意脚本的执行。
3. 使用安全的 API：避免使用 innerHTML 或 document.write 等不安全的 API，而是使用 textContent 或 innerText 等安全的 API。
4. Content Security Policy (CSP)：通过设置 CSP 头来限制页面中可以加载和执行的资源，从而减少 XSS 攻击的风险。
5. 使用框架和库：使用现代前端框架（如 React、Vue.js 等）或库（如 DOMPurify）来自动处理 XSS 防护。

本题详细解读

1. 输入验证和过滤

输入验证是防止 XSS 攻击的第一道防线。通过验证用户输入的数据，确保其符合预期的格式和类型。例如，如果期望用户输入的是电子邮件地址，那么可以使用正则表达式来验证输入是否符合电子邮件格式。

function validateEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
}

2. 输出编码

在将用户输入的数据输出到页面时，必须对其进行编码，以防止恶意脚本的执行。常见的编码方式包括 HTML 实体编码、JavaScript 编码等。

function encodeHTML(str) {
    return str.replace(/&/g, '&')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;')
              .replace(/"/g, '&quot;')
              .replace(/'/g, '&#39;');
}

3. 使用安全的 API

避免使用 innerHTML 或 document.write 等不安全的 API，因为这些 API 会直接解析 HTML 字符串，可能导致 XSS 攻击。相反，使用 textContent 或 innerText 等安全的 API。

const userInput = "<script>alert('XSS')</script>";
document.getElementById('output').textContent = userInput;

4. Content Security Policy (CSP)

CSP 是一种浏览器安全机制，通过设置 HTTP 头来限制页面中可以加载和执行的资源。通过配置 CSP，可以有效减少 XSS 攻击的风险。

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;

5. 使用框架和库

现代前端框架（如 React、Vue.js 等）和库（如 DOMPurify）通常内置了 XSS 防护机制。使用这些工具可以大大减少手动处理 XSS 防护的工作量。

import DOMPurify from 'dompurify';

const userInput = "<script>alert('XSS')</script>";
const cleanInput = DOMPurify.sanitize(userInput);
document.getElementById('output').innerHTML = cleanInput;

通过以上措施，可以有效防止 XSS 攻击，保护 Web 应用的安全性。