React 应用的内容安全策略

内容安全策略（CSP）是一种 HTTP 响应标头，用于告知浏览器哪些内容来源是可信的。通过明确声明允许加载哪些脚本、样式、图像和字体，CSP 可以阻止注入的恶意内容执行——即使 XSS 漏洞允许攻击者向页面注入 HTML。

default-src 'self' 设置基线：所有资源类型（脚本、样式、图像、字体和框架）只能从同一来源加载。script-src 'self' 将脚本加载范围缩小到同一来源，从而阻止来自外部 CDN 的脚本，除非明确列出这些来源。这两个指令共同构成限制性 CSP 的基础。

eval() 会在运行时将字符串转换为可执行代码，而这正是 XSS 载荷所需要的功能。使用 script-src 'self'（不包含 'unsafe-eval'）的 CSP 会阻止 eval() 以及 new Function() 和 setTimeout(string) 等相关函数。这样可以消除一大类 XSS 载荷的执行途径。

'strict-dynamic' 位于 script-src 中时，会将信任授予由已有可信脚本加载的脚本。这支持打包工具使用的动态脚本加载模式，无需将每个 CDN 地址都列入允许列表。可信脚本可以加载其他脚本，而这些脚本会继承信任。

如果应用需要某个特定的内联脚本（例如分析工具初始化代码片段），您可以计算其 SHA-256 哈希值，并将 'sha256-base64hash' 添加到 script-src 中。只有与该精确哈希值匹配的脚本才允许以内联方式执行。攻击者注入的脚本会具有不同的哈希值，因此会被阻止。

随机数是服务器为每个请求生成的密码学随机值。服务器会将该随机数同时添加到脚本标签（<script nonce="abc123">）和 CSP 标头（script-src 'nonce-abc123'）中。只有带有正确随机数的脚本才能执行。攻击者无法预测该随机数，因此注入的脚本无法使用它。

CSP 支持通过 report-uri /csp-violation-endpoint 或较新的 report-to 指令报告违规情况。当浏览器因 CSP 阻止某个资源时，会向端点发送 JSON 报告。监控这些报告有助于您识别合法的配置问题和正在进行的攻击尝试。

在 Next.js 中，请在中间件中添加 CSP 标头：创建 middleware.ts，生成随机数，设置 Content-Security-Policy 标头，并通过响应标头将随机数传递给页面。页面布局会从标头中读取随机数，并将其应用于所有内联脚本和样式标签。

Content-Security-Policy-Report-Only 是测试模式：浏览器不会执行任何阻止操作，但会针对所有本应被阻止的内容发送违规报告。请先以仅报告模式部署并修复所有违规，然后切换到强制执行的 Content-Security-Policy 标头，以免破坏应用。

当 CSP 阻止某个资源时，Chrome DevTools 控制台会显示红色错误消息，指出被阻止的地址和违反的指令。这些消息在开发和测试期间非常有价值。每项违规都必须通过修正规则、将资源移到允许的来源，或使用随机数/哈希值来解决。

一种实用的 React SPA CSP 配置是：default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'。frame-ancestors 'none' 还可以通过阻止应用嵌入框架来防止点击劫持。

内容安全策略中的 script-src 'self' 可以阻止什么？

CSP 是用于声明可信内容来源的 HTTP 标头。default-src 'self' 和 script-src 'self' 会阻止外部脚本和 eval。内联脚本可以通过哈希值或随机数放行。'strict-dynamic' 支持动态脚本加载。请使用 Content-Security-Policy-Report-Only 在强制执行前进行测试。Next.js 通过中间件实现 CSP。DevTools 控制台会实时显示违规信息。