-
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
Content-Security-Policy: The page’s settings blocked the loading of a resource at inline #218
Comments
Hey Yes, the safer solution would be to use nonce like following https://nuxt-security.vercel.app/security/headers#nonce-support |
I am not sure if i am using this in a correct way I changed setting as below
Then i used useNonce() composable to get valid nonce then injected it as below
It doesn't resolve the error which i mentioned previously
after making change it is also showing 3 warnings as below
|
Hmm interesting. @trijpstra-fourlights would you be up for helping with that? You have proven to be an expert in this area 😉 |
Pfew, a couple of things going wrong here so I'll try to explain what I think is happening! First, an explanation on nonce: By design, the nonce attribute is unique for every request. The middleware will regenerate the nonce and inject it in the headers. If you are talking to an API endpoint served by your nuxt instance (e.g. /api/image/xyz), that means that without additional configuration the nonce attribute on that request will differ from the originating page, resulting in a CORS violation. This extra configuration is (sparsely) described int he documentation relevant part (you would want the However, looking at your OP, it seems that the API is actually served under a different URI (i.e. not by nuxt). That's why you need to add the specific URI to the So, assuming that the image is served by a different service, adding nonce makes no sense as the nonce value is not known by the API. That leaves us only with the initial error which occurs when using
Unfortunately, this is due to how Normally, your options for this are:
However, So, as far as I can tell, the fix for this is that someone implements Lastly, while it makes no sense to add the nonce (as explained above), the actual error your seeing in #218 (comment) is due to you not enabling nonce in the security settings. If you would have added edit (1): fix formatting |
Thanks @trijpstra-fourlights for this comprehensive explanation I raised the issue on Nuxt/Image I hope they will come up with a solution. |
No problem. I've taken a stab at the For reference, this is the 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'"]
}
}
} <template>
<NuxtImg src="https://localhost:8000/api/image/xyz" :nonce="nonce" />
</template>
<script lang="ts" setup>
const nonce = useNonce()
</script> |
Great man @trijpstra-fourlights ! 🚀 Thank you so much. I am looking forward to the development of this issue / feature request :) |
I have added the documentation about it 2f12bd6. Once it will be merged to NuxtImage I will deploy Nuxt Security docs with this instructions :) |
Recently I added Nuxt Security in a Project where i am fetching data from an API URL http://127.0.0.1:8000/api/blog/post/27
While displaying image it throws error
Content-Security-Policy: The page’s settings blocked the loading of a resource at http://127.0.0.1:8000/api/blog/post_image/img12.jpg (“img-src”).
Which i fixed using below settings
and adding
crossorigin="anonymous"
in img tag<img crossorigin="anonymous" :src="postDetail.post_image" />
This fixed the issue but now i am implementing Nuxt Image Module and when i write
<NuxtImg crossorigin="anonymous" :src="postDetail.post_image" />
It throws an error (only on Firefox, doesn't throw error on chrome and edge)
which i fixed using below settings
My concern is, it is considered a security risk, as it can open the door to XSS attacks. It's generally recommended to avoid using 'unsafe-inline' whenever possible.
Is there any other secure way to fix this error ?
The text was updated successfully, but these errors were encountered: