CSP frame-ancestors Issue When Embedding https://secure.walletconnect.org #5516
Unanswered
sebidelamata
asked this question in
Developer Support
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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:
Hosting: Vercel
Framework: Next.js
CSP Configuration Location: vercel.json
Primary Domains Used:
Production: https://www.alphaping.xyz
Local Testing: http://localhost:*
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.
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.
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.
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!
Beta Was this translation helpful? Give feedback.
All reactions