I'm not sure why this is happening, and it isn't the usual, mon error of:

Uncaught SecurityError: Block a frame with origin.

The error I'm getting is:

Uncaught DOMException: Blocked a frame with origin "" from accessing a cross-origin frame.

I'm following Google's instructions on how to enable ReCaptcha, but it isn't working for me!

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

My CaptchaSiteKey is being loaded (I debugged and checked).

I'm not sure why this is happening, and it isn't the usual, mon error of:

Uncaught SecurityError: Block a frame with origin.

The error I'm getting is:

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

I'm following Google's instructions on how to enable ReCaptcha, but it isn't working for me!

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

My CaptchaSiteKey is being loaded (I debugged and checked).

• javascript
• recaptcha

Share Improve this question Follow edited Jul 3, 2017 at 17:06 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked May 31, 2017 at 15:10 J86J86 15.3k5050 gold badges145145 silver badges250250 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 0

The same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a bination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.

In other word: recaptcha is an Remote Script resource, and for security issues, your web server not allowing to use external resources code.

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

To allow any resource to access your resource, you can specify:

Access-Control-Allow-Origin: *

To allow https://www.google. to access your resource, you can specify:

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

As explained by the answer here https://stackoverflow./a/29014899/1853802, change all the http(s) protocols on your page to //

e.g.

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

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

This solved it for me.

NB: Remember to clear your cache afterwards.