How to allow for images and scripts from external domains?

[JordashTalon]

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:

export default defineNuxtConfig({
  modules: ['nuxt-security'],
  security: {
    headers: {
      contentSecurityPolicy: {
        'default-src': ['*'],
      }
    }
  },
})

But it didn't seem to have any effect.

[Baroshem]

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 :)

[JordashTalon]

Here's the link
https://stackblitz.com/edit/github-jmgkdp?file=.stackblitz/nuxt.config.ts

[JordashTalon]

@Baroshem Did that link work or did I make it wrong?

[Baroshem]

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 nuxt.config.ts file and more specifically the security object for global configuration or in routeRules if you use the per-route approach like following:

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 crossorigin attribute to your image tag to instruct the browser that this resource is being fetched from another origin like following:

<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 :)

[Baroshem]

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.

[Baroshem]

Hey @JordashTalon

Did my answer helped you resolve your issue?

[JordashTalon]

@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:

security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': ['*'],
        'script-src': ['*'],
      }
    }
  }

And it doesn't seem to be working.

Can't get external scripts to load successfully either with direct urls or wildcard.

[Baroshem]

Hey @JordashTalon

Adding a crossorigin attribute to image is a good pattern for having content security policy. If you cannot use it that way (although I recommend using it that way as it is a native browser approach) you can always disable this directive like:

      contentSecurityPolicy: {
        'img-src': false
      },

Or you can enable it globally for all https pages like:

      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

[JordashTalon]

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?

[Baroshem]

@JordashTalon

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?

[JordashTalon]

@Baroshem

Here's the error I get when trying to include external scripts in nuxt.config.ts

The resource at “https://js.pusher.com/7.2/pusher.min.js” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#

The resource at “https://widget.cloudinary.com/v2.0/global/all.js” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#

export default defineNuxtConfig({
  mode: 'universal',
  ssr: true,

  app: {
    head: {
      script: [
        {src: 'https://js.pusher.com/7.2/pusher.min.js'},
        {src: "https://widget.cloudinary.com/v2.0/global/all.js"},
      ]
    }
  }

});

[JordashTalon]

Also looks like the image fix stopped working too, I have this config:

modules: [
    '@vueuse/nuxt',
    'nuxt-security',
  ],

  security: {
    headers: {
      contentSecurityPolicy: {
        'img-src': false,
      }
    }
  },

And looks like external images are still blocked with the same reason.

[alexbidenko]

@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 crossorigin="anonymous" attribute in img tag. With it, you can change img-src in contentSecurityPolisy to 'img-src': ['https://upload.wikimedia.org'].

Or you can add crossOriginEmbedderPolicy: false, to nuxt config in security config (link) - but it is not well.

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 img tag using relative path: /wikipedia/commons/thumb/1/15/Cat_August_2010-4.jpg/272px-Cat_August_2010-4.jpg

Or you can also setup it in web-server like nginx. Proxy (with any way) also means you can remove img-src disabling in contentSecurityPolisy.

Or one more way you can use nuxt-image for external images (link). With nuxt-image you also can remove img-src disabling in contentSecurityPolisy.

[Baroshem]

That is a very good explanation @alexbidenko1998 , thank you for that!

[Baroshem]

@JordashTalon

Does that answer your question?

[JordashTalon]

Yeah good for now