CSP策略配置后为什么内联脚本报错？

东宁 Dev 提问于 2026-03-23 12:20:20 阅读 3

安全

我在项目里加了 Content-Security-Policy，结果页面上所有内联的 <script> 都被拦截了，控制台报错说违反了 script-src 策略。

我试过加上 'unsafe-inline'，但听说这不安全。有没有更安全的办法？比如用 nonce 或 hash？我的 CSP 头现在是这样配的：

Content-Security-Policy: default-src 'self'; script-src 'self'

我来解答赞 0 收藏

反馈

1 条解答

司空智慧 Lv1

遇到内联脚本被拦截的问题，确实是因为 CSP 策略的限制。你提到的 'unsafe-inline' 虽然能解决问题，但确实不安全，容易导致 XSS 攻击。

可以使用 nonce 或 hash 来替代 'unsafe-inline'，这两种方法都比 'unsafe-inline' 更安全。这里简单介绍下怎么用 nonce 和 hash。

使用 nonce

首先在你的服务器端生成一个随机值作为 nonce，然后把这个 nonce 值加到 CSP 头中，同时在内联脚本标签里也引用这个 nonce 值。这样浏览器就能识别出哪些内联脚本是允许执行的。

CSP 头配置：

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-randomNonceValue'

内联脚本标签：

<script nonce="randomNonceValue">

  // 内联脚本内容

</script>

使用 hash

如果你的内联脚本内容不会频繁变化，可以使用 hash 方法。你需要计算出内联脚本的 SHA-256 哈希值，然后把这个哈希值加到 CSP 头中。

假设内联脚本内容是 alert('Hello, world!');，计算出其 SHA-256 哈希值为 sha256-oqdpNBMkh2eXHfD7wEz6DwYkR2/XJ8uobRlNpsrwybE=。

CSP 头配置：

Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-oqdpNBMkh2eXHfD7wEz6DwYkR2/XJ8uobRlNpsrwybE='

内联脚本标签保持不变：

<script>

  alert('Hello, world!');

</script>

以上两种方法都可以避免使用 'unsafe-inline'，选择哪种方法取决于你的具体需求和使用场景。标准写法推荐使用 nonce，因为它更灵活，适用于动态生成的内联脚本。

2026-03-23 12:37