Refused to frame 'https://secure.walletconnect.org/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' http://localhost:* https://*.vercel.app https://*.ngrok-free.app https://secure-mobile.walletconnect.com

[moneta]

Hi,

I implemented the Web3Model to connect wallet using smart wallet (X, Gmail...). It works perfectly in my localhost. However, when I deployed to the production environment, the iframe that is pops up when I click on X icon throws this error:

Refused to frame 'https://secure.walletconnect.org/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' http://localhost:* https://*.vercel.app https://*.ngrok-free.app https://secure-mobile.walletconnect.com

This comes from the GET request to https://secure.walletconnect.org/sdk?projectId=...

In the response header of this request it set the CSP as follows:
Content-Security-Policy: frame-ancestors 'self' http://localhost:* https://*.vercel.app https://*.ngrok-free.app https://secure-mobile.walletconnect.com; object-src 'none'

It seems this is something inside WalletConnect libs where it sets the CSP frame-ancestors values. And it is missing https://secure.walletconnect.com. It seems a bug to me, but I tried to search in these discussions and found no report about it.

Any advices. Thank you very much.

[moneta]

I found the issue. The domain should be verified with the project ID. Then wallet connect will add my domain (for example *.example.com) to its CSP and allow the script to be loaded

[jbg469]

how did you verify it?

[jothamardel]

@jbg469 go to this link: https://cloud.reown.com/ and sign-in to your dashboard.

• On your dashboard, scroll down to Project Domains

Then, follow the instruction to allow & verify domains:
Follow this link for more instructions: https://docs.reown.com/cloud/verify