Implementing nonce with styled-jsx for Content Security Policy

[KarthikeyanRanasthala]

The implementation mentioned here in styled-jsx docs uses flushToReact/flushToHTML which used react-dom/server and styled-jsx/server

As next.js has inbuilt support for SSR and styled-jsx, the above mentioned implementation makes no sense. And this example doesn't cover nonce implementation

FYI, I've tried adding nonce to all individual <style jsx> and its getting stripped somehow during the build process.

Having a strong CSP is necessary to mitigate XSS and packet sniffing attacks. So let's discuss on this and figure out a way to do this.

[KarthikeyanRanasthala]

@timneutkens Any word here?

[KarthikeyanRanasthala]

I figured it out. Check this out, https://github.com/KarthikeyanRanasthala/styled-jsx-with-csp/

@timneutkens @leerob @ijjk What should I do here? Add to next.js/examples or add as a feature to next _document itself?
I think this would be much helpful if we add this to next.js itself as a feature. So that everyone can start using it immediately in future next.js versions.

Let me know what suits the most. I can open a PR for it, depending on your views.

[leerob]

Feel free to open a PR to add an example. Thank you!

[Hellstellar]

@KarthikeyanRanasthala The above example works flawlessly thanks you so much, I wasn't able to find the solution anywhere until I came here, great work.

[ganesham019]

@KarthikeyanRanasthala , is still the 'flush' is working fine ?
I am trying to add the 'nonce' to all the style tags, that are generated from styledJsx ?

[KarthikeyanRanasthala]

Hey @ganesham019 I haven't had a look at this in a long time, sorry, I can't help at the moment.