CODEWITHSUNDEEP
javascriptreactjsiframerecaptchasame-origin-policy
Kamran
Kamran

Reputation: 611

Google Recaptcha: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame

I have integrated google recaptcha in vite-react-ts app and created the build of that.

const script = document.createElement('script');
script.src = url;
script.async = true;
script.defer = true;
script.onload = renderCaptcha;
document.body.appendChild(script);

return () => {
    document.body.removeChild(script);
}

const renderCaptcha = () => {
    if (window?.grecaptcha) {
        try {
            if (captchaRef.current.captcha) {
                captchaRef.current = { ...captchaRef.current, pendingCaptcha: true };
                window?.grecaptcha.reset(captchaRef.current.captcha);
            } else {
                const captcha = window?.grecaptcha.render(captchaContainerRef.current, {
                    sitekey: CAPTCHA_V2_KEY,
                    callback: () => {
                        captchaRef.current = { ...captchaRef.current, pendingCaptcha: false };
                    },
                    'expired-callback': (data: any) => {
                        console.log("expired")
                        console.log(data)
                    },
                    'error-callback': (error: any) => {
                        console.log("error")
                        console.log(error)
                    }
                });
                captchaRef.current = { ...captchaRef.current, captcha, pendingCaptcha: true };
            }
        } catch (e) {
            console.error('captcha generation error', e);
        }
    }
};

JSX

 <div ref={captchaContainerRef} id="signin_captcha" />

Now i am trying to load this build using script tag in other app.

I am getting the error Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.

Upvotes: 1

Views: 1784

Answers (2)

Stellar Sword
Stellar Sword

Reputation: 6216

Google's ReCAPTCHA and Chrome team are in conflict. They've made some broken code, especially v2 of recaptcha.

Even if you direct the api.js to http:// it redirects it internally and then tries to scan for a window.yoursite.a-12945u12 type of property and it can't because it's trying to read it from an iframe it places into your website.

Webpack dev server doesn't allow it even with "cross-origin allowed".

Neither does any AWS infrastructure settings to allow cross-origin, or specifically https://google.com

Uncaught DOMException: Failed to read a named property 'a-9tu39a56hre3' from 'Window': Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.
at Q.Yv (https://www.gstatic.com/recaptcha/releases/MHBiAvbtvk5Wb2eTZHoP1dUd/recaptcha__en.js:1004:346)
at Array.<anonymous> (https://www.gstatic.com/recaptcha/releases/MHBiAvbtvk5Wb2eTZHoP1dUd/recaptcha__en.js:531:92)
at Object.init (https://www.gstatic.com/recaptcha/releases/MHBiAvbtvk5Wb2eTZHoP1dUd/recaptcha__en.js:1011:141)
at https://www.google.com/recaptcha/api2/bframe?hl=en&v=MHBiAvbtvk5Wb2eTZHoP1dUd&k=6LcrDmQpAAAAABDVugX2X1AuLCoiEBNR5PETxkP5:184:30

Solution: Build your own captcha with better code and let's reduce our reliance on Google's badly tested products.

Upvotes: 1

Kamran
Kamran

Reputation: 611

Did some research to find a way, looks like its not possible as its a blocker from browser itself.

Only solution i can do now is to attach the recaptcha with document body intead of my app, which will give access to DOM of recaptcha and it will work.

Upvotes: 1

Related Questions