react-google-recaptcha
react-google-recaptcha copied to clipboard
dozoisch
Uncaught SecurityError in Google iframe when unmounting
When the component gets unmounted (e.g., when navigating to a different page using react-router), an exception occurs:
Uncaught SecurityError: Blocked a frame with origin "https://www.google.com" from
accessing a frame with origin "localhost". The frame requesting access has a protocol
of "https", the frame being accessed has a protocol of "http". Protocols must match.
Possible solution is to remove the iframe container inserted by the reCAPTCHA script in componentWillUnmount.
Just curious, does that work when going back? Or when rerendering the component? Just want to make sure that it rerender the iframe correctly.
It appears to work. I am not doing any server-side rendering or fancy stuff. With react-router the script is injected each time the page is visited (this is what your async loader script is doing, I believe). The problem with the exception only occurs if the user has completed the "challenge", and then leaves the page. Destroying the iframe solves this, and doesn't affect the performance of the component in subsequent page visits. I.e., I can run the captcha and then open another page, come back and start over again.
The problem is mentioned here: https://developers.google.com/recaptcha/docs/faq
I'm getting an uncaught SecurityError: blocked a frame with origin "https://www.google.com" from accessing a frame with origin "
". What should I do? This typically occurs if the reCAPTCHA widget HTML element is programmatically removed sometime after the end user clicks on the checkbox. We recommend using the grecaptcha.reset() javascript function to reset the reCAPTCHA widget.
I tried this solution, but couldn't get it to work. Removing the iframe was the only solution that worked for me. Some threads on StackOverflow suggested this as well.
http://stackoverflow.com/questions/27402217/googles-recaptcha-gives-uncaught-securityerror-after-successfull-validation-in
Alas, no. Not from my side, at least. I think we got stuck trying to figure out a way to relate the html container injected by Google's code to the captcha for a specific component. As mentioned by @dozoisch in my pull request https://github.com/dozoisch/react-google-recaptcha/pull/8, it is possible to simply remove all the containers, but it doesn't really solve to the problem.
@johanneshilden I have a single recaptcha will the patch work ?
@dozoisch Is there a plan to merge the patch, maybe add some parameter to not trigger for users who have more then one captcha?
@bobiblazeski Assuming Google hasn't changed the widget in some way that would affect this, the second solution I suggested should still work as long as you only have one component:
componentWillUnmount() {
Array.prototype.slice.call(document.getElementsByTagName('IFRAME')).forEach(element => {
if (element.src.indexOf('www.google.com/recaptcha') > -1 && element.parentNode) {
element.parentNode.removeChild(element);
}
});
}