内容安全策略阻止远程CSS背景图片 [英] Content security policy blocking remote CSS background image

问题描述

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

A background image loaded from a remote server is being blocked by my CSP with the message

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

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 显然是我的域。

...where xxxxx is obviously my domain.

我认为它不喜欢 url（... ，但 CSP规范似乎没有考虑 url（）方案，所以我

I assume it doesn't like url(..., but the CSP spec doesn't seem to consider url() a scheme so I can't see what to do about this. Anyone know?

[更新]

下面是@sideshowbarker的评论，我应该指出，此调用来自内联 style 属性（不是标记）。

Following @sideshowbarker's comment, I should have pointed out that this call is coming from an inline style attribute (not tag).

推荐答案

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

That CSP violation message indicates you have inline CSS style content, so you must either move that CSS content to a separate file (and use a link element to reference it) or else you must specify 'unsafe-inline'—for example, by adding a style-src directive to your policy:

<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样式内容是特定问题，而是说您有一些内联样式内容，即句点。

The reason is, the CSP violation message cited in the question isn’t saying the image in that CSS style content is the specific problem—it’s just saying you have some inline style content, period.

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

And as far as CSP is concerned, it doesn’t matter what the inline style content is—it’s just that your existing CSP policy doesn’t allow any inline style content all; your existing policy only allows inline scripts, because script-src is the only directive you have 'unsafe-inline' specified for.

因此，如果要保留内联样式的内容，则需要使用'unsafe-inline'来允许。

So if you’re going to keep that inline style content, you need to use 'unsafe-inline' to allow it.

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

Update: Based on comments below, it seems that once 'unsafe-inline' is added for style-src in this case, it’s also necessary to add https://xxxxx.com for img-src.

尽管如此，一旦您最后指定'unsafe-内联'样式内容和脚本，似乎您可能正处于开始考虑是否要指定CSP策略的地步，因为允许所有内联类型的失败

All that said, though, once you’ve ended up specifying 'unsafe-inline' for both style content and scripts, it seems like you might be at the point where you need to start considering whether you want to specify a CSP policy at all—because allowing everything inline kind of defeats the purpose of having a CSP policy at all to begin with.

如果您的目标是减少XSS风险，似乎您应该考虑移动所有内联样式和脚本内容分隔文件，并使用< script src> 和 link 引用这些文件……

If your goal is to reduce XSS risks, it seems you probably should consider moving all your inline style and script content to separate files, and using <script src> and link to reference those…

这篇关于内容安全策略阻止远程CSS背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！