2017-04-11 155 views
10

我处于Google Chrome扩展程序,其权限为"*://*/*",我试图从XMLHttpRequest切换到Fetch API使用Fetch API读取响应标头

扩展存储用户输入的登录数据,这些数据以前直接放入XHR的open()调用中进行HTTP身份验证,但在Fetch下不能再直接用作参数。对于HTTP基本认证,避开这种限制是微不足道的,因为你可以手工设置Authorization头:

fetch(url, { 
    headers: new Headers({ 'Authorization': 'Basic ' + btoa(login + ':' + pass) }) 
    } }); 

HTTP Digest Auth但是需要更多的交互;您需要读取服务器通过401响应发送的参数来制作有效的授权令牌。我试着读WWW-Authenticate响应报头字段在这个片段:

fetch(url).then(function(resp) { 
    resp.headers.forEach(function(val, key) { console.log(key + ' -> ' + val); }); 
} 

但我得到的是这样的输出:

content-type -> text/html; charset=iso-8859-1 

这本身是正确的,但是这仍下落不明周围6个领域根据Chrome的开发者工具。如果我使用resp.headers.get("WWW-Authenticate")(或任何其他领域的事),我只得到null

任何使用Fetch API访问其他字段的机会?

回答

7

当您在CORS上使用Fetch API时,存在对访问响应标头的限制。由于你这种限制,你只能访问下列标准头:

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

当您编写Google Chrome扩展程序的代码时,您使用的是CORS,因此您无法访问所有标题。如果你控制的服务器,你可以在响应body返回的自定义信息,而不是在此限制headers

更多信息 - 使用迭代https://developers.google.com/web/updates/2015/03/introduction-to-fetch#response_types

+0

@jules CORS的这个限制遵循'access-control-expose-headers'中的值,或者可能是'access-control-allow-headers'(我们把它放在两个中)。 – jacob

+0

'access-control-expose-headers'为我处理从服务器返回的头文件 - 然后头文件可通过获取响应头文件对象获得。 'access-control-allow-headers'用于允许服务器上的请求标题(或者我从服务器收到错误消息) – specimen

+1

这对于Fetch来说不可能实现,但可以通过XmlHttpRequest完成。如果解决方法仍有可能,安全优势如何? – sebas

3

MDN

您也可以通过访问条目迭代器得到所有的标题。

// Display the key/value pairs 
for (var pair of res.headers.entries()) { 
    console.log(pair[0]+ ': '+ pair[1]); 
} 

而且,记住this部分:

出于安全原因,一些头只能由用户代理进行控制。这些标题包括禁止的标题名称和禁止的响应标题名称。

+0

呈现相同的输出;只有内容类型的字段。而禁止标题名称的列表似乎只适用于修改,并且“WWW-Authenticate”也未列在其中。 – jules