-
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
How to allow for images and scripts from external domains? #138
Comments
Hey, Could you please set up a stackblitz link with the issue you are experiencing? I will be glad to show you on the example how to make it work :) |
@Baroshem Did that link work or did I make it wrong? |
Hey, Yes, the link is good. It does not work on Stackblitz but I was able to reproduce it on the local environment. Basically, the nuxt-security module sets some security directives that blocks fetching resources from differen host (in your case wikimedia). To make it work, you have to add this domain to your export default defineNuxtConfig({
modules: ['nuxt-security'],
security: {
headers: {
contentSecurityPolicy: {
'img-src': ['https://upload.wikimedia.org'], // <--- add the domain you want to fetch the image from here
}
}
}
}) And also, you will need to add a <template>
<div>
<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 // <-- Here
/>
</div>
</template> You can read more about Content Security Policy (img-src) here and about Cross-Origin Embedder Policy here I hope that it makes sense. Let me know if that works for you :) |
To make stackblitz repro work you need to have this configuration enabled: security: {
headers: {
crossOriginResourcePolicy: 'cross-origin',
contentSecurityPolicy: false,
xFrameOptions: false,
},
}, Otherwise it will fail. This is some problem on Stackblitz side with following directives. |
Hey @JordashTalon Did my answer helped you resolve your issue? |
@Baroshem Yeah that worked, is there anyway to get around adding crossorigin to all of the image tags? That would make the plugin not feasible for us to use. Also it's working for specific urls but how can I allow all external images, I tried this:
And it doesn't seem to be working. Can't get external scripts to load successfully either with direct urls or wildcard. |
Hey @JordashTalon Adding a contentSecurityPolicy: {
'img-src': false
}, Or you can enable it globally for all contentSecurityPolicy: {
'img-src': ['https:']
}, script src is not working yet as it requires some work on the generated nuxt scripts. For details check out #136 |
Ok great, that seems to be working, for the script src? Is there currently anyway to allow external scripts while still having the plugin activated or is that currently not possible? |
I think that right now you can add any script you like because the script src directive is not enabled yet as I need to configure Nuxt to use it. If it does not work, could you provide more details like error, nuxt config file, etc? |
Here's the error I get when trying to include external scripts in nuxt.config.ts
|
Also looks like the image fix stopped working too, I have this config:
And looks like external images are still blocked with the same reason. |
@JordashTalon , you don't have a Content-Security-Policy error, but ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep (link) - this means that your site is blocking external resources. You can solve this problem with Or you can add As alternative solution you can use proxy for external resourses. With nuxt you can use nitro routerRules (link): nitro: {
routeRules: {'/wikipedia/**': {proxy: 'https://upload.wikimedia.org/wikipedia/**'}},
}, And in the Or you can also setup it in web-server like nginx. Proxy (with any way) also means you can remove Or one more way you can use nuxt-image for external images (link). With nuxt-image you also can remove |
That is a very good explanation @alexbidenko1998 , thank you for that! |
Does that answer your question? |
Yeah good for now |
I tried installing & setting up the module but it blocks all external images and scripts, how do I allow external images & scripts or allow specific domains?
I tried this to test in nuxt.config.ts:
But it didn't seem to have any effect.
The text was updated successfully, but these errors were encountered: