[bug] SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

[vietddude]

Link to minimal reproducible example

https://github.com/WalletConnect/web-examples

Summary

Got this error while click to button Open Connect Modal clicking

List of related npm package versions

"@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@fontsource/roboto": "^5.0.8", "@mui/material": "^5.15.6", "@tanstack/react-query": "^5.17.19", "@wagmi/core": "^2.5.0", "@web3modal/wagmi": "4.0.0-3a0b2d54", "axios": "^1.6.5", "next": "^14.1.0", "react": "^18", "react-dom": "^18", "react-hook-form": "^7.49.3", "viem": "^2.5.0", "wagmi": "^2.5.0"

[vietddude]

Hi can you try updating to 4.0.0-alpha.3 and clearing cache?

Updated to 4.0.0-alpha.3 and cleared cache, but still facing the issue.

[davidkarim]

I believe I am seeing the same issue. I am trying to do a write operation on a smart contract and it looks like the browser is trying to open a modal. Not sure. Oddly, I did see a scenario where I got a popup on my mobile Metamask to confirm the transaction. That happened once, I am not seeing any response on my mobile Metamask. Looks like my desktop browser is trying to show a modal with a QR code but the transaction is just timing out. I have:

"@web3modal/wagmi": "4.1.1",
"wagmi": "^2.5.11",

I have the following error on my browser's console:

[Error] Blocked a frame with origin "https://XXX-XXX-XX-XX-XXX.ngrok-free.app" from accessing a frame with origin "https://verify.walletconnect.org". Protocols, domains, and ports must match.

[felipelincoln]

same problem using ethers

{
    "@web3modal/ethers": "^4.1.8",
    "ethers": "^6.11.1"
}

[manish252488]

Any updates ?? im facing the same issue here

[felipelincoln]

This is the workaround I am using for now:

const { open } = useWeb3Modal();

function handleOpen(){
  try{
    open();
  } catch(_e){
    open();
  }
}

Because for me, calling open() twice it works. 🤷

[glitch-txs]

This is Verify API and doesn't affect the functionality of the SDK, it is correct if the domain doesn't match with the verified one, but this error should go away on production. So for staging non-verified links this error is expected.

[felipelincoln]

This is Verify API and doesn't affect the functionality of the SDK, it is correct if the domain doesn't match with the verified one, but this error should go away on production. So for staging non-verified links this error is expected.

@glitch-txs this is happening to me on production. Can you provide more details on how to fix it? I have the metadata.domain matching my production domain

[glitch-txs]

should be metadata.url

[felipelincoln]

should be metadata.url

sorry, yeah, I meant I have the metadata.url matching my prod url. this is what I have:

const ethersConfig = defaultConfig({
  metadata:  {
      name: 'Some Name',
      description: 'Some description',
      url: 'https://<mysubdomain>.<mydomain>.io/'
      icons: [''],
    },
  rpcUrl: '<rpc>',
  defaultChainId: 1,
})

[glitch-txs]

What's your project ID?

[felipelincoln]

1914112795a676dc1449b23b8bd1dc9e

[glitch-txs]

@felipelincoln you need to verify your domain: https://docs.walletconnect.com/cloud/verify

[manish252488]

This is the workaround I am using for now:

const { open } = useWeb3Modal();

function handleOpen(){
  try{
    open();
  } catch(_e){
    open();
  }
}

Because for me, calling open() twice it works. 🤷

nice work arround, works for me

[felipelincoln]

@glitch-txs got it, thanks. Is there a way to disable the verify api though?

[glitch-txs]

Is there a way to disable the verify api though?

No because it's a security layer for wallets, but we will add the option to add more domains and whitelist localhost too

[JohnCido]

Any update on this? This is blocking me from test it in local environment.