Where to specify the Content Security Policy (CSP): on a backend or on a frontend?

0
votes

As far as I understand, there are two ways to specify the Content Security Policy:

  • On a server side via headers:
res.setHeader("content security-policy", "default-src: 'none';")
  • In an HTML-page via meta-tag:
<meta content = "default-src 'none';" http-equiv = "Content-Security-Policy" />

My questions:

  1. What is the difference between these two techniques?

  2. Is it enough to use just one of them?

  3. Which one should I use? Backend, frontend, or both?

P.S. Thanks to How does Content Security Policy (CSP) work?, I know what is the CSP and how does it work. What I want to know, however, is where exactly it is better to set the CSP.

1
content-security-policy
Does this answer your question? How does Content Security Policy (CSP) work? – j08691
@j08691, I've just read this question and actually not. – Mike

1 Answers

2
votes

Delivering CSP via HTTP header is a preferred way.

Meta tag has the same functionality but ny technical reasons it's not support some directives: frame-ancestors, report-uri, report-to and sandbox. Also the Content-Security-Policy-Report-Only is not supported in meta tag.

In SPA (Single Page Application), a meta tag is traditionally used for CSP delivery, because a lot of hostings do now allow to manage of HTTP header.

When SSR (Server Side Rendering), an HTTP header is used more often.

You can use any technically convenient CSP delivery method (keeping in minds the limitations of the meta tag), but do not use both at the same time. Both policies will be executed one after the other, so in case of differences, a stricter one will apply actually.

Note that:

  • CSP meta tag should be placed in <head>, otherwise it will not works.
  • Changing the meta tag by javascript will result in both the old and the new policies being in effect.
  • in cases of CSP for non-HTML files, the meta tag can not be used technically