local AJAX-call to remote site works in Safari but not in other browsers

Question

I am maintaining a website that uses Javascript. The script uses jQuery and loads some content from the server at which the site is normally hosted.

Just for convenience while maintaining the site, I run a local copy of the site on my iMac. This works perfectly fine when I use Safari. But Firefox, Opera and Chrome refuse to work. I guess it is because of cross-domain-policy. (I couldn't test this with IE, because IE has to run in a virtual machine on my iMac, so for this reason it is not possible to access any local files)

Is there a setting within Firefox and the other browsers where I can tell the browser that it is ok to ajax-load files that are located on a remote server from a local html-page with a local javascript?

In a nutshell: This my html-page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>some title</title>
        <link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
        <script src="../js/jquery-2.1.3.min.js"></script>
        <script src="../js/myScript.js"></script>
    </head>
    <body>
        <!-- some content with a div-container to receive the ajax-content -->
    </body>
</html>

This is myScript.js:

var errorMsg = function (msg) {
    //insert the message into the html-page
};

var JSONerror = function (jqXHR, textStatus, errorThrown ) {
    var msg = 'JSON-answer: '+jqXHR.responseText;
    msg += '<br>'+'JSON-Errorstatus: '+textStatus;
    if ($.type(errorThrown) === 'string') {
        msg += '<br>'+'Error: '+errorThrown;
    }
    errorMsg(msg);
};

var JSONreceive = function (JSONobj, StatusString, jqXHR) {
    //insert the data in JSONobj into the html-page
}

var StartAJAX = function () {
    $.ajax({
        url: 'http://my.domain.tld/cgi-bin/myPerlScript.pl',
        data: "lastID=" + lastID
           + '&qkz=' + Math.random(),
           dataType: "json",
           success: JSONreceive,
           error: JSONerror
    });
};

There is also an event-listener, that listens for page-scroll and resize and checks some other constraints (like: is there already an ajax-call in progress?). This listener calls StartAJAX.

When it calls StartAJAX on a local copy of my page (file:///User/...) within Safari, I get the Ajax-content perfectly fine inserted into my html-document. within the other browsers i get the error-message inserted into the html-page. It is:

JSON-Answer: undefined
JSON-Errorstatus: error
Error:

Why does it work in Safari but not in Firefox, Chrome and Opera?

How can I make those browsers work?

(I need to test it with all browsers, because all browsers render the same html-domument differently, but I don't want to upload all files to the server after every change just to test it.)

EDIT:

After reading some answers, I want to make something clear, that I obviously did not make clear enough:

I am searching for settings in Webbrowsers

I will NOT change the settings of my remote webserver (Apache)
I will NOT manipulate any files on my remote machine (.htaccess)
I will NOT set up a webserver on my local iMac
I will NOT change the code of the AJAX-calls in my Javascript-files
I will NOT change the code of the Perl-Scripts on my remote Server

I can tell you why:

I am just doing a short maintainance, and i am too lazy to upload every manipulated file to the remote machine after I edited it. The settings of the webserver are fine for actual operation. I don't want to change them (and maybe forget the changes before finishing my work). Same for the scripts: Those parts that some of you want to change work fine as they are now. There is no reason to touch the Ajax-Calls, because there is nothing wrong with them in the productive environment.

All I want is that those stupid browsers Firefox, Opera and Chrome behave like Safari and process the Ajax-calls correctly.

BTW:

Please can anyone explain what is so risky to call data via Ajax from an other domain in Firefox, Opera or Chrome while it seems to be harmless doing the same thing in Safari?

Based on your edits, you're unwilling to accept any of the answers although they are correct. There are browser limitations for each browser. If you would like to have Firefox, Chrome and Opera behave like Safari you will need to contact the makers of those browsers and request the features you need be added. Otherwise several options to fix your CORS issue has been provided along with reference material so that you could learn more about how AJAX calls work across different domains. There is nothing anyone here can do to change how browsers are designed. — Robin, May 05 '15 at 17:25
@Rob: Your answer is at the moment the one that has the greatest chances to win the bounty. But the bounty does not end today. It ends in 3 days, and it has been viewed less than 60 times. This gives me 3 more days to hope that another 60 people read my question and that one of them finds an even better answer. If in 3 days there is no answer that tells me a way to manipulate the browsers so that they execute the ajax-calls as required, then I will accept your answer. So please just be patient! — Hubert Schölnast, May 05 '15 at 19:18

score 5 · Accepted Answer · edited May 23 '17 at 12:16

5

CHROME

There is a plugin for chrome that will force it to ignore the security policy. You can also do this with flags. Note, please do not browse the "real web" with this enabled as it is a security risk for your computer.

FIREFOX

This thread indicates that there is presently no way to do this in firefox.

OPERA

Again, there does not appear to be a built in way to ignore CORS policies.

The alternative would be to have the server (http://my.domain.tld) in your case return the proper headers - specifically Access-Control-Allow-Origin:

edited May 23 '17 at 12:16

Community

1
1

answered May 01 '15 at 17:24

Robin

1,074
8
29

I dont understand why this is a security risk in Chrome, Firefox and Opera, but not in Safari? It works perfectly well in Safari. – Hubert Schölnast May 02 '15 at 10:04
The reason it works in safari is because safari ignores the CORS policy for the file: scheme, if you were to run under a server locally and browse to http://localhost to view your site (and made your request to http://my.domain.tld), it will be blocked in safari as well - see http://stackoverflow.com/a/27117909/430231 for the research someone else did on this topic. – Robin May 04 '15 at 14:22
1

you can start chrome with the flag --disable-web-security – dannyshaw May 07 '15 at 04:01

Jose Mato · Answer 2 · 2015-05-08T13:22:22.130

To avoid this issues, you should develop your page (in your local computer it's ok) using a webserver (like apache, nginx, ...), so, your url ajax calls starts with the protocol http or https, not "file". "File" is the path of your file but using SO path system, not a web server system.

In the other hand, browsers has "Same Origin Policy". This is a security feature but what are the "problems" in web development using ajax calls? Well, your ajax calls always be done to the same server, for example, if you have your web on domain "http://my-domain.com" then your ajax calls must be to the same domain "http://my-domain.com".

To "bypass" SOP in ajax calls, you have three solutions:

Create a proxy on your "my-domain.com" that use curl (in php for example) to retrieve the data and return it to your ajax call
Use JSON-P
Allow your domain in your webserver (.htaccess for example) setting a proper configuration to CORS: http://enable-cors.org/

BTW

I am going to answer: "Please can anyone explain what is so risky to call data via Ajax from an other domain". (Copy & paste from mozilla MDN https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. Same-origin Policy is used as a means to prevent some of the Cross-site Request Forgery attacks.

My ajax-calls don't start with "file:///" they start with "http://". It is the website that starts with "file:///". Normally my html-document is located on the same remote server that receives the Ajax-Call from the browser. Just now, for maintainance I have a manipulated copy of the html-file on my local machine. The Ajax-call still goes to the remote Server, which is no problem in Safari, but in all other browsers. — Hubert Schölnast, May 04 '15 at 11:50
Ok, so, could be a cors problem because the protocol change: "file" !== "http". If your webservice calls go to a remote server then you need to add cors support on server. — Jose Mato, May 04 '15 at 13:39
My Problem is, that I can't imagine any »Cross-site Request Forgery attacks« that are harmful for anyone. If you know some examples, please answer this question (written by me): http://stackoverflow.com/questions/30108066/why-is-there-a-need-for-the-same-origin-policy-sop — Hubert Schölnast, May 08 '15 at 16:48

score 1 · Answer 3 · answered May 03 '15 at 13:20

1

Due to the same origin policy you aren't normally able to request resources from a different domain. Try adding crossDomain: true to your AJAX request since you are trying to make a request to a different domain.

$.ajax({
    url: 'http://my.domain.tld/cgi-bin/myPerlScript.pl',
    crossDomain: true,
    data: "lastID=" + lastID
       + '&qkz=' + Math.random(),
       dataType: "json",
       success: JSONreceive,
       error: JSONerror
});

answered May 03 '15 at 13:20

Mike Hamilton

1,519
16
24

No, I will not change the Ajax-call that works perfectly fine under productive conditions. I want to change some settings in my browsers to make them accept the data from the remote server during maintaining the document on my local computer. – Hubert Schölnast May 04 '15 at 11:53

score 0 · Answer 4 · answered May 07 '15 at 13:15

0

Assuming the web site is domain A, and the perl script is on Domain B, you have two options: 1) Enable CORS on the web server at Domain B. http://enable-cors.org/ 2) Create a script (php, perl, ashx, etc) on Domain A that calls the script on Domain B. The script on Domain A will act as a proxy and will be allowed by all web browsers.

answered May 07 '15 at 13:15

itsben

1,017
1
6
11

Sorry, you didn't understand the problem. All is under normal conditions on the same domain. So there is no reason to change anything on the server. The problem just appears when I download an html-document to my local iMac because of maintenance and load this local file into my browser. Then all browsers except Safari refuse to process the Ajax-call properly. In this case the website resides on no domain. It is local. Your answer might help to solve some other problem, but not the one that I described in the question. So -1 points. Sorry. – Hubert Schölnast May 07 '15 at 16:56
You are correct. I did assume that when you said you are running a "local" copy of the website, you were indeed running it on a "local" web server and not from the file system. Is that correct? What is the url that appears in your address bar while you are viewing the page? – itsben May 07 '15 at 20:54
Please read my question carefully. The information, that you are asking for stands there since end of April. – Hubert Schölnast May 07 '15 at 22:20
Best of luck to you buddy. – itsben May 07 '15 at 22:32
due to browser security..just allow to process unsecure site – Janak Dhanani May 08 '15 at 12:48

local AJAX-call to remote site works in Safari but not in other browsers

EDIT:

BTW:

4 Answers4

Linked