Content security policy blocking remote CSS background image

Question

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

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....

Here's my CSP:

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

...where xxxxx is obviously my domain.

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?

[UPDATE]

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

Try changing the Content-Security-Policy header with an img-src of "* data:" — Dragomir Kolev, Aug 18 '17 at 11:07
Same result. What's interesting is the error message suggests it's reading not from `img-src` but from the fallback, `default-src` (which already has the wildcard.) — Mitya, Aug 18 '17 at 11:09
This is a real pain, I'm not exactly sure how to go about it if the previous comment didn't work. Good luck. — Dragomir Kolev, Aug 18 '17 at 11:13
Have you tried using `style-src`? The source that message cites is from an inline `style` element, right? — sideshowbarker, Aug 18 '17 at 11:26
@sideshowbarker - good point; I should have mentioned this is coming from an inline `style` attribute. The docs say `style-src` governs where external CSS may be loaded from, not background images loaded *by* them. — Mitya, Aug 18 '17 at 12:54
@Utkanos OK then I think the solution is to add `style-src 'unsafe-inline'` to your policy. Well, either that or better yet, move that inline style content out to separate file. Anyway, see the answer I added, which goes into it in more detail that I can fit into a comment — sideshowbarker, Aug 18 '17 at 14:31

sideshowbarker · Accepted Answer · 2021-08-23T22:52:55.230

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:">

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

And as far as CSP is concerned, it doesn’t matter what the inline style content is—it’s just 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 specified 'unsafe-inline' for.

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

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.

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.

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

+1 for spotting that my existing `'unsaife-inline` applied to JS only, not CSS. However, adding the `style-src` directive now results in this: "Content Security Policy: The page's settings blocked the loading of a resource at https://xxxxx.com/my-img.png ("img-src http://192.168.*.* data:")." So it seems it's deferring judgement to `img-src`, not `style-src` — Mitya, Aug 18 '17 at 15:13
Oh and I agree re: inline styles/JS - it's not ideal but it's what I have to work with currently. It's a framework. — Mitya, Aug 18 '17 at 15:14
OK yeah from that message it sound likes I guess you need to also add `https://xxxxx.com` as a source for `img-src`. I’ve updated the answer to reflect that — sideshowbarker, Aug 18 '17 at 15:19

Content security policy blocking remote CSS background image

1 Answers1

Linked