Cross-domain XMLHttpRequest request fails in headless chrome - javascript

As the title says, I'm having problems making an headless chrome bot execute a XMLHttpRequest to another domain. The bot executes this code:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:30000/login', true);
xhr.withCredentials = true;
xhr.send(null);
xhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
new Image().src='https://requestb.in/127kh4s1?c=OK';
} else {
new Image().src='https://requestb.in/127kh4s1?c=error-'+(xhr.status);
}
}
};
In my request bin the request are always ?c=error-0, indicating a fail with status code 0. When I visit the page manually, I get c=OK, which leads me to believe it's a problem with my bot.
From there I don't really know what to look for... The bot uses chrome-remote-interface to interact with a chromium browser. The browser is started with these flags: "--headless", "--no-sandbox", "--disable-web-security".
Any suggestion what I should try next?

Related

Javascript XMLHTTPRequest send with protocol undefined in header

I am trying to debug a functionality that runs from a plain old Javascript Web Page and requests to a server.
This perfectly works on my computer but fails on another (the real target)
When it fails, i get an empty string response from the server.
Here is the code that build the request
// Send request to web server
var url = "/start?f="+filesDesc[iFile].name+"&ft="+ft+"&t="+time0ms;
var req = new XMLHttpRequest();
if (req) {
req.open("POST", url, true);
// Hack to pass bytes through unprocessed.
req.overrideMimeType('text/plain; charset=x-user-defined');
req.timeout = 2000;
req.onreadystatechange = function(e) {
// In local files, status is 0 upon success in Mozilla Firefox
if(req.readyState === XMLHttpRequest.DONE) {
var status = req.status;
if (status === 0 || (status >= 200 && status < 400)) {
// The request has been completed successfully
console.debug(req.responseText);
} else {
console.debug("startPlaying : error while sending rqst" );
}
}
};
req.send();
}
I noticed that on my computer (working) the output header of the request looks like this :
POST /start?f=2021-02-09_14;05;40&ft=1612880820756.4346&t=1614243685530 HTTP/1.1
On the target computer (FAIL) it looks like :
POST /start?f=2021-02-09_14;05;40&ft=1612879543815&t=1614183852864 undefined
Notice the "undefined" protocol information
I wonder what can produce such a difference knowing that :
The computer are the same 'Asus ZenBook'
Navigator are the same : Mozilla Firefox 85.0.2 (32 bits)
Network drivers are the same
Client and Server code are the same.
This is very strange behaviour.
Many thanks for any precious piece of information !
We find out that this behaviour was a side effect of a DOM exception caused by registering activeX filters. Our application also tried to load video with calls to :
navigator.mediaDevices.getUserMedia({video: { deviceId: device.deviceId }})
This was ending in an :
Uncaught DOMException: A network error occured.
Believe me or not, removing activeX filters removes the network error !
We felt into a problem similar to :
NotReadableError: Failed to allocate videosource

Chrome extension XHR status 200 but not log on Apache logs

I'm developing a Chrome extension (my first) and I don't understand one thing.
I call a PHP page on my server with XHR (fetch have the same result). My console says that's this request is OK with status 200, but I have no log of this request on my Apache log.
When I call the page by myself directly on the address bar, I see the page on the Apache log, and the PHP script doing its job.
My javascript code (chrome extension):
var url "http://server/page.php?t=[token]";
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { console.log(xhr.status); }
}
xhr.onerror = function () { console.log("Error 1"); };
xhr.send();
The data of the PHP page is:
{ "error": "0" } // Or 1 / 2
Have you already saw the same issue or do you understand what I'm doing wrong?
Thanks.

XHR status 0, readystate 1 on localhost

Working on my own project. I'm sending an XMLHttpRequest to localhost from Firefox 44 to XAMPP. I'm receiving a status of 0 and a readystate of 1. Here's the code in question.
function sendReq(php,segment){
alert("sendreq called ");
//we out here getting 0 statuses. check out cwd, check out what php value is,
xhr.open("POST", php, true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.onreadystatechange = getData(segment);
xhr.send();
}
//callback function for ajax request.
function getData(div){
if ((xhr.readyState == 4) && (xhr.status == 200))
{
var serverResponse = xhr.responseText;
div.innerHTML = serverResponse;
}else{
div.innerHTML = "<p>loading!</p> ready state: " + xhr.readyState +"</br> status: "+ xhr.status;
}
}
I've read elsewhere the RS:1 / S:0 XHR properties indicate a unsuccessful cross domain request, but this is all occuring on localhost, with the files all in the same directory, and when inspecting the XHR response in Firebug, the return text is in there.
I've built a login to this page almost identical code and it works, its only pointing to a different .php file. Comparing the two and googling around are not enlightening me. So any advice is welcome. Thanks!
You're executing the getData() function once, on pageload, and returning undefined to the onreadystatechange handler, as that's what happens when you add the parentheses.
It has to be either
xhr.onreadystatechange = getData;
Note the lack of parentheses, or if you have to pass arguments
onreadystatechange = function() {
getData(segment);
}

First XHR request very slow in QML(javascript running on v8)

I have a QML page (Qt Quick 2) that makes an XHR request to an external server. Right now the server is running on my local machine and the first time this request is made it takes ~1.5 seconds. Each subsequent request is under 100ms.
When I make this same request using a browser I get a response in under 10ms everytime, so I know the problem isn't there.
Here is the offending code. Any ideas?
function login(key) {
var xhr = new XMLHttpRequest();
var params = "Fob_num=" + key;
xhr.open("POST","http://localhost:9000/customer_login",true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-length", params.length);
xhr.setRequestHeader("Connection", "close");
xhr.onreadystatechange = function() {
if ( xhr.readyState == xhr.DONE) {
if ( xhr.status == 200) {
handleResponse(xhr.responseText);
} else {
console.log("error with login--status: " + xhr.status)
displayErr("Oops, something's wrong. Please try again.")
}
}
}
xhr.send(params);
}
The problem isn't with handleResponse() function, I've already tried replacing it with a console.log(“response”), and it still takes just as long. I also tried replacing localhost with my ip.
You may want to create a dummy XMLHttpRequest instance in a dummy QML component that you asynchronously load with a Loader. Just an idea. Perhaps creating the first XMLHttpRequest instance takes long?

CORS not working at all

The SDK demo works fine (it doesn't need special CORS stuff since it is on the same domain)
When I try to send the request from localhost:8080 this happens
So I'm trying to request api.soundcloud.com/tracks - first my browser sends an OPTIONS req to api.soundcloud.com asking if it's okay to call cross-origin. api.soundcloud.com does not return the headers my browser is looking for so my browser throws an error and can't make the request.
Am I the only person trying to use the APIs from another domain or is something going wrong here?
EDIT: Doing debugging in wireshark - when making an API call using the SDK in the browser an OPTIONS request isn't even being sent. WTF
here's a working example where request is coming from jsbin.com:
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}
};
request.open('GET', 'http://api.soundcloud.com/tracks?client_id=YOUR_CLIENT_ID');
request.send();

Categories

Resources