在我的 SPA 中成功验证后，Google 的 recaptcha 给出了“Uncaught SecurityError”答案

【问题标题】：Googles recaptcha gives "Uncaught SecurityError" after successful validation in my SPA在我的 SPA 中成功验证后，Google 的 recaptcha 给出了“Uncaught SecurityError”
【发布时间】：2015-02-08 17:15:15
【问题描述】：

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

未捕获的安全错误：阻止来源为“https://www.google.com”的框架访问来源为“localhost”的框架。请求访问的帧具有“https”协议，被访问的帧具有“http”协议。协议必须匹配。

在文档的末尾有一个包含所有 iframe 验证码的 div。删除该 div 可以解决问题，但感觉有点 hacky。

不应该有像旧recaptcha这样的destroy方法吗？或者什么是正确的解决方案？

【问题讨论】：

标签： javascript recaptcha

【解决方案1】：

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

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

【讨论】：

感谢您提供此解决方案。它就像一个魅力。不管你使用什么路由器框架，当移动到不同的页面时，记得用 pls-container 类删除 dom。

【解决方案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 || '');
    });
};

【讨论】：

感谢您的评论，但已经从 src 属性中删除了 http。请注意，我使用 http，我怀疑 Google 将 http 视为安全问题。