XMLHttpRequest to send a GET HTTP request with an username/password

authentication, google-chrome, google-chrome-extension, xmlhttprequest

Solution

You need to add headers to the XHR request manually.

xml.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password))

Demo here: http://jsbin.com/inuhiv/2 (NOte, there is nothing to auth, however look at devtools and see the request has auth header)

Problem

I develop a Chrome uses XMLHttpRequest to send a GET HTTP request with an username/password to a basic-auth-protected URL, so that it can then "auto-login" to it afterwards (since Chrome caches credentials for HTTP basic-auth). Here's the code I use: ``` var xml = new XMLHttpRequest(); xml.open('GET',<url>,false,<username>,<password>) xml.send(''); ``` After some additional research, I found out that it might have to do with Chrome 19 not supporting the username:pwd@url syntax for authenticating to basic-auth protected URLs, because when I send the XMLHttpRequest, I see this in Google Chrome's js console: GET http://user:pass@domain.com 401 (Unauthorized) Does anyone know whether it's a bug or if Chrome stopped supporting this feature? My function ``` function autoLogin(domain, user, password) { var httpAuth; if (window.XMLHttpRequest) { httpAuth = new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari } else if (window.ActiveXObject) { httpAuth = new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5 } else { alert("Seu browser não suporta autenticação xml. Favor autenticar no popup!"); } var userName = domain + "\\" + user; httpAuth.open("GET", "/_layouts/settings.aspx", false, userName, password); httpAuth.onreadystatechange = function () { if (httpAuth.status == 401) { alert("Usuário e/ou senha inválidos."); eraseCookie('AutoLoginCookieUserControl_User'); eraseCookie('AutoLoginCookieUserControl_Password'); } else { if ($(".pnlLogin").is(':visible')) { $(".pnlLogin").hide(); $(".pnlUsuario").css("display", "block"); $(".avatar").css("display", "block"); var name = $().SPServices.SPGetCurrentUser({ fieldName: "Title" }); $(".loginNomeUsuario").html("Seja Bem Vindo(a) <br />" + name); } } } var userAgent = navigator.userAgent.toLowerCase(); $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); if ($.browser.chrome == true) { httpAuth.setRequestHeader("Authorization", "Basic " + btoa(userName + ":" + password)); } try { httpAuth.send(); } catch (err) { console.log(err); } } ```

Original source