Content Security Policy in .htaccess or with meta tag?

Question

Context

I have a VueJs single page application (in really just one HTML file), that I want to apply Content Security Policy (CSP) to. This is hosted on a subdomain, served from a shared host, and I can create .htaccess files there.

As far as I understand I have two options:

• put the CSP directive in the HTTP headers using for example the apache server's .htaccess file (like e.g. in this answer)
• add the CSP via meta http-equiv (like e.g. in this example)

Seemingly, I can also mix the two.

Question

However, is there a difference between HTTP headers (using.htaccess) and meta http-equiv in terms of

• safety (could allowed scripts e.g. manipulate the html headers further)
• browser compatibility
• other implications

Answer 1

As per this answer by @sideshowbarker, the specs require browsers to ignore some of the CSP directives in the meta-tag, namely:

• Content-Security-Policy-Report-Only
• report-uri
• frame-ancestors
• sandbox

Also the directives in the HTML meta http-equiv tag only apply to content/links/includes after the tag.

Per the above spec, however, manipulation is not possible once the tag has been processed:

Modifications to the content attribute of a meta element after the element has been parsed will be ignored.

Conclusion

In the end, it seems to be most safe to stick to HTTP headers, if possible.