4 ms·

I’m yet to find a website that actually has CSP without unsafe inline / eval granted in their policy. I suspect react doesn’t support the policies well, but als

I’m yet to find a website that actually has CSP without unsafe inline / eval granted in their policy. I suspect react doesn’t support the policies well, but also that the policy is not as scalable as intended. Don’t get me wrong, it’s a cool idea but I can’t help but think that it’s dead. Can anyone prove me wrong?

ianopolous 5y ago
We use quite strong CSP for https://beta.peergos.net https://beta.peergos.net Most of the site is written is vuejs and yes you need to precompile the vuejs templates for it to work with this strong CSP.
ezekg 5y ago
CSPs are hard to get right, but they're doable. Most occurrences of script unsafe-inline and unsafe-eval are due to laziness. As far as I know -- and I use React regularly -- there's nothing about React that makes a strong CSP harder vs normal DOM manipulations.
- iancarroll 5y ago
  It's also worth noting that 'unsafe-inline' in CSP is commonly used to support older browsers, and a nonce subsequently disables the unsafe directive for modern browsers that support it. It can be hard to read a policy visually and see if the directive actually applies. (The same thing happens with 'strict-dynamic' and allowing all HTTP(S) URIs -- 'strict-dynamic' disables the URIs when supported.) ref: https://csp.withgoogle.com/docs/strict-csp.html#example https://csp.withgoogle.com/docs/strict-csp.html#example
TechBro8615 5y ago
> I suspect react doesn’t support the policies well Frankly this sounds like something you just made up. Why would React require any weakening of CSP rules? Is there something special about React that requires loading it differently than any other JavaScript? On the whole, React is a win for security, because XSS is by default impossible, due to the indirection provided by the Virtual DOM abstraction. As long as you (and your dependencies) don’t dangerouslySetInnerHTML, you’ll eliminate most XSS bugs.
- hsbauauvhabzb 5y ago
  Name a Fortune 500 company that’s got a sane csp. PayPal doesn’t. Why go on the offensive, I implied I wasn’t even certain of my own hypothesis. Asshole.
technion 5y ago
React itself can be fine, but most of the ecosystem doesn't. Next.JS: https://github.com/vercel/next.js/issues/256 https://github.com/vercel/next.js/issues/256 Gatsby: https://github.com/gatsbyjs/gatsby/discussions/10890 https://github.com/gatsbyjs/gatsby/discussions/10890 Create React app (a solution exists, but is not enabled by default): https://stackoverflow.com/questions/58354362/inline-script-because-it-violates-the-following-content-security-policy-directiv https://stackoverflow.com/questions/58354362/inline-script-b... Google tag manager involves jumping through hoops the people running GTM usually won't jump through: https://developers.google.com/tag-manager/web/csp https://developers.google.com/tag-manager/web/csp
- leerob 5y ago
  That Next.js issue is 5 years old, here's a more recent discussion where we're exploring adding a CSP by default (https://github.com/vercel/next.js/issues/23993 https://github.com/vercel/next.js/issues/23993). We've also added documentation on adding HTTP response headers to improve security (https://nextjs.org/docs/advanced-features/security-headers https://nextjs.org/docs/advanced-features/security-headers).
Seirdy 5y ago
You can get a list of the most recent websites with a score of 120 or higher on Mozilla's HTTP Observatory in JSON format: https://http-observatory.security.mozilla.org/api/v1/getRecentScans?min=120&num=50 https://http-observatory.security.mozilla.org/api/v1/getRece... All those sites have a restrictive CSP, among other things. Many of them are Fediverse instances (mostly Mastodon), i.e. complex web services that often serve thousands of users. Some others are simple static sites which are comparatively easy to apply a strict CSP to.

ianopolous 5y ago

We use quite strong CSP for https://beta.peergos.net https://beta.peergos.net Most of the site is written is vuejs and yes you need to precompile the vuejs templates for it to work with this strong CSP.

ezekg 5y ago

CSPs are hard to get right, but they're doable. Most occurrences of script unsafe-inline and unsafe-eval are due to laziness. As far as I know -- and I use React regularly -- there's nothing about React that makes a strong CSP harder vs normal DOM manipulations.

iancarroll 5y ago
It's also worth noting that 'unsafe-inline' in CSP is commonly used to support older browsers, and a nonce subsequently disables the unsafe directive for modern browsers that support it. It can be hard to read a policy visually and see if the directive actually applies. (The same thing happens with 'strict-dynamic' and allowing all HTTP(S) URIs -- 'strict-dynamic' disables the URIs when supported.) ref: https://csp.withgoogle.com/docs/strict-csp.html#example https://csp.withgoogle.com/docs/strict-csp.html#example

TechBro8615 5y ago

> I suspect react doesn’t support the policies well Frankly this sounds like something you just made up. Why would React require any weakening of CSP rules? Is there something special about React that requires loading it differently than any other JavaScript? On the whole, React is a win for security, because XSS is by default impossible, due to the indirection provided by the Virtual DOM abstraction. As long as you (and your dependencies) don’t dangerouslySetInnerHTML, you’ll eliminate most XSS bugs.

hsbauauvhabzb 5y ago
Name a Fortune 500 company that’s got a sane csp. PayPal doesn’t. Why go on the offensive, I implied I wasn’t even certain of my own hypothesis. Asshole.

technion 5y ago

React itself can be fine, but most of the ecosystem doesn't. Next.JS: https://github.com/vercel/next.js/issues/256 https://github.com/vercel/next.js/issues/256 Gatsby: https://github.com/gatsbyjs/gatsby/discussions/10890 https://github.com/gatsbyjs/gatsby/discussions/10890 Create React app (a solution exists, but is not enabled by default): https://stackoverflow.com/questions/58354362/inline-script-because-it-violates-the-following-content-security-policy-directiv https://stackoverflow.com/questions/58354362/inline-script-b... Google tag manager involves jumping through hoops the people running GTM usually won't jump through: https://developers.google.com/tag-manager/web/csp https://developers.google.com/tag-manager/web/csp

leerob 5y ago
That Next.js issue is 5 years old, here's a more recent discussion where we're exploring adding a CSP by default (https://github.com/vercel/next.js/issues/23993 https://github.com/vercel/next.js/issues/23993). We've also added documentation on adding HTTP response headers to improve security (https://nextjs.org/docs/advanced-features/security-headers https://nextjs.org/docs/advanced-features/security-headers).

Seirdy 5y ago

You can get a list of the most recent websites with a score of 120 or higher on Mozilla's HTTP Observatory in JSON format: https://http-observatory.security.mozilla.org/api/v1/getRecentScans?min=120&num=50 https://http-observatory.security.mozilla.org/api/v1/getRece... All those sites have a restrictive CSP, among other things. Many of them are Fediverse instances (mostly Mastodon), i.e. complex web services that often serve thousands of users. Some others are simple static sites which are comparatively easy to apply a strict CSP to.