我在给项目配置CSP时遇到了奇怪的问题。设置了后页面报错： <!DOCTYPE html> &lt […]

设置了CSP后图片无法加载，却显示’strict-dynamic’相关错误？

技术树辰提问于 2026-02-05 05:57:27 阅读 92

安全

我在给项目配置CSP时遇到了奇怪的问题。设置了后页面报错：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self'; script-src 'strict-dynamic' 'nonce-abc123' ">
</head>
<body>
  <img src="test.jpg" style="width:100px">
</body>
</html>

控制台提示”Refused to load the image because it violates the following Content Security Policy directive: “script-src ‘strict-dynamic’…”，但明明图片路径没问题啊？尝试过把nonce加到img标签和添加data:源都没用，这个strict-dynamic为什么会影响图片加载？

CSP配置

我来解答赞 9 收藏

反馈

2 条解答

欧阳丹丹 Lv1

把img-src里加上data:和'trigid-dynamic'那个是给script用的，图片加载不受它控制，但你配置的位置可能被误伤了。试试这样改：

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; script-src 'strict-dynamic' 'nonce-abc123'">

2026-02-06 23:01

设计师俊熙 Lv1

你这个问题是 CSP 配置中比较常见的一个误区。'strict-dynamic' 是用在 script-src 里面配合 nonce 使用的，用来允许动态加载的脚本，但它本身不会影响图片加载。然而你设置的 default-src 'none' 意味着所有资源都默认被禁用，除非你显式允许。你只写了 img-src 'self'，但 default-src 会作为回退策略，如果资源类型没有在对应的指令中声明，就会看 default-src。所以你漏掉了 img 类型的兜底策略。

不过你已经写了 img-src 'self'，图片仍然报错，说明浏览器控制台提示的信息有些误导。真正的问题是你在 script-src 里用了 'strict-dynamic'，但没有配合有效的 nonce 值或有效的内联脚本加载机制，导致浏览器无法正确解析脚本加载策略，进而影响了整个 CSP 的解析。

这个问题可以优化成这样：

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self'; script-src 'nonce-abc123' 'strict-dynamic'">

</head>

<body>

  <img src="test.jpg" style="width:100px">

</body>

</html>

注意我把 script-src 中的顺序调整了一下，把 'nonce-abc123' 放到 'strict-dynamic' 前面。因为 'strict-dynamic' 是告诉浏览器只信任通过合法脚本动态加载的资源，而排在它前面的 nonce 才是优先匹配的。否则 'strict-dynamic' 可能会导致无法正确识别你手动配置的策略。

另外确认你的服务器没有在响应头里覆盖了这个 meta 标签里的 CSP。如果有的话，需要在响应头中保持一致。

2026-02-05 06:01