feat(generator): generate CSP hashes for inline styles and scripts in SPA mode #8022
Conversation
…tyles and scripts in SPA mode & add them to html meta tag, write to the console or save to file
Codecov Report
@@ Coverage Diff @@
## dev #8022 +/- ##
==========================================
- Coverage 68.87% 67.85% -1.03%
==========================================
Files 91 91
Lines 3849 3913 +64
Branches 1044 1063 +19
==========================================
+ Hits 2651 2655 +4
- Misses 971 1013 +42
- Partials 227 245 +18
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
| @@ -217,6 +218,77 @@ export default class Generator { | |||
| consola.warn('HTML minification failed for SPA fallback') | |||
| } | |||
|
|
|||
| const { csp } = this.options.render | |||
There was a problem hiding this comment.
I think there is CSP string in response headers of renderRoute returned value, we may use it to generate meta.
There was a problem hiding this comment.
I've checked. this.nuxt.server.renderRoute(...) returns an object with only two items:
html(string): the rendered HTMLpreloadFilesArray of Objects, each representing one of the key JS files
No CSP headers are returned.
Afaics renderRoute() calls different renderer for SSR and SPA. While the SSRRenderer's render() method really returns cspScriptSrcHashes, the SPARenderer's render() only returns the html and the files.
There was a problem hiding this comment.
Sorry, csp in response only works in ssr request.
I think a proper way is supporting csp meta tag in spa renderer and also extract csp hash generation and getCspString code.
There was a problem hiding this comment.
That was my first approach, but it is impossible, since the rendered HTML is minified after being returned here so any hashes calculated during generation will become invalid after minification. That is why I've put the CSP generation code into the generator, so it can act on the minified JS and CSS tags.
We could do the other way around though: move the minification code into the SPA renderer as well. Doesn't make a difference from my perspective, but the key is that the CSP hashes can only be calculated after minification.
Codecov Report
@@ Coverage Diff @@
## dev #8022 +/- ##
==========================================
- Coverage 68.06% 67.85% -0.22%
==========================================
Files 91 91
Lines 3911 3913 +2
Branches 1068 1063 -5
==========================================
- Hits 2662 2655 -7
- Misses 1012 1013 +1
- Partials 237 245 +8
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
|
As Nuxt 2 is currently in maintenance-mode until June 30, 2024, we are not aiming to merge any more features and so, regretfully, I am closing this PR. My apologies that we weren't able to include it in v2.17 🙏 |
Types of changes
Description
It is a modification to
generator.js, so that it considers the CSP options and adds the Content-Security-Policy hashes for inline scripts and styles when building an SPA.When SPA is built the only solution to avoid CSP problems is to explicitly allow all inline scripts and styles (using the
unsafe-inlinedirective). However this is considered bad practice and makes SPAs more vulnerable to XSS attacks.Resolves: #6592
Checklist: