What is happening when I have two CSP (Content Security Policies) policies - header & meta?

Question

Question is regarding having CSP served twice:

What's the behavior if there is one policy served through the Content-Security-Policy HTTP response header and also another policy specified with the <meta /> element?

Will those two be merged somehow? Or else which one has priority? (I cannot find clear info on this in the spec).

Specific use case might be serving Report-to through the HTTP response header and putting all other restrictions in the <meta /> element — because some of those are generated by webpack - and if I shouldn't be worried about <meta /> shallowed by the HTTP response-header policy.

Answer 1

If you have CSP directives specified both in a Content-Security-Policy HTTP header and in a meta element, the browser uses the most-restrictive CSP directives, wherever they’re specified.

See the details on multiple polices at https://w3c.github.io/webappsec-csp/#multiple-policies and the details on use of the meta element at https://w3c.github.io/webappsec-csp/#meta-element:

Note: A policy specified via a meta element will be enforced along with any other policies active for the protected resource, regardless of where they’re specified. The general impact of enforcing multiple policies is described in §8.1 The effect of multiple policies.

8.1. The effect of multiple policies

The impact is that adding additional policies to the list of policies to enforce can only further restrict the capabilities of the protected resource.

Answer 2

As you discovered, yes, they are merged if you do it right. However, I want to add that you should avoid using meta tags with CSP headers if possible.

Why? It goes against the spec and spirit of "CSP headers", so some functionality won't work: "Note: The Content-Security-Policy-Report-Only header is not supported inside a meta element. Neither are the report-uri, frame-ancestors, and sandbox directives."

Companies are finding it very difficult to implement a CSP in a secure way while simultaneously not breaking their website or requiring a lot of rework. That's why I made Enchanted Security, a virtual content security policy that works by inspecting network requests made on the page to both track them and block malicious requests. It's much simpler to set up than a CSP and has capabilities that you can't get from a CSP either.