谷歌验证码 Uncaught DOMException: 阻止了来源为"https://www.google.com"的框架。

Question

我不确定为什么会出现这种情况，它不是通常的常见错误：

Uncaught SecurityError: Block a frame with origin.

我遇到的错误是：

Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.

我正在按照谷歌的说明启用ReCaptcha，但它对我没有起作用！

// top of the page
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
// then somewhere in the bottom
<div class="g-recaptcha" data-sitekey="@Model.Register.CaptchaSiteKey"></div>

我的 CaptchaSiteKey 已经被加载（我进行了调试和检查）。

- J86

Answer 1

如此答案https://stackoverflow.com/a/29014899/1853802所解释的，将页面上所有的http(s)协议更改为//

例如：

<script src="http://example1.com"></script> => <script src="//example1.com"></script>

<link href="https://example2.com" /> => <link href="//example2.com />

这对我解决了问题。

NB：记得之后清除缓存。

- Ezra Obiwale

---

嗯，也许吧。我有：//www.google.com/recaptcha/api.js。但它正在调用：https://www.google.com/recaptcha/api2/anchor？<= 这里可能出了问题。 - Shawn Rebelo

Answer 2

同源策略是Web应用程序安全模型中的重要概念。根据该策略，Web浏览器允许包含在第一个Web页面中的脚本访问第二个Web页面中的数据，但前提是两个Web页面具有相同的来源。源被定义为URI方案、主机名和端口号的组合。该策略防止一个恶意脚本在一个页面上通过该页面的文档对象模型获取对另一个Web页面上的敏感数据的访问权限。

换句话说：recaptcha是一个远程脚本资源，出于安全考虑，您的Web服务器不允许使用外部资源代码。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

为了让任何资源都能够访问您的资源，您可以指定：

Access-Control-Allow-Origin: *

为了让https://www.google.com能够访问您的资源，您可以指定：

Access-Control-Allow-Origin: https://www.google.com

- Shahar Shokrani

---

这里的问题是，recaptcha iframe 尝试访问我的服务器上的哪个资源？在文档中没有提到这样的要求。 - quickshiftin