在我的SPA中成功验证后,Googles recaptcha会给出"Uncaught SecurityError"

Question

我使用Google新的recaptcha //www.google.com/recaptcha/api.js进行人工验证.我有一个使用Angular的SPA应用程序.成功验证后,对服务器的任何ajax调用都会在控制台中生成此错误消息:

未捕获的SecurityError:阻止具有原始" https://www.google.com "的框架访问具有原始"localhost"的框架.请求访问的帧具有"https"协议,被访问的帧具有"http"协议.协议必须匹配.

在文档的末尾有一个div包含所有iframe recaptchas.删除该div解决了问题,但感觉有点hacky.

难道不应该像旧的recaptcha那样有破坏方法吗？或者什么是正确的解决方案？

Answer 1

您正在使用不同的 http 方法，您可能应该从索引 html 页面中删除 http ：

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

然后创建捕获区域

// 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();

和一个提交功能

$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 || '');
    });
};