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

Question

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

Content Security Policy: The page's settings blocked the loading of a resource at self ("default-src * https://xxxxx.com"). Source: background-image: 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' 来允许它。

更新： 根据下面的评论，似乎在这种情况下为 style-src 添加了 'unsafe-inline' 后，还需要添加 https://xxxxx.com 对于 img-src.

尽管如此，一旦您最终为样式内容和脚本指定了 'unsafe-inline'，您似乎就需要开始考虑是否要指定完全没有 CSP 政策——因为允许一切内联都违背了拥有 CSP 政策的初衷。

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

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

Content security policy blocking remote CSS background image

css

content-security-policy