Start adding Nonce documentation #1833
Conversation
|
Looking good! A few notes to add to the docs:
This article goes into a lot of great detail on the subject: https://www.troyhunt.com/locking-down-your-website-scripts-with-csp-hashes-nonces-and-report-uri/ and MDN also has a great article. It'd also be good to include an example of a CSP that allows loading JS from a trusted CDN, since that's a common use case for FE projects: |
|
I've added more links and useful information, thank for nice catch @probablyup cc @TheLarkInn can anyone review docs PRs they seem to hang in the air :( |
|
How is this intended to be used when a nonce is created per request? Is this just a static nonce at build time? |
|
If this is a global variable checked at run-time then you just need to set |
|
CSP is somewhat complicated in that if it’s set up right, an attacker can’t
get a script on the page in the first place to run with the pregenerated
nonce.
It is true that nonce is better generated dynamically per page load, but
that isn’t workable if a CDN is part of your deployment process. That’s why
a combination of default src self + your CDN host + a nonce works decently
in this case.
Injected ads and stuff like that won’t match the two allowed hosts and if
it somehow does, it certainly won’t have the correct nonce since it isn’t
allowed to execute JS on the page to detect it. Therefore, the only
loophole I can think of is if someone malicious injects code through your
build process.
…On Thu, Feb 22, 2018 at 9:04 AM devdigital ***@***.***> wrote:
This is a global variable checked at run-time - i.e. you just need to set
window.__webpack_nonce__ before your output webpack bundle executes on
the page. This isn't very obvious from the current docs - the term *entry
script* and example showing the React import could be misread as a build
time setting.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1833 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAiy1mZ4IqwhYSw2o2UltV7KOY6IGz91ks5tXXPZgaJpZM4SGi2B>
.
|
|
What does webpack do with the nonce value? as it appears this var is also used by some CSS-in-JS libs at runtime when they add inline styles etc. |
|
It is appended to async-loaded chunk script tags and some libraries use it
for dynamically injected style tags, like styled-components.
html-webpack-plugin might (should) also use it if set.
…On Thu, Feb 22, 2018 at 10:40 AM devdigital ***@***.***> wrote:
What does webpack do with the nonce value? as it appears this var is also
used by some CSS-in-JS libs at runtime when they add inline styles etc.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1833 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAiy1g_6gF9-vj4plbH9mdWCBPgkSpHjks5tXYphgaJpZM4SGi2B>
.
|
|
Ok, so would the guidance be to reduce the scope of the static nonce to just webpack and those libraries (e.g. glamor, styled-components) that use it, and use another nonce (created per request) for other inline scripts? and therefore use multiple |
|
Oh I suppose that could work. I actually wasn’t aware you could do multiple
nonce.
…On Thu, Feb 22, 2018 at 10:51 AM devdigital ***@***.***> wrote:
Ok, so would the guidance be to reduce the scope of the static nonce to
just webpack and those libraries (e.g. glamor, styled-components) that use
it, and use another nonce (created *per request*) for other inline
scripts? and therefore use multiple nonce sources in the content security
policy?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1833 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAiy1mk_0JYBwmZ07l9voaD2rX1EifbXks5tXYzwgaJpZM4SGi2B>
.
|
|
ok, it sounds like it isn't required if you're able to share a value between server and client (for cases where you may be adding other inline scripts server side). I will test it out. Confirmation that it is a run-time variable has helped, thanks - I still think the example in the docs here can make that clearer. |
There was a problem hiding this comment.
Made a few grammar and formatting tweaks. Aside from that this looks like a great start. I think maybe we need to add a little more context about the connection between CSPs and nonce as, to someone who's unfamiliar with the topic, it's still a little unclear. I think this can be done in a follow-up PR though, signing off on it for now and will merge soon.
|
@skipjack @probablyup @EugeneHlushko is someone working on a follow-up? Because currently, the documentation leaves me with more questions than answers. I think @devdigital raised some important questions. Where can I put that |
|
I think this can be achieved using an SSR set-up, but probably not out of the box, I would suggest filing an issue in webpack/webpack and i (or someone from the team) will pick it up shortly @frontendphil |
|
@EugeneHlushko might this be a suitable workaround? |
|
@steffektif the last comment seems pretty much what i thought of but in the light of |
Add basic nonce documentation.
Fixes #1802