-
Notifications
You must be signed in to change notification settings - Fork 57
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Nonce implementation for style src #239
Comments
Hey, thanks for rainsing a question. I would love to get some feedback from @trijpstra-fourlights who is an expert of nonce ;) |
I wouldn't call myself an expert per se ;), but I'm happy to try and help! The
To get nonce working, you'll have to provide the nonce attribute when the actual <style> element is created, or use the It makes sense if you think about it: if the code in your OP was actually working, it would essentially result in the same as having a CSP with So either use that as your CSP for style-src, or use Hope that helps! If not, can you show how you're injecting/creating the <style> elements that you want to supply with the |
Thank you very much! I believe I understand what you mean by letting the client generate the nonce after the <style> tag has already been served to the DOM. I use nuxt.config to add either Tailwind or Vuetify to my style, so useHead() isn't really an option I think. My issue ended up being only relevant locally. When importing my stylesheets in app.vue <style> rather than in config it works on production. Thanks a lot! |
No problem, glad that you got it working 👍 It does ring some bells, so I checked my reference project and I indeed also have a similar check implemented:
@Baroshem we should probably add this to the |
That would be really useful! @trijpstra-fourlights could you create a PR to branch 1.0.0-rc.1? :) |
Thanks, this works out great. I have one more question, if my component framework (like Vuetify) uses inline-styles i'd have to use unsafe inline right? |
If you cannot control how these inline styles get injected, then indeed your only option to use While I haven't tested this, it seems that vuetify supports supplying a nonce (although they use a static one in their example, which defeats the purpose). Also found this issue which provides some insight on how to approach this:
So if you hook into the I haven't tested that though, so YMMV. Let us know if you are able to figure it out! edit (1): tbh, I don't think theme: {
cspNonce: () => useNonce()
} again... this is untested and I suspect it won't work. edit (2): Another thing I just remembered, |
The style attribute on I do think this is something that should be added to We can make the feature dependent on the actual implemented CSP headers, but again, such a change will need to be properly tested and documented. That being said, I wouldn't go to production with CSP errors, and I would always then choose to implement a less strict CSP, so in your case use IMO, I think the take home message is that I will try to get a playground project going which uses tailwind, vuetify & nuxt-security with a fully strict CSP, but I can't make any promises on when I'll have the time for that. I will link it in this thread when it's available though. edit (1): wording, formatting |
Thanks for extensive research @trijpstra-fourlights and for additional details @erikknorren 💚 After reading your conversion, in my honest opinion, I dont think that this should be added to Nuxt Security. In general, it would be useful, but it is a bit of an edge case right now that requires a functionality that as you mentioned will create some overhead for all module users (not only those who are using it) which can be troublesome for performance for example. This case of Vuetify inline styles shouldnt be a reason to add a feature that will add some dead code for other users. And considering that this issue can be easily mitigated with setting less strict CSP, I would recommend to follow this path now. But lets keep this idea in mind. Maybe in the future versions, we will be able to implement similar functionality without causing overhead. Thanks once again for everything! @trijpstra-fourlights could you add these docs about nonce from your previous comment? :) |
Hello,
I recently tried implementing nonce based content-security-policy from the documentation using the config listed below. The script tags in my head all have the nonce attribute and work fine this way. However, my style tags do not. In my app.vue I did the following to try to get it to work as well, however my stylesheets cannot be loaded into the DOM. Is this a bug or am I doing something wrong?
The text was updated successfully, but these errors were encountered: