How to set crossOriginEmbedderPolicy to 'unsafe-none' for images only?

[dataexcess]

My nuxt 3 app needs to load a wasm file and for this it is necessary to set my crossOriginEmbedderPolicy to 'require-corp'. However, when doing that all the images that are coming from external websites are blocked as well. How can I set the crossOriginEmbedderPolicy to unsafe-none for images only?

Thank you

[Baroshem]

Hey,

Check out this docs about COEP from Mozilla https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy#avoiding_coep_blockage_with_cors

[dataexcess]

Thank you! It seems I should simply add crossorigin to the img tag right?
The problem is that those images are part of a component that is from an npm package ... (web3modal).
I could edit the code inside my package, but that's really bad practice. I wonder if there's another way?

[Baroshem]

You should be able to just add the inheritAttrs to the component so that you can pass any custom prop to the component and then image.

Having a crossorigin prop in the image is a good practise in general so I recommend to do that.

[dataexcess]

You should be able to just add the inheritAttrs to the component so that you can pass any custom prop to the component and then image.

Having a crossorigin prop in the image is a good practise in general so I recommend to do that.

I'm sorry I don't see how I could do this without altering the code of web3Modal?

[Baroshem]

Ahh I see.

I have no knowledge about this web3Modal package so not sure about how it was developed. You can try to pass the crossorigin attribute (some components and packages support that). If not, I think you would have to create similiar component on your own that will have this crossorigin attribute. Or you have to disable this rule.

I am affraid that you have to choose one of the options above.

[Baroshem]

#138 (comment)

[dataexcess]

Thanks for the explanation Baroshem and for the link to the other issue.
I contacted the 3th party plugin and asked them to add the crossover attribute to their images.

I don't have control over the component, it is a modal that gets inserted into the dom at action of a button:

(/plugins/web3Connection.js)

import { UseWagmiPlugin, configureChains, createConfig, mainnet, sepolia } from 'use-wagmi'
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    const projectId = config.public.WALLETCONNECT_PROJECT_ID
    const chains = [mainnet, sepolia]

    const { publicClient } = configureChains(chains,
        [w3mProvider({ projectId })]
    )

    const web3config = createConfig({
        autoConnect: true,
        connectors: w3mConnectors({ projectId, chains }),
        publicClient
    })

    let web3Modal = null
    if (process.client) {
        const ethereumClient = new EthereumClient(web3config, chains)
        web3Modal = new Web3Modal({ projectId }, ethereumClient)
    }

    nuxtApp.vueApp.use(UseWagmiPlugin, web3config)

    return {
        provide: {
            web3Modal
        }
    }
})

and I use it in app.vue like so:

<template>
    <button
        @click="connect"
    >
        Connect Wallet
    </button>
</template>

<script setup lang="ts">
import { Web3Modal } from '@web3modal/html'

const { $web3Modal } = useNuxtApp()
const connect = (e:MouseEvent) => { ($web3Modal as Web3Modal).openModal() }
</script>

So not sure how I could in this instance pass the crossorign attribute?

[Baroshem]

There is no way to do that. I thought that it contains some component that you are using directly in your Nuxt app. But this is just a plugin as you descibed. At this point, I cant help you as I have no knowledge about this plugin.

You have to wait for the plugin author to add a support for crossorigin.

If you dont mind, I will close this issue as the solution from the NuxtSecurity has been provided and there is nothing more to be done IMO on the module side. If you will have any other questions in the future, please use the discussions tab instead of the bug issue. It is easier to navigate for me :)

[dataexcess]

Thank you. I guess you are right.
I am awaiting changes from the web3Modal team.
I'll use discussions in the future ;)