Skip to content

Fix CSP blocking WalletConnect — add walletconnect.com to connect-src #745

@realproject7

Description

@realproject7

Bug

WalletConnect wallet connections are blocked by Content Security Policy. Chrome console shows:

```
Connecting to 'https://explorer-api.walletconnect.com/v3/wallets?projectId=...'
violates the Content Security Policy directive: "connect-src 'self' ..."
The action has been blocked.

Fetch API cannot load https://explorer-api.walletconnect.com/...
Refused to connect because it violates the document's Content Security Policy.
```

WalletConnect can't fetch wallet metadata or establish connections.

Fix

Add WalletConnect domains to the CSP `connect-src` directive. Check `next.config.js`, `next.config.ts`, or middleware for CSP headers.

Add these domains:

Also check `img-src` — wallet icons may also be blocked.

Files to investigate

  • `next.config.js` or `next.config.ts` — CSP headers
  • `middleware.ts` — if CSP is set there
  • `vercel.json` — if headers are configured there

Branch

`task/745-csp-walletconnect`

Self-Verification (T3)

  • No CSP errors in Chrome console for WalletConnect domains
  • WalletConnect wallet option works (can initiate connection)
  • Wallet icons load in the RainbowKit modal
  • Other CSP protections still in place (no overly permissive policy)
  • `npm run build` passes

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions