CODEWITHSUNDEEP
javascriptrecaptcha
J86
J86

Reputation: 15307

Google ReCaptcha Uncaught DOMException: Blocked a frame with origin "https://www.google.com"

I'm not sure why this is happening, and it isn't the usual, common 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.com" 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.com/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).

Upvotes: 9

Views: 11663

Answers (2)

Shahar Shokrani
Shahar Shokrani

Reputation: 8762

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 combination 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.org/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.com to access your resource, you can specify:

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

Upvotes: 0

Ezra Obiwale
Ezra Obiwale

Reputation: 1968

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

e.g.

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

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

This solved it for me.

NB: Remember to clear your cache afterwards.

Upvotes: 0

Related Questions