内容安全策略阻止远程 CSS 背景图像

Question

我的 CSP 正在阻止从远程服务器加载的背景图像并显示消息

内容安全政策：页面的设置阻止加载 自己的资源（“default-src * https://xxxxx.com”）。来源： 背景图片：url('https://xxxxx....

这是我的 CSP：

<meta http-equiv="Content-Security-Policy" content="default-src * https://xxxxx.com; script-src * 'unsafe-eval' 'unsafe-inline'; img-src 'self' data:">

...xxxxx 显然是我的域名。

我认为它不喜欢url(...，但CSP spec 似乎没有考虑url() 一个方案，所以我不知道该怎么做。有人知道吗？

[更新]

在@sideshowbarker 的评论之后，我应该指出这个调用来自内联style 属性（不是标签）。

Answer 1

该 CSP 违规消息表明您具有内联 CSS 样式内容，因此您必须将该 CSS 内容移动到单独的文件（并使用 link 元素来引用它）或者您必须指定 'unsafe-inline' — 例如，通过在您的策略中添加 style-src 指令：

<meta http-equiv="Content-Security-Policy"
  content="default-src * https://xxxxx.com;
  script-src * 'unsafe-eval' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' https://xxxxx.com data:">

原因是，问题中引用的 CSP 违规消息并不是说该 CSS 样式内容中的图像是问题 - 它只是说您有一些内联样式内容，句号。

就 CSP 而言，内联样式内容是什么并不重要 — 只是您现有的 CSP 策略不允许任何内联样式内容；您现有的策略只允许内联脚本，因为 script-src 是您指定 'unsafe-inline' 的唯一指令。

因此，如果您要保留该内联样式内容，则必须使用 'unsafe-inline' 来允许它。

更新：基于下面的cmets，在这种情况下，似乎一旦为style-src添加了'unsafe-inline'，还需要为img-src添加https://xxxxx.com。

---

尽管如此，一旦您最终为样式内容和脚本指定了 'unsafe-inline'，您似乎可能需要开始考虑是否要在以下位置指定 CSP 策略全部——因为允许所有内容内联完全违背了制定 CSP 策略的目的。

如果您的目标是降低 XSS 风险，您似乎应该考虑将所有内联样式/脚本内容移动到单独的文件中，并使用 <script src> 和 link 来引用这些...