Question

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

Uncaught SecurityError：阻止了一个包含起源的框架＆＃34; https://www.google.com＆＃34;从访问带有起源的框架＆＃34; localhost＆＃34;。请求访问的帧具有＆＃34; https＆＃34;的协议，被访问的帧具有＆＃34; http＆＃34;的协议。协议必须匹配。

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

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

Answer 1

这也发生在我身上，当我导航到另一个视图时出现错误＆＃34; page＆＃34;重新验证后。我找到了一个不是优雅的解决方案，但它的工作，我只是删除了路由更改时验证码api生成的iframe容器

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

Answer 2

您正在使用不同的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 || '');
    });
};

在我的SPA中成功验证后，Googles recaptcha会给出“Uncaught SecurityError”

2 个答案: