使用Bearer令牌在JavaScript中加载图像

Question

我在JS中加载一个像这样的图像:

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

这将有效,但我已经意识到我必须使用OAuth 2在服务器端保护我的图像(与应用程序的其余部分一样),这将在我看来只是收到401 Unauthorized.

这是一个角度应用程序,我确实有一个拦截器,因此为服务器的所有角度服务请求添加了Authorization标头,但在这种情况下 - 当然不使用拦截器,因为调用不是在角度上下文中进行的.

有关如何将Authorization标头添加到get请求的任何想法？

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();