SSL and localhost causing CORS Access Denied in IE11 and later versions

Has anyone successfully managed to request local resources via AJAX in IE over SSL without encountering an "access denied" error?

In a nutshell:

I'm using AJAX to fetch JSON from a local web service that is encrypted when served over HTTPS to avoid any security warnings. The remote site, mysite.com, is receiving information from https://localhost/.

The CORS headers are correctly set up and everything works smoothly in Chrome and Firefox. However, in IE, while typing https://localhost directly into the address bar works fine, making an AJAX request triggers a security setting that denies access. This issue is discussed in part here:

Access denied in IE 10 and 11 when ajax target is localhost

The suggested solution is adding the requesting domain (mysite.com) to trusted sites. While this fix works, we prefer not requiring user intervention. Referring users to a knowledge base article on how to do this isn't an ideal user experience. Other suggestions mentioned for resolving this issue have their limitations.

Further research led me to:

CORS with IE, XMLHttpRequest and ssl (https)

This thread proposed a wrapper for AJAX requests in IE, but it's now obsolete as IE11 deprecated the XDomainRequest API. Trying to bypass this limitation by adding a void onProgress handler to the XDR object is no longer viable.

So, has anyone encountered:

a) A workaround to allow these requests without altering trusted sites in IE? An updated version of the workaround from the second link perhaps?

b) Alternatively, a method to prompt users to add the site to their trusted zone? Imagine a message like "mysite.com wants to be added to your trusted zones. Confirm Yes/No" allowing users to grant permission without manually adjusting settings?

javascriptajaxinternet-explorersslcors

Answer №1

To enhance security measures, Internet Explorer's XDomainRequest object restricts access (see #6 here) when crossing from the Intranet Zone to the Internet Zone. It is probable that this restriction has been integrated into IE10+ CORS implementation for the XMLHTTPRequest object.

An alternative method that might help is switching from using localhost to 127.0.0.1, as the latter falls under the Internet Zone category rather than Intranet Zone, thus preventing inter-zone communication.

Nevertheless, it is important to note that Internet Explorer 10+ will impede all connections to the local computer (regardless of address) if a website is operating in Enhanced Protected Mode (EPM)--refer to "Loopback blocked" in this article. At present, IE only utilizes EPM for Internet sites during Metro/Immersive browsing, not in Desktop mode; however, this could change in upcoming updates.

There is no direct means of displaying the Zones-Configuration UI or automatically transferring a site between zones using JavaScript. Despite this limitation, having a local server implies client-side code execution, enabling you to potentially utilize the relevant API to adjust Zone Mapping on the client side. Remember, any modifications should be clearly authorized by the user to avoid triggering Windows Defender and other security software to flag your actions as potential threats.

In conclusion, employing the IP address workaround may resolve issues on various platforms, though it may not apply universally.

Answer №2

If you find yourself dealing with two separate domains, one clever solution could involve creating an application that serves as a proxy for directing requests as needed.

Assuming you have control over example.com and wish to accommodate users who utilize their own localhost service, the task becomes more complex. You would need to establish specific requirements for what they bring to the table.

However, if you are in charge of what operates on localhost and desire the ability to access example.com while having it connect to the localhost service, consider setting up redirection through your preferred web server or using a reverse proxy. One option is to create an endpoint within the localhost app that does not share paths, such as routing http://localhost/proxy/%1 to http://%1, allowing the remainder of localhost to remain unchanged. Alternatively, run a proxy on http://localhost:8080 which can redirect similarly, serving example.com from one path and the API from another.

This effectively acts as a form of "glue" or integration code, enabling you to simulate interactions to a certain extent.

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

Tips for resolving the issue of cypress automatically opening a new tab

Recently, I've encountered an issue while using Cypress to perform a test on my website. Every time I click on a button, it redirects me to a new tab, disrupting the flow of my test with Cypress. Despite trying to remove the "target" attribute using t ...

javascripthtmlattributescypress

Initiating preparation during NPM Installation

During the installation of a TypeScript module from Git, I noticed that the package.json file contains a prepare script in its scripts section. Strangely, it seems that the prepare script is not being run when using npm install <git repository#version&g ...

javascriptnode.jsgittypescriptnpm

Utilizing ng-repeat $index for locating an element within an array

Within my $scope, there is a property called $scope.cars, which is an array of cars. Users have the ability to delete a car from this array. When calling the delete function deleteThis, I pass the $index parameter created by ng-repeat. However, in the Ja ...

javascriptarraysangularjsangularjs-ng-repeat

Modify a JavaScript object in JSON format using another object as reference

Consider two JSON formatted JavaScript objects: obj1 = { prop1: 1, prop2: 2, prop3: 3 } obj2 = { prop1: 1, prop2: 3 } In the context of jQuery or Angular, what is the recommended practice to update obj2 into obj1 while also re ...

javascriptjqueryjsonangularjs

Tips for adjusting the placeholder color in Material UI using React JS

Is there a way to customize the background color and flashing color of the Skeleton component in Material UI? I would like to implement custom styling for it, similar to what is shown below: <Skeleton variant="circle" classes={{root:'pla ...

javascriptcssreactjsmaterial-ui

Prevent infinite scrolling from continuing once the end of the array is reached in React JS

My React app fetches the Flickr public feed, allowing users to scroll through endless content. However, I'm facing an issue where the app keeps trying to load more content even when it reaches the end of the list. This is evident from the loading mess ...

javascriptreactjsflickr

Freeing up memory allocated for JavaScript objects

Do I need to manually free allocated memory, or does JavaScript have a garbage collector? Is it acceptable to use this code snippet in JavaScript? function fillArray() { var c = new Array; c.push(3); c.push(2); return c; } var arr = fillArray(); ...

javascriptarraysgarbage-collection

Conceal the "Load More" buttons in Ruby on Rails once all items have been displayed

Currently, I am in the process of integrating the Load More button into a Ruby on Rails application. The implementation has been successful so far. However, there is an issue where the Load More button continues to appear even when there are no more photos ...

javascriptruby-on-railsrubyajax

Creating automatic page additions using Node.js on Heroku?

Can you assist me with a challenge I'm facing? Currently, I am using node.js and heroku to deploy an application and each time I add a new post, I have to manually update my web.js file. This process was manageable when I had fewer pages, but now it&a ...

javascriptnode.jsheroku

Experience choppy scrolling in Internet Explorer

Check out my click and drag scrolling Image Viewer here. While it functions perfectly in Firefox and Chrome, Internet Explorer is giving me some trouble. The movement seems jerky, especially when scrolling diagonally. It's like the scroll is sluggish ...

javascripthtmlcssinternet-explorer

Unknown individual, yet revealed by the investigator

I'm attempting to develop a dynamic list in react.js generateList = () =>{ return this.state.user.map((u)=>{ console.log(u); return <li onClick={this.handleClick} id={u} name={u}>{u}</li>; }); } The hand ...

javascriptreactjs

Maintain consistent sorting of checked items at the top in jqGrid multi-select mode

My jqGrid displays a list of rows, totaling several thousand. Upon loading the grid, all data is retrieved with previously selected items already checked. I am wondering, is there a way to set the sort order to consistently display the selected items at ...

javascriptjqueryjqgrid

Laravel 4 Data Cleaning for Improved Security

I am currently utilizing Laravel 4 to establish a RESTful interface for my AngularJS application. Right now, I am looking to update an object within my model named Discount Link. The method I am using involves: $data = Input::all(); $affectedRows ...

javascriptphpangularjsrestlaravel

Is there a way to set the <hr /> tag to display vertically?

Is there a way to make the <hr /> tag go in a vertical direction rather than appearing horizontally as it normally does? I am looking for a solution that can be used on a mobile site with broader compatibility across browsers, rather than relying on ...

javascripthtmlcss

tips for accessing a PHP variable within an AJAX success function and setting it as a JavaScript variable

How can I access a PHP back end variable in a front-end AJAX success callback function? Here is my PHP code: if($_POST["action"] == 'check_ot_count') { $totaltime = 0; $ot_hours = $_POST["test"]; $month = $_P ...

javascriptphpajax

Converting a stringified array of objects into an actual array of objects using Javascript

After receiving a HTTP response, I am faced with the challenge of working with the following variable: let data = '[{name: "John"}, {name: "Alice"}, {name: "Lily"}]' Although there are more objects with additional properties, this snippet provi ...

javascriptarraysjsonparsing

Displaying the React input text currently

I am currently working on creating a custom composed input text by combining 4 input components together, but I seem to be encountering some difficulties. Even though everything appears to be set up correctly, the only way I have managed to display the in ...

javascripthtmlreactjs

Retrieving pals from the API and showcasing them on the user interface

Currently, I am working on a project involving a unique Chat Application. While progressing with the development, I encountered an issue related to fetching friends data from the backend (node). Even though I can successfully retrieve the friends data in ...

javascriptnode.jsreactjsmongodbexpress

Exporting variables in Angular's Ahead of Time (AoT) compiler is

I recently attempted to incorporate dynamic configuration into my project, following a guide I found in this insightful post. While everything functions smoothly with the JiT compiler, I encountered the following error when attempting to build using the A ...

javascriptangularangular-aot

Ensure the header remains in a fixed position while scrolling in an Angular/Ionic app

Currently, users with limited screen space in my application encounter this when they attempt to scroll down: https://i.sstatic.net/Br0Wq.png What I actually want is for the header items What are you looking for? and Current location to remain fixed: ht ...

javascripthtmlcssangularjsionic-framework