Googles recaptcha gives "Uncaught SecurityError" after successful validation in my SPA

Question

I use Google new recaptcha, //www.google.com/recaptcha/api.js for human verification. I have a SPA application using Angular. After successful verification any ajax call to server generates this errormessage in console:

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.

At the end of the document there is a div containing all iframe recaptchas. Removing that div solves the problem but that feels a bit hacky.

Shouldn't there be a destroy method like the old recaptcha? Or what is the correct solution?

Answer 1

This is happen to me too, the error appear when I navigate to another view "page" after the recaptcha verification. I found a not elegante solution but it's work, I simply remove the iframe container generated by the captcha api on route change

   YourAPPconfig.run(function ($rootScope) {      
        $rootScope.$on('$routeChangeSuccess', function () {
            // fix recaptcha bug
            $('.pls-container').remove();              
        });
    });

Answer 2

You are using different http methods, you should probably remove the http form your index html page:

<script src="//www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>

Then to create the capture area

// re-render the google capture area on callback of the library scripts
window.onloadCallback = function () {
    if (window.grecaptcha) {
        $scope.recapture1 = grecaptcha.render('recapture1', {
            'sitekey': 'XXXXXXXX'
        });
    }
};

// force captures to be reloaded when opening this page from another page
window.onloadCallback();

And a submit function

$scope.submit = function (url, value) {
    var response = grecaptcha.getResponse($scope.recapture1);
    if (response === 0 || response === '') {
        return false;
    }
    $http.post(url, value).success(function (response) {
        window.alert('Success');
    }).error(function (e) {
        window.alert('There was a problem submitting your request: ' + e.status || '');
    });
};