cssinjs / cssinjs/jss

Hash-based CSP support

Open
#814 16 comments 6 reactions 0 assignees View on GitHub
complexity:high enhancement
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

Shout out to the lovely humans who did some [great](https://github.com/cssinjs/jss/issues/559) CSP [work](https://github.com/cssinjs/jss/pull/672) so far and even shipped [documentation](http://cssinjs.org/setup/?v=v9.8.7#configuring-content-security-policy). I was recently able to get CSP working on my project thanks to this, cheers.

So this is a great start, but because my app is 100% static [1] I'd prefer to calculate everything ahead of time and avoid the dynamic nonce injection/Helmet approach, if possible. In other words I'd like to support [this](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Syntax) CSP flavor - do a search for _hash-algorithm_.

Thus I'm now trying to understand the basis by which JSS injects these `` tags, e.g.
![image](https://user-images.githubusercontent.com/182515/43691453-2156c266-991d-11e8-9a54-e249286acecc.png)

First I thought if it were possible to force JSS to inject a single `<style>` tag into the document, I could hash that ahead of time. Then I read the material-ui [docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Syntax) which discuss performance reasons for splitting styles across multiple tags, and now I'm curious to learn about the tradeoffs and configurability here.

A possible but clunky alternative is that according the [Google CSP evaluator](https://csp-evaluator.withgoogle.com) we can define multiple hashes inside one style-src string.
`style-src 'self' 'sha256-z124...' 'sha256-2g7e...';`

Perhaps this is all a terrible idea and that's OK. Still, even if academic, I'd love to learn what it'd take to arrange this. Hope I'm making sense and thanks for a lovely library either way!

[1] My app is based on CRA and doesn't need to support user-uploaded stuff -- in theory, we should be able to keep everything static, which will enable "dumb" CDN hosting -- fastest page loads at the lowest possible cost.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.