Multiple CSP Headers

Can you have multiple CSP headers?

Muliple CSP headers are allowed, however it may not work as you might expect. When multiple CSP policies are given, the browsers CSP engine will always select the most restrictive policy for the given directive.

Content-Security-Policy: img-src 'self';
Content-Security-Policy: img-src 'self' img.example.com;

In this example the second CSP policy does not overwrite the first one, the first policy is used because it is more restrictive. In the above example we would not be able to load images from img.example.com on the page.

How does default-src work with multiple policies?

Now, what if we don't specify img-src in the first policy, but use default-src instead?

Content-Security-Policy: default-src 'self';
Content-Security-Policy: img-src 'self' img.example.com;

The result here is the same, because img-src falls back to default-src, the first policy is effectivly the same as img-src 'self'. In this example you would also not be able to load images from img.example.com.

Does order matter?

The order in which the Content-Security-Policy HTTP response headers are returned does not matter. The browser only looks at which policy is most restrictive and uses that.

What about ambigious polices?

If you have a case where it is not clear which policy is more restrictive (for example two urls), then the policy becomes effectivly 'none'. Take a look at this example:

Content-Security-Policy: img-src img.example.com;
Content-Security-Policy: img-src more-images.example.com;

With the above policy images from both domains would fail to load, making it equivilent to img-src 'none'.

CSP Developer Field Guide

Want to learn the ins and outs CSP? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.

Grab a Copy