从 <iframe> 发出的 XHR 请求的 Origin 标头为空带沙盒属性

2022-01-15 00:00:00 cors google-chrome d3.js xmlhttprequest javascript

我有一个项目，我正在尝试从数据处理程序以制表符分隔值格式下载一些数据，但是，Google Chrome 正在为 Origin 标头值发送空值.

I have a project where I am trying download some data in a tab separated value format from a datahandler however, Google Chrome is sending a null value for the Origin header value.

当我导航到 http://server.corp.somebiz.com/reportpages/Report_Page_Requests_Over_Time.aspx?app=76ac42b7-ba6f-4be4-b297-758ebc9fe615

var url = 'http://server.corp.somebiz.com/DataHandlers/ReportSets.ashx?task=pagerequestsovertime&app=188d1956-c4a7-42f7-9bdd-38f54c14e125&format=tsv';

d3.tsv(url, function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  return d;
}, function(error, data) {
  if (error) throw error;

  console.log('Do stuff');
});

以下是请求的原始标头:

Here are the raw headers on the request:

GET /DataHandlers/ReportSets.ashx?task=pagerequestsovertime&app=786b5ef3-1389-4890-8004-533fd1f66f16&format=tsv HTTP/1.1
Host: server.corp.somebiz.com
Connection: keep-alive
accept: text/tab-separated-values,*/*
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

这以控制台上的错误结束:

This ends with an error on the console:

XMLHttpRequest cannot load http://server.corp.somebiz.com/DataHandlers/ReportSets.ashx?task=pagere…6ac42b7-ba6f-4be4-b297-758ebc9fe615&start=2/1/2017&end=3/2/2017&format=tsv. The 'Access-Control-Allow-Origin' header has a value 'http://server.corp.somebiz.com' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

我不仅要查找为什么会发生这种情况，还要查找导致 Chrome 向服务器发送空 Origin 标头的条件.

Not only am I looking for the why is this happening, what the conditions are that leads to Chrome sending a null Origin header to the server.

这似乎是 Chrome 特有的问题，因为 Internet Explorer 11 正在向服务器发送正确的 Origin 值.

This seems to be a Chrome specific issue as Internet Explorer 11 is sending the proper Origin value to the server.

更新:添加另一个皱纹，这可能是也可能不是促成因素.

Update: To add another wrinkle, that may or may not be a contributing factor.

我在 <iframe> 元素中加载调用页面以隔离脚本化元素.在 iframe 之外调用页面会导致不同的行为，Chrome 上的 Origin 标头完全丢失.

I load the calling page in an <iframe> element to isolate scripted elements. Calling the page outside of the iframe causes a different behavior, the Origin header on Chrome is missing entirely.

推荐答案

如果你加载调用页面的 iframe 有一个 sandbox 属性不包含值 allow-same-origin, 浏览器给它一个唯一"的来源:

If the iframe you’re loading the calling page in has a sandbox attribute that doesn’t contain the value allow-same-origin, browsers give it a "unique" origin:

当设置 [sandbox] 属性时，内容被视为来自唯一来源，禁用表单、脚本和各种可能令人讨厌的 API，阻止链接针对其他浏览上下文，并且插件是安全的.allow-same-origin 关键字导致内容被视为来自其真实来源，而不是强制它成为唯一来源

When the [sandbox] attribute is set, the content is treated as being from a unique origin, forms, scripts, and various potentially annoying APIs are disabled, links are prevented from targeting other browsing contexts, and plugins are secured. The allow-same-origin keyword causes the content to be treated as being from its real origin instead of forcing it into a unique origin

...当确定要在跨域请求中发送的 Origin 标头的值时，浏览器将任何唯一的来源序列化为 null 并给出 Origin 标头该值.

…and when determining the value of the Origin header to send in a cross-origin request, browsers serialize any unique origin as null and give the Origin header that value.

相关文章