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.

I'm seeing this when I navigate to .aspx?app=76ac42b7-ba6f-4be4-b297-758ebc9fe615

var url = '.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
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 .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 '' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

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.

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.

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.

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.

I'm seeing this when I navigate to http://server.corp.somebiz./reportpages/Report_Page_Requests_Over_Time.aspx?app=76ac42b7-ba6f-4be4-b297-758ebc9fe615

var url = 'http://server.corp.somebiz./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.
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./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.' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

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.

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.

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.

• javascript
• google-chrome
• d3.js
• xmlhttprequest
• cors

Share Improve this question Follow edited Jul 12, 2020 at 9:03 sideshowbarker♦ 88.6k3030 gold badges215215 silver badges212212 bronze badges asked Jun 26, 2017 at 16:30 amberamber 1,15744 gold badges2323 silver badges4545 bronze badges 6

• Possible duplicate of Origin null is not allowed by Access-Control-Allow-Origin – Karl Reid Commented Jun 26, 2017 at 16:34
• Are you running your code from a file:// url? That causes this problem. If that's the case, you will need to run on a local server at least instead. – Karl Reid Commented Jun 26, 2017 at 16:35
• No, I'm not using file:// in the URL at all. The data handler builds the request on the fly through an HTTP GET based on a stored procedure that dynamically pulls data from the database. (I also looked at that possible duplicate question and it does not apply.) – amber Commented Jun 26, 2017 at 16:59
• To be clear, by URL I mean the url of the page that your code is running on(i.e as seen in Chrome address bar when running your app), not the value of your url variable that you are making the request to in your code. – Karl Reid Commented Jun 26, 2017 at 17:00
• 1 Ok, I did think that, just making sure. – Karl Reid Commented Jun 26, 2017 at 17:03

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 8

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:

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

…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.