在 oauth2-authentication 后面加载图像

Question

我开发了一个使用 oauth2 身份验证的 JavaScript 应用程序。现在我想 load/show 来自此身份验证机制背后的服务器的图像。因此，我向 rest-server 发送一个 xmlHttp-request 并获取图像的 URI 作为响应。

收到请求后，我尝试将 URI 附加到图像的 src，应用程序以 401 响应。

如何让浏览器也对这张图片重用我的身份验证？

这是获取 URI 的 xmlHttp 请求的一部分。

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);

xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.setRequestHeader('Authorization','bearer '+token);
xhr.send(null); 

xhr.onreadystatechange = function() {
    console.log(xhr);
    if (xhr.readyState == 4 && xhr.status == 200) {
       var img = document.createElement('img');
       img.src = xhr.responseURL;
       document.body.appendChild(img);
    }
}

我是不是忘记了什么？

Answer 1

图像是静态文件，我怀疑当您通过简单的 URL 请求图像时是否能够获得 OAuth2 保护。虽然您可以在 URL 中添加 OAuth2 信息，但这可能不是一件好事，因为它会向客户端公开所有本应保密且安全的数据。

也许您可以考虑将来自普通受保护端点的图像作为 byte[] 或 Base64 字符串提供，如果您确实需要保护图像本身，则可以在客户端中呈现这些字符串。

所以有一个受保护的端点来提供图像本身的内容。当然，只有当您确实需要图像的私密性和安全性时，您才会这样做。如果你不这样做，那么就让它成为 public 并从一个单独的 CDN 提供服务。它真的不需要在 OAuth2 系统后面。

Answer 2

虽然我来这里是为了寻找比我必须提供的答案更好的答案，但我目前的解决方案是：

通过 REST 将图像作为 base64 / json -> 支持 Oauth2，但会增加文件大小，感觉很不对。
使用 cookie 发送身份验证。

在 oauth2-authentication 后面加载图像

Load image behind oauth2-authentication

javascript

authentication

header

xmlhttprequest

oauth2