javascript - 为什么浏览器在经过身份验证的 XMLHttpRequest 之后不重用授权 header ？

Question

我正在使用 Angular 开发单页应用程序。后端公开需要基本身份验证的 REST 服务。获取 index.html 或任何脚本不需要身份验证。

我有一个奇怪的情况，我的一个 View 有一个 <img> src在哪里是需要身份验证的 REST API 的 url。 <img>由浏览器处理，我没有机会为它发出的 GET 请求设置授权 header 。这会导致浏览器提示输入凭据。

我试图通过这样做来解决这个问题:

1. 离开 img src源中为空
2. 在“文档准备就绪”处，输入 XMLHttpRequest到具有授权 header 的服务 ( /api/login )，只是为了进行身份验证。
3. 完成该调用后，设置 img src属性，认为届时浏览器会知道在后续请求中包含授权 header ...

...但事实并非如此。图像请求在没有标题的情况下发出。如果我输入凭据，那么页面上的所有其他图像都是正确的。(我也尝试过 Angular 的 ng-src，但结果相同)

我有两个问题:

1. 为什么浏览器 (IE10) 在成功 XMLHttpRequest 后没有在所有请求中包含 header ？ ？
2. 我该怎么做才能解决这个问题？

---

@bergi 要求提供请求的详细信息。他们在这里。

请求/api/login

GET https://myserver/dev30281_WebServices/api/login HTTP/1.1
Accept: */*
Authorization: Basic <header here>
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)
Connection: Keep-Alive

响应(/api/登录)

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Length: 4
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 20 Dec 2013 14:44:52 GMT

请求/user/picture/2218:

GET https://myserver/dev30281_WebServices/api/user/picture/2218 HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)
Connection: Keep-Alive

然后 Web 浏览器提示输入凭据。如果我输入它们，我会得到这样的响应:

HTTP/1.1 200 OK
Cache-Control: public, max-age=60
Content-Length: 3119
Content-Type: image/png
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 20 Dec 2013 14:50:17 GMT

Answer 1

基本思路

通过 JavaScript 加载图像并在网站上显示它们。优点是身份验证凭据永远不会进入 HTML。他们会在 JavaScript 端抵制。

第一步:通过JS加载图片数据

这是基本的 AJAX 功能(另见 XMLHttpRequest::open(method, uri, async, user, pw) ):

var xhr = new XMLHttpRequest();
xhr.open("GET", "your-server-path-to-image", true, "username", "password");

xhr.onload = function(evt) {
  if (this.status == 200) {
    // ...
  }
};

第二步:格式化数据

现在，我们如何显示图像数据？使用 HTML 时，通常会将 URI 分配给 src图像元素的属性。除了我们使用 data URIs 之外，我们可以在这里应用相同的原则。而不是“正常”http(s)://衍生物。

xhr.onload = function(evt) {
  if (this.status == 200) {
    var b64 = utf8_to_b64(this.responseText);
    var dataUri = 'data:image/png;base64,' + b64; // Assuming a PNG image

    myImgElement.src = dataUri;
  }
};

// From MDN:
// https://developer.mozilla.org/en-US/docs/Web/API/window.btoa
function utf8_to_b64( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
}

Canvas

还有另一种选择，即在 <canvas> 中绘制加载的数据。 field 。这样，用户将无法右键单击图像( Canvas 所在的区域)而不是 <img>。和数据 URI，用户在查看图像属性面板时会看到很长的数据 URI。