CSP frame-ancestors Issue When Embedding https://secure.walletconnect.org

[sebidelamata]

Discussed in https://github.com/orgs/WalletConnect/discussions/5516

^{Originally posted by sebidelamata November 22, 2024}
Hello WalletConnect team,

I'm encountering a persistent Content-Security-Policy (CSP) issue while attempting to embed https://secure.walletconnect.org within my Vercel-hosted project. Despite following the suggested CSP configuration from your documentation, I consistently receive the following error in the browser console:

Refused to frame 'https://secure.walletconnect.org/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' ..."

Here are the details of my setup and troubleshooting steps so far:

1. Environment Details:
   Hosting: Vercel
   Framework: Next.js
   CSP Configuration Location: vercel.json
   Primary Domains Used:
   Production: https://www.alphaping.xyz
   Local Testing: http://localhost:*
2. CSP Configuration:
   Initially, I followed the CSP configuration provided in the WalletConnect documentation, including:

{
"source": "/(.)",
"headers": [
{
"key": "Content-Security-Policy",
"value": "default-src 'self'; ...; frame-ancestors 'self' https://.vercel.app https://secure-mobile.walletconnect.com https://secure-mobile.walletconnect.org https://secure.walletconnect.org"
}
]
}

The headers applied successfully (verified via curl and the browser's network tab), but the frame-ancestors directive still caused the embedding to fail with the error above.

3. Adjustments Made:
   I extended the frame-ancestors directive to include additional domains for both production and local testing:

"frame-ancestors": "'self' http://localhost:* https://.pages.dev https://.vercel.app https://secure-mobile.walletconnect.com https://secure-mobile.walletconnect.org https://secure.walletconnect.org"
Despite this, the behavior did not change. The embedding of https://secure.walletconnect.org continues to be blocked.

4. Debugging Steps Taken:
   Verified that the CSP headers were applied correctly via curl -I https://www.alphaping.xyz.
   Confirmed through the network tab in an incognito browser window that Vercel serves the correct headers, and no caching issue is at play.
   Tried running in both production (https://www.alphaping.xyz) and local development (http://localhost:*).
   Ensured that my CSP includes all relevant domains listed in the WalletConnect documentation for both frame-ancestors and other directives like script-src, style-src, etc.
5. Observations:
   The headers from curl and the network tab confirm the CSP is set as expected:
   vercel.json

frame-ancestors 'self' http://localhost:* https://.pages.dev https://.vercel.app https://secure-mobile.walletconnect.com https://secure-mobile.walletconnect.org https://secure.walletconnect.org
Despite this, the browser consistently refuses to frame https://secure.walletconnect.org.

Request for Help:
Is there any additional configuration or domain that I might be missing to allow embedding of https://secure.walletconnect.org?

Alternatively, could there be a restriction on the WalletConnect side (e.g., requiring specific referer headers or additional domains) that is not explicitly mentioned in the documentation?

Any guidance on resolving this issue would be greatly appreciated.

Thank you!

[linear]

CR-578 CSP frame-ancestors Issue When Embedding https://secure.walletconnect.org

[sebidelamata]

CR-578 CSP frame-ancestors Issue When Embedding https://secure.walletconnect.org
I can't see this