CORS problem requesting a file (ONLY on Google Chrome) - google-chrome

I have a .Net Core API and a React application using BabylonJs to render some 3D models. On my server side I am storing the 3D models that will be requested by the client to render into the scene. In order to do so I have allowed UseFileServer and UseStaticFiles on my .Net Core server. I have also created a Policy to apply for requests that require the CORS policy. The policy that I implemented is the following:
services.AddCors(options =>
{
options.AddPolicy("CorsPolicy", policyBuilder => policyBuilder
.AllowAnyHeader()
.SetIsOriginAllowedToAllowWildcardSubdomains()
.AllowAnyMethod()
.SetIsOriginAllowed((host) => true)
.AllowCredentials());
});
And I am applying it to the requests that target the Static files the following way:
app.UseFileServer(enableDirectoryBrowsing: true);
app.UseStaticFiles(fileOptions);
On the client side the request is being done by the Babylon library the following way:
SceneLoader.ImportMeshAsync(
"",
"http://localhost:9001/resources/objects/",
"sphere.glb",
scene
)
.then((result) => {
result.renderingGroupId = 1;
scene.createDefaultCamera(true, true, true);
scene.activeCamera.alpha += Math.PI;
})
.catch((error) => {
return null;
});
What happens is that I am receiving the following error only on google chrome and not on Firefox neither on Opera.
Also the responses to Firefox and Opera contain the missing header while the response to chrome does not.
Chrome:
Firefox:
Opera:

After some research time I found the solution for my problem. What was causing the issue was not CORS. It looks like Google has made a security upgrade to Chrome that has changed the Referrer-Policy to:
wgile both other browsers remain on:
As so, google only support CORS on https->https sites. After creating a self-signed certificate and open a port for https problem was resolved.

Related

CORS on Firefox and potential help on chrom private local network access

I am currently using the FLASK developer HTTP server, and I am trying to build a local service (run on localhost) that serves files for a remote visualization website.
Here is the code for the python side
#app.route('/task/<path:path>', methods=['GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'CONNECT', 'OPTIONS', 'TRACE', 'PATCH'])
def static_file1(path):
p = "./task/" + path
return flask.send_file(p, conditional=True)
For safari, it just works like a charm.
As this screenshot indicates, flask development http server can serve files partially.
However, it didn't work for firefox for one request but not for the other.
And here are the headers for the first failed request
Successful request header
So I do believe the CORS header (Access-Control-Allow-Origin) is set correctly, otherwise the second request would fail.
Then what did I do incorrectly?
Second part:
It also doesn't work in Chrome, both requests failed, but I found the article below explaining new security features:
https://developer.chrome.com/blog/private-network-access-preflight/#:~:text=%23%20What%20is%20Private%20Network%20Access,to%20make%20private%20network%20requests.
But even with "Access-Control-Allow-Private-Network" set to "true" (See screenshot above), both requests still failed in chrome. And error msg:
Access to XMLHttpRequest at 'http://localhost:10981/task/a5c8616777d000499ff0cd5dbb02c957/datahub.json' from origin 'https://somepublic.website' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.
Any suggestion would be helpful!
Thanks!
Update 1:
After enabling ad-hoc SSL context (unsigned certificate) on the flask side, and using https on both localhost and "the public website", and changing the "#allow-insecure-localhost" flag in chrome to true, it works in chrome now. But still doesn't in firefox.
If you check the specification you will see that it is a "Draft Community Group Report" and
This specification was published by the Web Platform Incubator Community Group. It is not a W3C Standard nor is it on the W3C Standards Track.
The contribute list is made up entirely of people working for Google.
I can't find any mention of it in Firefox's bug tracker.
It looks like this is a highly experimental specification, which Firefox simple doesn't implement.
There doesn't appear to be any way to persuade Firefox to provide access from a secure, public Oritin to an insecure private origin.

Is AudioWorklet.addModule logged in the Chrome network console?

I'm testing out some audio worklet code by loading an example module from Github via AudioWorklet.addModule(githubUrl). However when I look at the network tab in developer settings I don't see a network request to Github. I know that it is making the request because it was giving a CORS error before I switched to using raw.githubusercontent address (now it is giving Uncaught (in promise) DOMException: The user aborted a request). I want to be able to inspect what the network call is returning so I can help diagnose the problem.
There seems to be a bug in Chrome which prevents the network request from being shown in the dev tools. I think it would be a good idea to file a bug for that.
For now you could just use Firefox. It shows the network request in the dev tools.
If you want to keep using Chrome you can proxy your request with fetch() to make it appear in the devtools.
Instead of calling addModule() directly ...
context.audioWorklet.addModule(url)
... you could fetch the source first and then wrap it into an object URL.
fetch(url)
.then((response) => response.text())
.then((text) => {
const blob = new Blob([text], { type: 'application/javascript; charset=utf-8' });
const objectUrl = URL.createObjectURL(blob);
return context.audioWorklet.addModule(objectUrl)
.finally(() => URL.revokeObjectURL(objectUrl));
})

Proxy setting using chrome extension not working with chrome43

I am using chrome extension for switching the chrome proxy setting at runtime.
I have tested my code on chrome 59 and chrome 69 which is working fine.
However, the same code is failing when being tried upon chrome43.
The proxy is not getting switched and the requests are getting directly routed.
Do we have extension issues with chrome43?
Is there any other way to switch the chrome proxy at runtime without the need to restart the chrome browser?
let proxy = xx.xx.xx.xx; //intentionally masked for sharing code
let configPAC = {
mode: "pac_script",
pacScript: {
data : "function FindProxyForURL(url, host) { return 'PROXY "+proxy+"';}",
mandatory:true
}
};
chrome.proxy.settings.set({value: configPAC, scope: "regular"}, function() { console.log("Setting custom proxy here!");});

Cannot run xmlhttprequest in Chrome App : provisional headers & No 'Access-Control-Allow-Origin'

I am building a chrome app sending a Get HTTPRequest to an external API:
I get the answer:
XMLHttpRequest cannot load
http://developer.echonest.com/api/v4/artist/profile?api_key=FILDTEOIK2HBORODV&name=weezer.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'chrome-extension://ihdfphmemcdeadpnjkhpihmcoeiklphe'
is therefore not allowed access.
I did allow the external domain in permissions in my manifest (to prevent blocking in cross domain requests)
When I type the URL in the Address Bar it works perfectly
It seems Chrome is blocking my request, I even tried to load directly the script in an HTML page and it does not work (same message but with origin "null") (oh and it did not allow me to cheat by changing the Origin in the Header).
I also get the famous "Caution : Provisional Headers are shown" in the console, which makes me think Chrome is blocking my request, I looked up on other Stack Overflow Questions but apart running chrome://net-internals and looking for stuff I haven't the first clue about I cannot find any good answers (I did run chrome://net-internals but really can't make any sense out of it).
Here is the request :
function update_stations() {
var xhr = new XMLHttpRequest();
xhr.open("Get","http://developer.echonest.com/api/v4/artist/profile?api_key=FILDTEOIK2HBORODV&name=weezer", true);
xhr.responseType = "json";
xhr.onreadystatechange = function() {
console.log("Essai");
console.log(xhr.readyState);
console.log(xhr);
document.getElementById("resp").innerText = xhr;
}
xhr.send()
}
Any thoughts (would be highly appreciated)?
Cross-Origin XMLHttpRequest chrome developer documentation explains that the host must be listed in the permissions of the manifest file.
I've taken the XHR code from above and included it in the hello world sample. It works after adding the following to the manifest.json.
"permissions": [
"http://*.echonest.com/"
]

How to Authenticate users on azure mobile services from Windows Phone 8 using HTML?

I am experimenting with azure mobile services and have implemented the authentication example here. This works on most devices ( iOs, IE9 and chrome on desktop, IE10 Surface RT, android ) but on a WP8 device ( a Nokia 920, to be precise ) it returns
"Cannot reach window opener. It may be on a different Internet Explorer zone"
after attempting to return from the authenication providers pop-up. This is mentioned briefly in the link above, but only wrt to connecting to the service from localhost. This is not the case here and other devices work fine. It does not seem to be a problem with any particular authentication provider - all ( facebook, google, twitter, windows connect ) return the same message. And as these other devices work, it seems unlikely that the service is mis-configured, but there could very well be something subtle that I'm missing.
The way I got the authentication to work is not to use Facebook JavaScript SDK, but another flow, described here https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/#step2
For handling the response when I get the redirect back from Facebook, I used the following code:
function handleLoginResponse() {
var frag = $.deparam.fragment();
if (frag.hasOwnProperty("access_token")) {
client.login("facebook", { access_token: frag.access_token }).then(
function () {
// do your thing when logged in
}, function (error) {
alert(error);
});
}
}
This code makes use of jQuery BBQ plugin, found here http://benalman.com/projects/jquery-bbq-plugin/.
This way I can get Facebook auth to work on WP8 and I'm able to pass the access token to Mobile Services login.
A slight problem is that now the access token sticks in my site URL, which I think is a problem if the user decides to share the URL, for example. I think I can get around this by e.g. putting the info in a cookie (or local storage) and then redirecting to the plain URL of my site.