search

rtfeldman / elm-css

Typed CSS in Elm.
https://package.elm-lang.org/packages/rtfeldman/elm-css/latest
BSD 3-Clause "New" or "Revised" License
1.23k stars 196 forks source link

CSP nonce support (to be able to protect against XSS attacks) #569

Closed jonathanmoregard closed 2 years ago

jonathanmoregard commented 2 years ago

My company uses elm-css extensively. We need to be able to support CSP without unsafe-inline, in order to be security compliant. Elm-css generates inlined css-styles, which are blocked by the CSP-policy we need to implement.

There is a way to get around this, using nonces. A nonce is a per-request cryptographically secure random value that is set as an attribute in the , to <style nonce={passed nonce}>{elm-css-stuff}.

rtfeldman commented 2 years ago

Cool, makes sense! 👍

I'd be happy to accept a PR for this. I think calling the function toNonceUnstyled would make sense.

rtfeldman commented 2 years ago

Published as 17.1.0

mostlyobvious commented 2 years ago

@jonathanmoregard Have you perhaps figured out how to best pass a nonce?

Any attempt to pass server-generated nonce seem futile to me when the style tag is not rendered on server too. The reason for that is nonce should be hidden and browser does a lot to not reveal it: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce#accessing_nonces_and_nonce_hiding

With a nonce passed from server to Elm app via flags, we'd make it visible to the attacker. And thus defeat the purpose of CSP with nonce in first place: https://content-security-policy.com/nonce/. Is there any other option? Am I'm missing something obvious here?

JohanWinther commented 2 years ago

@pawelpacana With a nonce passed from server to Elm app via flags, we'd make it visible to the attacker. And thus defeat the purpose of CSP with nonce in first place: https://content-security-policy.com/nonce/. Is there any other option? Am I'm missing something obvious here?

I'd like to know in which way the attacker can access the nonce when it's passed via Elm app flags. Do you have a scenario in mind?

My proposal for securely passing nonces: I'm thinking, start the Elm app inside of an anonymous function and let the server write the nonce directly into the flags argument. Would this hide the nonce? Perhaps I'm also missing something

mostlyobvious commented 2 years ago

I'm thinking, start the Elm app inside of an anonymous function and let the server write the nonce directly into the flags argument. Would this hide the nonce? Perhaps I'm also missing something

My bad. I've conflated passing nonce via flags with passing nonce via visible element attributes so that flags could read it.