内容安全策略（CSP）通过限制脚本执行来源提升Web应用安全性，主要控制内联脚本、外部脚本域名、动态代码执行等行为；推荐使用nonce或hash机制授权内联脚本，避免unsafe-inline和unsafe-eval，结合strict-dynamic支持现代框架，并利用Report-Only模式调试策略，有效降低XSS风险。
内容安全策略（Content Security Policy，简称 CSP）是一种重要的安全机制，用于防止跨站脚本（XSS）、数据注入等攻击。在使用 JavaScript 的 Web 应用中，合理配置 CSP 能有效限制哪些脚本可以执行，从而提升应用的安全性。
理解 CSP 的基本作用
CSP 通过 HTTP 响应头 Content-Security-Policy 来定义浏览器可以加载和执行的资源来源。对于 JavaScript，主要控制以下几类行为：
- 内联脚本（如 onclick、<script>alert(1)</script>）是否允许执行
- 外部脚本文件的加载域名限制
- eval()、setTimeout(string) 等动态代码执行是否被禁止
- 内联样式与事件处理器的使用限制
默认情况下，CSP 会阻止所有不明确允许的资源加载和执行行为。
常见 CSP 配置指令（针对 JavaScript）
以下是与 JavaScript 相关的关键 CSP 指令及其含义：
立即学习“Java免费学习笔记（深入）”；
- script-src 'self'：只允许加载同源的脚本
- script-src 'unsafe-inline'：允许内联脚本（不推荐，降低安全性）
- script-src 'unsafe-eval'：允许使用 eval() 执行代码（应避免）
- script-src https://cdn.example.com：允许从指定 HTTPS 域名加载脚本
- script-src 'nonce-abc123'：仅允许带有特定 nonce 值的脚本执行
- script-src 'strict-dynamic'：信任由已授权脚本动态创建的脚本
示例响应头：
Content-Security-Policy: script-src 'self' 'nonce-abc123'; object-src 'none'; base-uri 'self';
该策略禁止插件、限制脚本仅来自自身域或具有正确 nonce 的标签。
如何安全地使用内联脚本
直接使用内联脚本（如 <script>doSomething()</script>）通常被 CSP 阻止。若必须使用，可通过以下方式安全授权：
- 使用 nonce：为每个请求生成唯一随机值，并在 script 标签中声明
服务端设置：
// Node.js 示例
const nonce = crypto.randomBytes(16).toString('hex');
res.setHeader("Content-Security-Policy", `script-src 'nonce-${nonce}'`);
HTML 中使用：
<script nonce="<em>generated-nonce</em>">console.log("safe");</script>
- 使用 hash：计算脚本内容的哈希并加入策略
例如，脚本内容为 alert('Hello')，其 SHA-256 哈希为：
sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng=
则策略可写为：
script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng='
开发与部署建议
- 尽量避免使用 'unsafe-inline' 和 'unsafe-eval'
- 优先使用外部脚本文件 + nonce 或 hash 控制
- 结合 strict-dynamic 提高现代应用兼容性（尤其适用于 React、Vue 等框架）
- 上线前使用报告模式收集违规信息：
Content-Security-Policy-Report-Only: script-src 'self'; report-uri /csp-report-endpoint
此头不会阻止行为，但会向指定地址发送违规日志，便于调试。
基本上就这些。合理配置 CSP 能大幅减少 XSS 风险，关键是平衡安全性与功能需求。
