Phoenix Blog Post: Content Security Policy configuration (in Phoenix with LiveView)

Nice manual! It fills the niche of “how to publish a CSP header in Phoenix”, while for other platforms Node.js, Wordpress, etc there is a lot articles.

It is only more correct to link to the official source Content Security Policy (CSP) - HTTP | MDN, since content-security-policy.com is an outdated site with incorrect information. For instance the wrong script-src 'nonce-r@nd0m' is shown right on the main page - the @ character is not allowed in the ‘nonce-value’.

The 2016 paper out of Google refered below is not actual.
In 2016 IE had 30% of the market but did not support CSP. Other browsers, except for Chrome, were supported CSP very poorly too.
Many third party javascript libraries required 'unsafe-inline' and some also required 'unsafe-eval'.
Popular site engines (CMS) also required rework in their scripts and styles.

Now things changed and Content Security Policy has become a de facto “must have” standard - every browser extension or web app must have it.

Security requirements have increased, Chrome extensions do not allow 'unsafe-inline' at all, Firefox extensions with a policy that use 'unsafe-eval' / 'unsafe-inline' keywords, allowing loading of external scripts and resources, as well as blob: files, are not allowed for extensions listed on addons.mozilla.org due to major security issues.

The situation is somewhat complicated by Safari browser, which is stuck at the CSP2 level.
Nonetheless all serious sites that work with personal data (Twitter, Facebook, Google, …) or money transfers (Paypal, etc.). have a CSP.

In addition to XSS attacks, CSP protects against ads substitution and injecting third-party ads, and prevents users from being tracked on the Internet.
So your article is very relevant for ordinary webmasters as well.

PS: To the principle “When it comes to CSP, just about any policy is better than none” from Sobelow’s documentation, I can add: “safety is never enough”.

3 Likes