Recaptcha Security Alert: Frame from origin "https://www.google.com" has been blocked due to a SecurityError

Recently, I encountered an issue while using Google reCAPTCHA 2nd version. After sending form data to the server via AJAX, I received this error message:

"Uncaught SecurityError: Blocked a frame with origin "https://www.google.com" from accessing a frame with origin "http://localhost:14656". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match."

I have included the following script in my layout file: src='//www.google.com/recaptcha/api.js' async defer

This project is built on ASP MVC 4.0.

Can anyone provide assistance?

Answer №1

To update your layout script, modify the src attribute to http://www.google.com/recaptcha/api.js

The reason for the error is that the src link is using https while your web application is using http.

Answer №2

Give this a shot:

<script src='https://www.yahoo.com/recaptcha/api.js'></script>

Then implement the following code:

<div class="y-recaptcha" data-sitekey="YOUR UNIQUE SITE KEY"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The post body is incomplete and is lacking the necessary parameter "To" that

It seems there might be a configuration issue either in the header or the body. Should I make changes to the headers or is it possible that the body is misconfigured? const axios = require('axios'); const url = '/my_url'; const aut ...

What is the reason for the original list being affected when the cloning list is created using a

I am trying to convert an object inside an array into a string using the code below. However, I can't seem to understand why it's affecting the original array. I thought that 'slice' was supposed to clone the array? var cloned = $scope ...

Nothing is being displayed on the screen via React

Initially, I used a function instead of a class, and the code was functioning up to a certain point. However, now it is not displaying anything at all. In my VehiclesList.js, I am generating 10 random vehicles. Here is the code snippet: import React from ...

How to safely add multiple objects to an array in TypeScript & React without replacing existing objects - Creating a Favorites list

I'm in the final stages of developing a weather application using TypeScipt and React. The last feature I need to implement is the ability for users to add queried locations to a favorites list, accessed through the "favorites" page. By clicking on a ...

Streamlined payment with PayPal Express Checkout via AJAX

I am working on integrating a JQuery client with PayPal's Express Checkout functionality for credit card transactions. The process involves the client presenting a form to the user, initiating a purchase via AJAX to the server, executing SetExpressChe ...

Redirecting with VueJS Router to a specific path on the server

I have set up my router with the following configurations: export default new Router({ mode: 'hash', linkActiveClass: 'open active', scrollBehavior: () => ({ y: 0 }), routes: [ { path: '/', .... In ...

What is preventing me from displaying the results on the webpage?

Currently, I am utilizing Express alongside SQLite and SQLite3 modules. However, upon running the server, the data fails to display on the initial request. It is only after a page refresh that the data finally appears. I attempted a potential solution by ...

Basic inquiry about Ajax

Would you like to know a simple solution for refreshing a specific area of your website using ajax? Instead of having JavaScript constantly checking for changes on the server, is there a way for the server to send data when a certain event occurs? Imagine ...

The array position with the index of "0" will be accessed after using JSON.parse

I need help parsing this type of data: { "roads": [{ "road": "*IndustrialArea1", "house_number_required": true }, { "road": "Turnoff Kienbaum", "house_number_required": true }, { "road": "Maple Avenue (Eggersdorf)", "house_numb ...

Using AJAX to upload an image

I have two variables named src and image, var src = $("#img_tag").attr('src'); var image = new Image(); I am trying to pass the image variable to a public function in php for uploading. I'm unsure of what exactly needs to be passed - is it ...

Arranging an array of objects based on dual criteria

Sorting an array of objects based on 2 conditions is my current challenge First, I need to sort by value If the names are the same, I want to display them next to each other in ascending order of their values For a visual example, check out this demo: ht ...

The CSS method will not function properly on Safari when targeting the specific ID

that.displayIcon = that.scrollPosition / that.headerHeight $('#icon').css({'opacity':that.displayIcon}) that.rotateIcon = Math.min(1,that.scrollPosition/that.headerHeight) $('#icon').css({'transform':'rot ...

What is the procedure for disposing of the bitmap in Form1 and what is the recommended interval speed for setting Timer1?

Within a new class, I've implemented the following method: public Bitmap CaptureWindowToMemory(IntPtr handle) { Image img = CaptureWindow(handle); Bitmap bmp = new Bitmap(img); bmp.Save("foo.png", System.Drawing.Imaging.ImageFormat.Png); ...

Setting the backEnd URL in a frontEnd React application: Best practices for integration

Hey there - I'm new to react and front-end development in general. I recently created a RESTful API using Java, and now I'm wondering what the best way is to specify the backend URL for the fetch() function within a .jsx file in react. Currently, ...

The program encountered an error: Unable to access the 'toDate' property of an undefined value

Encountering an error in my Firebase project while running a Firebase function. The specific error message is: Cannot read property 'toDate' of undefined, related to converting admin.firestore.Timestamp to Date format. Any suggestions on how to ...

Creating head tags that are less bouncy

After running my code, I noticed that the headlines didn't transition smoothly - they seemed to jump rather than flow seamlessly. To address this issue, I attempted to incorporate fadeIn and fadeOut functions which did improve the smoothness slightly. ...

Localization support is working partially in a Node Express application that uses Handlebars for templating

Whenever I visit a URL with the ?lang=en query parameter, the English translation is never used. However, the Hungarian text changes work perfectly fine, displaying text to test on Hungarian in the default "hu" language without any issues. What could be ca ...

What is the availability of WSS and MOSS libraries within the .NET framework?

Which libraries are used in the .NET framework for working with SharePoint and what is their individual purpose? ...

Modify this statement to ensure it does not consistently result in being 'true'

Why is there an issue detected by SonarQube in this specific part of the code? https://i.sstatic.net/rIwEB.png Upon reviewing the code, it appears that the value may not always be true. public static void WriteJson(object value) { decimal decimalVal ...

New React Component Successfully Imported but Fails to Render

I've encountered issues with the code I'm currently working on. Dependencies: React, Redux, Eslinter, PropTypes, BreadCrumb Within a view page, I am importing components from other files. The current structure is as follows: import Component ...