Next.js 如何防止 XSS 攻击？

推荐答案

在 Next.js 中，防止 XSS（跨站脚本攻击）的主要方法包括：

1. 自动转义：Next.js 默认会对渲染到页面的数据进行转义，防止恶意脚本注入。
2. 使用 dangerouslySetInnerHTML 时谨慎：如果需要插入 HTML 内容，确保内容是可信的，并且在使用 dangerouslySetInnerHTML 时进行严格的验证和清理。
3. 使用 Content Security Policy (CSP)：通过配置 CSP 头，限制页面中可以加载的资源，防止恶意脚本的执行。
4. 使用安全的库：在处理用户输入时，使用经过验证的安全库（如 DOMPurify）来清理 HTML 内容。

本题详细解读

1. 自动转义

Next.js 在渲染页面时，默认会对所有插入到 JSX 中的数据进行转义。这意味着如果用户输入中包含 HTML 或 JavaScript 代码，它们会被转义为普通文本，从而防止 XSS 攻击。

const userInput = "<script>alert('XSS')</script>";
return <div>{userInput}</div>;

在上面的代码中，userInput 会被转义为普通文本，不会执行其中的脚本。

2. 使用 dangerouslySetInnerHTML 时谨慎

dangerouslySetInnerHTML 是 React 提供的一个属性，允许你将 HTML 字符串直接插入到 DOM 中。由于这会绕过 React 的自动转义机制，因此必须非常小心。

const userInput = "<script>alert('XSS')</script>";
return <div dangerouslySetInnerHTML={{ __html: userInput }} />;

在上面的代码中，userInput 会被直接插入到 DOM 中，如果其中包含恶意脚本，将会被执行。因此，在使用 dangerouslySetInnerHTML 时，必须确保内容是可信的，并且在使用前进行严格的验证和清理。

3. 使用 Content Security Policy (CSP)

CSP 是一种安全机制，通过 HTTP 头来限制页面中可以加载的资源。通过配置 CSP，可以防止恶意脚本的执行。

在 Next.js 中，可以通过 next.config.js 文件来配置 CSP：

// www.javascriptcn.com code example
// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self' 'unsafe-inline';",
          },
        ],
      },
    ];
  },
};

上面的配置会限制页面只能加载同源的资源，并且禁止内联脚本的执行。

4. 使用安全的库

在处理用户输入时，使用经过验证的安全库（如 DOMPurify）来清理 HTML 内容，可以有效防止 XSS 攻击。

import DOMPurify from 'dompurify';

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

return <div dangerouslySetInnerHTML={{ __html: cleanInput }} />;

在上面的代码中，DOMPurify 会清理 userInput 中的恶意脚本，确保插入到 DOM 中的内容是安全的。