search

basaran / svelte-recaptcha-v2

Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
https://basaran.github.io/svelte-recaptcha-v2/demo
MIT License
42 stars 14 forks source link

CORS Issue with the re-captcha #8

Open THGAmanowski opened 2 years ago

THGAmanowski commented 2 years ago

Hello!

Having some issues using the re-captcha in my svelte app. I manage to get the ready state to fire, but then all I get is this error: 

caught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.
    at Ci.Yy.w8 (https://www.gstatic.com/recaptcha/releases/85AXn53af-oJBEtL2o2WpAjZ/recaptcha__en.js:721:217)
    at Array.<anonymous> (https://www.gstatic.com/recaptcha/releases/85AXn53af-oJBEtL2o2WpAjZ/recaptcha__en.js:40:284)
    at Object.init (https://www.gstatic.com/recaptcha/releases/85AXn53af-oJBEtL2o2WpAjZ/recaptcha__en.js:730:258)
    at https://www.google.com/recaptcha/api2/bframe?hl=en&v=85AXn53af-oJBEtL2o2WpAjZ&k=6LfetkseAAAAAM2BZdN4nLPitmM3skOeY9_jkqyq:184:30

Has anyone seen this before? I've tried adding the captcha as a div I render on it's own but I get the same issue in the end.

Does it need to be hosted on a web server rather than just localhost? Not sure why it would work for others.

basaran commented 2 years ago

Hi, the cors is probably coming from your vite dev server. Check your svelte config and look for a cors setting, may be you have something there?

THGAmanowski commented 2 years ago

Hi, the cors is probably coming from your vite dev server. Check your svelte config and look for a cors setting, may be you have something there?

Thanks for the quick reply! I'm not entirely sure where I'd be looking for such a config. The only things we have are rollup configs.

basaran commented 2 years ago

these are usually in the svelte.config.js, are you using a standard project or do you bundle with rollup yourself with custom configuration?

basaran commented 2 years ago

Here is the link to svelte vite config from the docs:

https://kit.svelte.dev/docs/configuration#vite

THGAmanowski commented 2 years ago

It's a shareable web component library, so we have some rollup configs we've added, a Form.wc.svelte component and a App.svelte for demoing of this component. We don't have a svelte vite config.

I've managed to get the captcha working on the demo if I put it in App.svelte - but as soon as it's in the Form.wc.svelte web component and I include that component in App.svelte I get the cors error.