JavaScript内容安全策略配置

内容安全策略（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 阻止。若必须使用，可通过以下方式安全授权：

琅琅配音

全能AI配音神器

208

查看详情

• 使用 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 风险，关键是平衡安全性与功能需求。

以上就是JavaScript内容安全策略配置的详细内容，更多请关注php中文网其它相关文章！