How to send credentials from DevTools in a Chrome extension to a custom Werkzeug-based server?

Question

In my chrome extension I want to send credentials from my custom DevTools panel to a locally running custom Werkzeug-based server. My request to the server looks like:

let xhr = new XMLHttpRequest();
// let rType = "GET";
let rType = "POST";
xhr.open(rType, loadPath, true, login, password);
xhr.withCredentials = true;
xhr.send();

The server gets this request and even sends the data I want back to the extension.

The problem is that I can find no sign of the credentials I sent in Werkzeug's Request server-side object. What do I do wrong?

Answer 1

After a deeper investigation and numerous attempts I have revealed that the correct request to the server should look like:

xhr.open(rType, loadPath, true);
xhr.setRequestHeader("Authorization", 'Basic ' + btoa(login + ":" + password));
xhr.send();

So to succeed you have only to set the request header explicitly. Both login/password parameters in xhr.open() and withCredentials property of xhr play no role, rType may be both "GET" and "POST".

The same is true for fetch(obj) method, the pair

header: new Headers( { "Authorization": 'Basic ' + btoa(login + ":" + password) } );

should be added to obj.

If a server send back a response with a cookie, added for example with a method like set_cookie() from Werkzeug/Flask, the browser accepts and stores this cookie successfully.