My goal is to have a link a visitor can click and then be redirected and logged into a site with basic authentication. We currently use embedded credentials for this on a couple of web pages not hosted by us, but embedded credentials are no longer supported in Chrome. I've been investigating alternatives to passing credentials in the URL (ie https://user:password@website.com), and so far haven't found a solution that's better than the following:
var url = 'https://www.third-party-website.com';
var username = 'my-username';
var password = 'my-password';
var encodedAuth = window.btoa(username + ':' + password);
$.ajax({
type: 'GET',
url: url,
xhrFields: {
withCredentials: true,
},
headers: {
"Authorization": "Basic " + encodedAuth
},
complete: function (result) {
window.location.href = url;
},
error: function (req, status, error) {
console.log(error);
}
});
Which gives me the following error:
XMLHttpRequest cannot load https://www.third-party-website.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://my-website.com' is therefore not allowed access.
Based on this SO thread, I think I would need access to the third party's server to set its Access-Control-Allow-Origin to allow my domain. Are there any other alternatives for me if I can't change the header on the third party server? Or is my AJAX request not formatted correctly?
