Chore/2.0.0 #492

Baroshem · 2024-07-16T06:34:46Z

Types of changes

Bug fix (a non-breaking change which fixes an issue)
New feature (a non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

#475
#488
#485
#496
#494
#501

Description

Checklist:

My change requires a change to the documentation.
I have updated the documentation accordingly.
I have added tests to cover my changes (if not applicable, please state why)

feat(csp): support style nonce in development

vercel · 2024-07-16T06:34:49Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nuxt-security	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2024 11:53am

feat-#487: local dev with nuxt devtools

feat(doc): introduce Nuxt Scripts as alternative to `useScript`

fix: ensure RegExp[] origin can be passed to appSecurityOptions

Baroshem · 2024-07-29T09:21:35Z

@vejja if you agree, I would love to merge this PR and release a brand new 2.0.0 version :)

vejja · 2024-07-30T21:49:24Z

docs/content/1.documentation/2.headers/1.csp.md

@@ -215,15 +215,6 @@ export default defineNuxtConfig({
 - `"'nonce-{{nonce}}'"` placeholder: Include this value in any individual policy that you want to be governed by nonce. 


-::alert{type="warning"}


I think this section should not be removed
The vite nonce is only inserted in dev mode, if I understand correctly
@dargmuesli is this true?

I think all offending actions are only executed in dev mode as well. Styles should not be added through JavaScript by Nuxt in production as far as I know. They're just referenced as compiled CSS content in production, at least without changes to any configuration.
I have the fix contained in this PR running for a few of my sites for quite some time now and have not observed any issues (even with close monitoring done by Sentry).

Maybe @danielroe could quickly confirm or refute that style loading through JavaScript only happens in dev mode by vite and, by default, not by Nuxt in production?

I'm pretty sure we had to use unsafe-inline in styles in our own doc website, because @nuxt/ui uses pinceau under the hood, and pinceau modifies styles dynamically at runtime via Javascript.

Ok, but that's somewhat 3rd party, no? The section talks about "Nuxt's mechanism for Client-Side hydration of styles" so maybe the wording should be changed then to reflect the actual reason for the recommendation better. I'd still say the recommendation doesn't really need to be that prominent for the pinceau use case though, but that's just an opinion.

I'll unsubscribe from this PR to reduce noise, just tag me again if you need me

vejja

I've got 2 general comments on this PR:
1- Let's check whether unbuild manages to find the local imports. I think I remember we need to add them manually to package.json
2- The regex serializer/deserializer is quite complex. Unless @Baroshem is comfortable with the logic, I would love to see comments and test examples added, so that we understand better the rationale

src/module.ts

src/runtime/nitro/plugins/00-routeRules.ts

src/utils/originRegExpSerde.ts

If the CSP header is malformed or does not exist, the value will be undefined.

Closes #496

Signed-off-by: Pascal Sthamer <10992664+P4sca1@users.noreply.github.com>

docs: update information about Nuxt Image

Signed-off-by: Pascal Sthamer <10992664+P4sca1@users.noreply.github.com>

vejja · 2024-08-03T15:33:51Z

docs/content/1.documentation/5.advanced/2.faq.md

-</script>
-```
+When using `<NuxtImg>` or `<NuxtPicture>`, an inline script will be used for error handling during SSR.
+This will lead to CSP issues if `unsafe-inline` is not allowed and the image fails to load.


Hey @P4sca1
Isn’t it a bit severe ?
You could probably use ‘unsafe-hashes’ here, and the inline code is always the same so you could pre-hash it.
I do agree this is not ideal though. @harlan-zw was able to replace all inline event handlers with addEventListener in @nuxt/scripts so maybe the team at NuxtImg can use the same approach?

The inline code will indeed be always the same, so using unsafe-hashes could work. Maybe we could add it by default in non strict mode or behind a feature flag in strict mode to support <NuxtImg> and <NuxtPicture>.

I calculated the hash that would be needed:

echo -n "this.setAttribute('data-error', 1)" | openssl sha256 -binary | openssl base64 bwK6T5wZVTANitXbrTsel7kl/PyCjCd/Dq5Qoz3imjM=

Using addEventListener in this case is not trivial, because the event listener would be attached in onMounted(), which is too late for some kind of errors. So some errors, e.g. when the url is invalid, could be missed.

Hey @P4sca1
What is the issue when CSP denies execution of the error handler?

The data-error property does not get set on the image tag and the error event is never emitted.
From a user's perspective the page works fine, it just shows an unloaded image.

Baroshem · 2024-08-09T08:49:01Z

Hey @Shana-AE could you work on the improvements suggested by @vejja ? :)

vejja · 2024-08-09T10:29:21Z

@Baroshem just a general comment here on providing a regex serializer/deserializer
The official Nuxt docs say that we should not do this:

On balance though, the CORS handler is a native h3 feature, which is supposed to allow Regexes.
I am a bit puzzled at whether regexes are allowed/not allowed in nuxt.config.ts.

Baroshem · 2024-08-09T11:22:18Z

Hmm, at this point maybe it would be safer to revert this change and plan it for 2.1.0? What would be your recommendation Sebastien? :)

vejja · 2024-08-09T11:39:56Z

Hmm, at this point maybe it would be safer to revert this change and plan it for 2.1.0? What would be your recommendation Sebastien? :)

Yes, agree with this Jakub.
We would have more time to check with @danielroe on why regexes are not allowed in nuxt.config.ts but allowed in h3 - how they recommend we deal with this

This reverts commit 4528880.

Shana-AE · 2024-08-09T13:57:37Z

@Baroshem just a general comment here on providing a regex serializer/deserializer The official Nuxt docs say that we should not do this:

On balance though, the CORS handler is a native h3 feature, which is supposed to allow Regexes. I am a bit puzzled at whether regexes are allowed/not allowed in nuxt.config.ts.

Thanks for pointing out the documentary :)
I just found that regexp didn't work, and after debugging, I found regexp was serialized to {}. and this is because that runtimeConfig was merged with env and serialized with JSON.stringify() before it was passed to h3. as I mentioned in #497.
I only got the runtimeConfig came from nitropack and got the value from process.env.RUNTIME_CONFIG. I'm just a new user of nuxt, so I didn't know more things about the detail that Why runtimeConfig was serialized and deserialized
I know the problem, and I know the superficial reason, but don't know about the deeper reason, so I just made "it works" through make Regexp can be serialized and restored, though ugly.
I think maybe we should use other things than runtimeConfig to store the config ? or if there is a best practice to make regexp serializable?

Shana-AE · 2024-08-09T14:02:03Z

Hey @Shana-AE could you work on the improvements suggested by @vejja ? :)

About the test and document, I want to know if there's a better solution to solve this problem. #497 it maybe or should be replaced with a better solution
And I want to know if there is a guide about writing test or coverage report?

vejja · 2024-08-09T14:15:47Z

@Baroshem just a general comment here on providing a regex serializer/deserializer The official Nuxt docs say that we should not do this:
On balance though, the CORS handler is a native h3 feature, which is supposed to allow Regexes. I am a bit puzzled at whether regexes are allowed/not allowed in nuxt.config.ts.

Thanks for pointing out the documentary :) I just found that regexp didn't work, and after debugging, I found regexp was serialized to {}. and this is because that runtimeConfig was merged with env and serialized with JSON.stringify() before it was passed to h3. as I mentioned in #497. I only got the runtimeConfig came from nitropack and got the value from process.env.RUNTIME_CONFIG. I'm just a new user of nuxt, so I didn't know more things about the detail that Why runtimeConfig was serialized and deserialized I know the problem, and I know the superficial reason, but don't know about the deeper reason, so I just made "it works" through make Regexp can be serialized and restored, though ugly. I think maybe we should use other things than runtimeConfig to store the config ? or if there is a best practice to make regexp serializable?

Understood @Shana-AE, thanks for the explanation
I don’t know the exact answer, but we will find out

P4sca1 · 2024-08-09T15:53:56Z

Here is my attempt on fixing the RegExp issue: #509
Would love to hear your feedback. I noticed that we do not have any CORS test fixture yet. Would be great to add some tests in the future.

UPDATE: I also added a new test fixture for CORS with my PR.

dargmuesli and others added 4 commits June 12, 2024 11:54

feat(csp): support style nonce in development

ff0ecfe

Update from useScript to Nuxt Scripts

fad91ee

feat-#487: local dev with nuxt devtools

338be11

Merge pull request #475 from dargmuesli/feat/csp/vite

b7701f1

feat(csp): support style nonce in development

Merge pull request #488 from Baroshem/feat/#487

88dbb4c

feat-#487: local dev with nuxt devtools

Baroshem linked an issue Jul 16, 2024 that may be closed by this pull request

Improve local development with NuxtDevtools #487

Open

vercel bot deployed to Preview July 16, 2024 06:38 View deployment

Merge pull request #485 from Baroshem/vejja-patch-3

2d0ae0a

feat(doc): introduce Nuxt Scripts as alternative to `useScript`

vercel bot deployed to Preview July 16, 2024 06:42 View deployment

Shana-AE and others added 2 commits July 23, 2024 00:52

fix: ensure RegExp[] origin can be passed to appSecurityOptions

4528880

Merge pull request #498 from Shana-AE/fix/regexp-corsHanlder.origin

765d7e1

fix: ensure RegExp[] origin can be passed to appSecurityOptions

vercel bot deployed to Preview July 26, 2024 12:58 View deployment

vejja requested changes Jul 30, 2024

View reviewed changes

src/module.ts Outdated Show resolved Hide resolved

src/runtime/nitro/plugins/00-routeRules.ts Outdated Show resolved Hide resolved

src/utils/originRegExpSerde.ts Outdated Show resolved Hide resolved

P4sca1 and others added 7 commits July 31, 2024 13:02

test: use nullish coalescing operator

23af05a

If the CSP header is malformed or does not exist, the value will be undefined.

test: add test cases for server-only components

eb097d0

fix: log warning when removing static nonce from CSP header

c38a710

fix: skip nonce generation and csp header update for NuxtIsland requests

2b0cf0f

docs: update information about Nuxt Image

a2425ce

Closes #496

chore: fix typo

0e3ab07

Signed-off-by: Pascal Sthamer <10992664+P4sca1@users.noreply.github.com>

Merge pull request #503 from P4sca1/docs/image-faq

7811a00

docs: update information about Nuxt Image

vercel bot deployed to Preview August 1, 2024 14:06 View deployment

vejja and others added 3 commits August 2, 2024 20:18

merge changes from #500 into #502

b0b4a08

Replace isIslandRequest util with check if nonce already exist

57ff90b

Signed-off-by: Pascal Sthamer <10992664+P4sca1@users.noreply.github.com>

fix: use console warn instead of useLogger

1a5ada9

Signed-off-by: Pascal Sthamer <10992664+P4sca1@users.noreply.github.com>

vejja reviewed Aug 3, 2024

View reviewed changes

Merge pull request #502 from P4sca1/main

e6df1ac

vercel bot deployed to Preview August 6, 2024 16:50 View deployment

feat: bump unplugin-remove to fix sitemaps

4993963

vercel bot deployed to Preview August 8, 2024 11:44 View deployment

Revert "fix: ensure RegExp[] origin can be passed to appSecurityOptions"

b133ed6

This reverts commit 4528880.

vercel bot deployed to Preview August 9, 2024 11:53 View deployment

Baroshem mentioned this pull request Aug 9, 2024

when corsHandler.origin is RegExp[], it doesn't work #497

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chore/2.0.0 #492

Chore/2.0.0 #492

Baroshem commented Jul 16, 2024 •

edited

Loading

vercel bot commented Jul 16, 2024 •

edited

Loading

Baroshem commented Jul 29, 2024

vejja Jul 30, 2024 •

edited

Loading

dargmuesli Jul 31, 2024

vejja Jul 31, 2024 •

edited

Loading

dargmuesli Aug 1, 2024 •

edited

Loading

dargmuesli Aug 6, 2024

vejja left a comment •

edited

Loading

vejja Aug 3, 2024

P4sca1 Aug 3, 2024

vejja Aug 9, 2024

P4sca1 Aug 9, 2024

Baroshem commented Aug 9, 2024

vejja commented Aug 9, 2024

Baroshem commented Aug 9, 2024

vejja commented Aug 9, 2024

Shana-AE commented Aug 9, 2024

Shana-AE commented Aug 9, 2024

vejja commented Aug 9, 2024

P4sca1 commented Aug 9, 2024 •

edited

Loading

		@@ -215,15 +215,6 @@ export default defineNuxtConfig({
		- `"'nonce-{{nonce}}'"` placeholder: Include this value in any individual policy that you want to be governed by nonce.


		::alert{type="warning"}

Chore/2.0.0 #492

Are you sure you want to change the base?

Chore/2.0.0 #492

Conversation

Baroshem commented Jul 16, 2024 • edited Loading

Types of changes

Description

Checklist:

vercel bot commented Jul 16, 2024 • edited Loading

Baroshem commented Jul 29, 2024

vejja Jul 30, 2024 • edited Loading

Choose a reason for hiding this comment

dargmuesli Jul 31, 2024

Choose a reason for hiding this comment

vejja Jul 31, 2024 • edited Loading

Choose a reason for hiding this comment

dargmuesli Aug 1, 2024 • edited Loading

Choose a reason for hiding this comment

dargmuesli Aug 6, 2024

Choose a reason for hiding this comment

vejja left a comment • edited Loading

Choose a reason for hiding this comment

vejja Aug 3, 2024

Choose a reason for hiding this comment

P4sca1 Aug 3, 2024

Choose a reason for hiding this comment

vejja Aug 9, 2024

Choose a reason for hiding this comment

P4sca1 Aug 9, 2024

Choose a reason for hiding this comment

Baroshem commented Aug 9, 2024

vejja commented Aug 9, 2024

Baroshem commented Aug 9, 2024

vejja commented Aug 9, 2024

Shana-AE commented Aug 9, 2024

Shana-AE commented Aug 9, 2024

vejja commented Aug 9, 2024

P4sca1 commented Aug 9, 2024 • edited Loading

Baroshem commented Jul 16, 2024 •

edited

Loading

vercel bot commented Jul 16, 2024 •

edited

Loading

vejja Jul 30, 2024 •

edited

Loading

vejja Jul 31, 2024 •

edited

Loading

dargmuesli Aug 1, 2024 •

edited

Loading

vejja left a comment •

edited

Loading

P4sca1 commented Aug 9, 2024 •

edited

Loading