Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

docs: update information about Nuxt Image #503

Merged
merged 3 commits into from
Aug 1, 2024
Merged

docs: update information about Nuxt Image #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6bc25d0
Clarified when "require-corp" is the default value
Simlor Jul 18, 2024
2d51282
Merge pull request #493 from Simlor/patch-3
Baroshem Jul 26, 2024
a2425ce
docs: update information about Nuxt Image
P4sca1 Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/content/1.documentation/2.headers/3.crossOriginEmbedderPolicy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ Allows the document to fetch cross-origin resources without giving explicit perm

### `require-corp`

This is the default value. A document can only load resources from the same origin, or resources explicitly marked as loadable from another origin. If a cross origin resource supports CORS, the crossorigin attribute or the Cross-Origin-Resource-Policy header must be used to load it without being blocked by COEP.
In `strict` mode, this is the default value. A document can only load resources from the same origin, or resources explicitly marked as loadable from another origin. If a cross origin resource supports CORS, the crossorigin attribute or the Cross-Origin-Resource-Policy header must be used to load it without being blocked by COEP.

### `credentialless`

Expand Down
39 changes: 5 additions & 34 deletions docs/content/1.documentation/5.advanced/2.faq.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,43 +245,14 @@ Next, you need to configure your img tag to include the `crossorigin` attribute:
ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/138#issuecomment-1497883915).
::

## Using nonce with CSP for Nuxt Image
## Nuxt Image

Having securely configured images is crucial for modern web applications. Check out how to do it below:

```ts
// nuxt.config.ts

security: {
nonce: true,
headers: {
contentSecurityPolicy: {
'img-src': ["'self'", 'data:', 'https:'],
'script-src': [
"'self'", // backwards compatibility for older browsers that don't support strict-dynamic
"'nonce-{{nonce}}'",
"'strict-dynamic'"
],
'script-src-attr': ["'self'"]
}
}
}
```

And then configure `NuxtImg` like following:

```vue
<template>
<NuxtImg src="https://localhost:8000/api/image/xyz" :nonce="nonce" />
</template>

<script lang="ts" setup>
const nonce = useNonce()
</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.
Using nonces for inline event handlers is not supported, so currently there is no workaround.

::alert{type="info"}
ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/218#issuecomment-1736940913).
ℹ Read more about it [here](https://github.com/nuxt/image/issues/1011#issuecomment-2242761992).
::

## Issue on Firefox when using IFrame
Expand Down
Loading