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