Loading image in JavaScript with a carrier marker

Question

I load the image in JS as follows:

var img = new Image();
img.onload = function () {
..
};
img.src = src;

This will work, but I realized that I had to protect my images on the server side with OAuth 2 (as with the rest of the application), and that could affect me just by getting 401 Unauthorized.

This is an angular application, and I have an interceptor that adds an authorization header, therefore, for all angular service requests to the server, but in this case, of course, the interceptor is not used because the call is not made in the angular context.

Any ideas on how to add an authorization header to a receive request?

Answer 1

- URL-:

var img = new Image();
img.onload = function () {
..
};
img.src = src + '?access_token=mF_9.B5f-4.1JqM';

, , , OAuth 2: https://tools.ietf.org/html/rfc6750#section-2.3

, , .

Answer 2

, GET XMLHttpRequest access_token src URI , base64, :

var request = new XMLHttpRequest();
request.open('GET','https://dl.content.com/contentfile.jpg', true);
request.setRequestHeader('Authorization', 'Bearer ' + oauthToken.access_token);
request.responseType = 'arraybuffer';
request.onload = function(e) {
    var data = new Uint8Array(this.response);
    var raw = String.fromCharCode.apply(null, data);
    var base64 = btoa(raw);
    var src = "data:image;base64," + base64;

    document.getElementById("image").src = src;
};

request.send();