-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
133 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
# Frequently Asked Questions | ||
|
||
Find answers for difficult questions. | ||
|
||
--- | ||
|
||
## Testing CORS configuration | ||
|
||
In the default configuration for CORS in Nuxt Security module, only the request that is coming from your origin (the same host by default) will be accepted and others will be rejected. | ||
|
||
To test it, run your application and then in another test application running on a different port, send a request to the first app. You will get the CORS error there. | ||
|
||
::alert{type="info"} | ||
ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/208). | ||
:: | ||
|
||
## Set Content-Security-Policy-Report-Only | ||
|
||
The HTTP Content-Security-Policy-Report-Only response header allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of JSON documents sent via an HTTP POST request to the specified URI. | ||
|
||
You can add it to your project like this: | ||
|
||
```ts | ||
// nuxt.config.ts | ||
|
||
routeRules: { | ||
'/**': { | ||
headers: { | ||
'Content-Security-Policy-Report-Only': '<YOUR_DESIRED_VALUE>' | ||
}, | ||
}, | ||
}, | ||
``` | ||
|
||
::alert{type="info"} | ||
ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/193#issuecomment-1669009189). | ||
:: | ||
|
||
## Conflicting headers with Firebase Auth | ||
|
||
When working with Firebase Auth, and more specifically the `signInWithPopup` method, you would need to disabled the following headers that are set by Nuxt Security automatically: | ||
|
||
```ts | ||
// nuxt.config.ts | ||
|
||
security:{ | ||
headers: { | ||
crossOriginOpenerPolicy: false, | ||
crossOriginEmbedderPolicy: false, | ||
} | ||
} | ||
``` | ||
|
||
::alert{type="info"} | ||
ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/127). | ||
:: | ||
|
||
## Allowing images and scripts from external domains | ||
|
||
In several situations you will need to allow fetching images from external domains. Here is how you can do that: | ||
|
||
```ts | ||
// nuxt.config.ts | ||
|
||
security: { | ||
headers: { | ||
contentSecurityPolicy: { | ||
'img-src': ['https://upload.wikimedia.org'], // <--- add the domain you want to fetch the image from here | ||
} | ||
} | ||
} | ||
``` | ||
|
||
Next, you need to configure your img tag to include the `crossorigin` attribute: | ||
|
||
```html | ||
<img | ||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Cat_August_2010-4.jpg/272px-Cat_August_2010-4.jpg" | ||
alt="Cat Image Here" | ||
crossorigin | ||
/> | ||
``` | ||
|
||
::alert{type="info"} | ||
ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/138#issuecomment-1497883915). | ||
:: | ||
|
||
|
||
## Using nonce with CSP for 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:'], | ||
'style-src': ["'self'", "'nonce-{{nonce}}'"], | ||
'script-src': [ | ||
"'self'", // backwards compatibility for older browsers that don't support strict-dynamic | ||
"'nonce-{{nonce}}'", | ||
"'strict-dynamic'" | ||
], | ||
'script-src-attr': ["'self'", "'nonce-{{nonce}}'", "'strict-dynamic'"] | ||
} | ||
} | ||
} | ||
``` | ||
|
||
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> | ||
``` | ||
|
||
::alert{type="info"} | ||
ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/218#issuecomment-1736940913). | ||
:: |