Team,
I am working on Angular JS application. When I want to test the app, I used to just launch the application directly into the browser from file system. The url would be like
file:///Users/easwar/AngularApp/index.html
When I need to launch the app in Chrome, I need to open the browser from terminal using the below command
open -a Google\ Chrome --args --disable-web-security -–allow-file-access-from-files
to avoid the below error.
"XMLHttpRequest cannot load , Cross origin requests are
only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource."
But surprisingly in Safari the app works fine without doing anything like this.
I would like to find what is the difference between these browser behaviors? Why its working in Safari and its not working in Chrome without a tweak?
In short: google chrome doesn't like local cross calls.
More found here: Cross origin requests are only supported for HTTP but it's not cross-domain .
It's Googles privacy and security policy: they try to avoid as much risks as possible, and local file calling seems to be one of them.
Read more on cross origin requests and how they're handled in Google Chrome here: https://developer.chrome.com/extensions/xhr
If you don't want to use those console commands, you might want to look for a webserver to host it (or a local webserver).
Related
I'm developing a Firefox add-on which does block the malicious URLs. The problem is that sometimes Firefox render its own deceptive warning page and sometime it allows the extension to render its own warning page.
How can I bypass the deceptive page warning programmatically?
The above behaviour is working fine on Chrome.
Abdul Basit.
The easy way is with the privacy WebExtension API, here the documentation on the Mozilla Developer Network (MDN):
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/privacy
Access and modify various privacy-related browser settings. To use the
privacy API, you must have the "privacy" API permission.
You can already use services.safeBrowsingEnabled for Chrome, Opera, Edge, but Firefox not yet.
You can play around with the request status code 400, because it is related to the deceptive request routing.
Good luck.
I'm having a problem loading MTL files on Chrome with Three.js. It works fine on Safari but I'm getting a cross origin request error in Chrome. I don't know how to fix this issue for local files. It does work fine if I publish this to an http website on Chrome.
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('assets/');
mtlLoader.setBaseUrl('assets/');
mtlLoader.load('file.mtl', function(materials) {
...
});
three.js:18280 XMLHttpRequest cannot load file:///.../assets/file.mtl. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
This isn't really a THREEjs question but i'll answer it here anyway:
This isn't really safe or permissible to allow a website to request files from the local file system.
What if the website requested an index of file:///C:/Users/Installation/Pictures/ on a windows system and then just started loading all of the contents to the server.
This is really unsafe because it could allow malicious agents to strip files from your computer just by you visiting. As a result, websites are only allowed to request files from outside the local file system.
You should use Mamp or the built in server emulation in Brackets. I use Mamp because it also makes it easy to test on mobile quickly and it is much faster than working with an FTP.
I have an AngularJS/Cordova app which polls a JSON service on a remote server:
$http({method: 'GET', url: 'http://example.com/index.php'})
Developing in the browser and running off my intranet apache server (http://dev) I get "No 'Access-Control-Allow-Origin' header is present" so I fix this by adding:
Header set Access-Control-Allow-Origin "http://dev"
All works fine, and I see Origin:http://dev in my Chrome dev tools.
So, having to think about this for the first time, I wonder what the Origin will be when the app runs in the Android/iOS webviews. I decide to do a build and deploy on my devices and expect to see the same error in remote debugging (Safari for iOS and Weinre for Android), but to my surprise it works (without sending any CORS headers)! I also find that in both devices the app runs in the webview under the file:// scheme, rather than (what I assumed) a http server of some sorts provided by the phone OS.
So research seems to suggest that CORS is not required for file:// - such a "site' may access any XHR resource on any domain. But, when I test this on desktop browsers I find that while Safari does not need CORS for file:// but Chrome does, and FireFox works either way without CORS
So my questions:
1) why is my app working without CORS in Android/iOS - is it because CORS does not apply to file://, or, is Cordova doing something to make it work in the device?
I have <access origin="*"/> in my config
2) if, pending answers to Q1, I should want to be on the safe site and explicitly allow requests from apps, what value do you give Access-Control-Allow-Origin for file:// "hosts"? in my debugging there is no Origin header in the requests from file://
3) in addition to blocking the XHR request to the remote server, Chrome is also blocking my app templates (I'm using separate files), see below. Is this a potential issue with my app, or just a Chrome issue that I do not need to worry about?
XMLHttpRequest cannot load file:///Volumes/projects/phonegap/www/templates/tabs.html. Cross origin requests are only supported for HTTP.
There are two ways for CORS headers to signal that a cross-domain XHR should be allowed:
sending Access-Control-Allow-Origin: * (allow all hosts)
put the host you would like to allow into the Origin header by your backend
As for the file:// URLs they will produce a null Origin which can't be authorized via the second option (echo-back).
As mentioned:
Cross-domain policy does not apply to PhoneGap (for a variety of reasons, basically because your app is essentially running off the file:// URI on-device).
Please be aware that you will have to set up a whitelist for your apps to access these external domains.
As for the Chrome problem, which can be seen in the developer's console:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/2.html
XMLHttpRequest cannot load file:///C:/2.html. Received an invalid response. Origin 'null' is therefore not allowed access.
there was a discussion on Chromium project's issue tracker, #40787. They mark the issues as won't fix as that behaviour is happening by design.
There is a workaround proposed to simply switch off CORS in Chrome for development purposes, starting chrome with --allow-file-access-from-files --disable-web-security
e.g. for Windows
`C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security`
Here is some more cordova related answer:
CORS and phonegap apps
Domain whitelisting in Apache Cordova - a security model that controls access to outside domains.
Check these resources for more info on CORS:
Cross-Origin resource sharing and file://
A nice CORS tutorial: http://www.html5rocks.com/en/tutorials/cors/
Working around origin policy
HTTP access control (CORS) (Mozilla)
Check also Browser support for CORS:
http://caniuse.com/#feat=cors
And for the record formal CORS specification on W3C :)
What is best-practice way of consuming a SOAP web service in Firefox OS?
Are there any Firefox OS specific issues I should pay attention to or it comes down to a problem of consuming a web service from JavaScript (where I can use JQuery AJAX or similar)?
There shouldn't be any Firefox OS-specific issues - if/when you could make it work in a browser (preferably a Firefox browser, that is) then it should work just fine in Firefox OS, too.
Although one issue might arise, if the SOAP service doesn't serve CORS allow-origin headers, in which case your XMLHttpRequest would fail as the OS won't allow cross-origin XHR-s. You could overcome this by creating a Privileged application, that requests in the webapp manifest the SystemXHR permission, in which case you are allowed to make cross-origin requests to remote services, regardless of CORS headers.
I want to bring a web application from PhoneGap to pc browser just because I need to do some tests. Inside the WebApp there are some XMLHttpRequest which fail because the Header origin is null.
I've already tried to run Chrome with this command :
chromium-browser index.html --allow-file-access-from-files
I've got the same error :
Origin file:// is not allowed by Access-Control-Allow-Origin.
I can't understand why with android emulator everything works properly.
Also phonegap loads the local file :
super.loadUrl("file:///android_asset/www/index.html", 1);
More or less I've solved it with this add On for Firefox!
It might be useful for others people :
Firefox add-ons Force CORS
Try using this flag --disable-web-security when launching chromium. Obviously, it's for dev purposes only.