File Url Cross Domain Issue in Chrome- Unexpected

function forceDownload(blob, filename) {
  var a = document.createElement('a');
  a.download = filename;
  a.href = blob;
  // For Firefox https://stackoverflow.com/a/32226068
  document.body.appendChild(a);
  a.click();
  a.remove();
}

// Current blob size limit is around 500MB for browsers
function downloadResource(url, filename) {
  if (!filename) filename = url.split('\\').pop().split('/').pop();
  fetch(url, {
      headers: new Headers({
        'Origin': location.origin
      }),
      mode: 'cors'
    })
    .then(response => response.blob())
    .then(blob => {
      let blobUrl = window.URL.createObjectURL(blob);
      forceDownload(blobUrl, filename);
    })
    .catch(e => console.error(e));
}

downloadResource('https://giant.gfycat.com/RemoteBlandBlackrussianterrier.webm');

Why does Chrome rate a data url as cross origin?

In this case Chrome is just conforming to the following requirement in the HTML spec:

If the Document was generated from a data: URL

    A unique opaque origin assigned when the Document is created.

Which follows from the fact the embed element creates an SVG Document in the DOM:

And if you check the properties of that SVG document, you’ll see that its origin is serialized as null (it’s actually a unique origin internally, but just gets serialized as null.)

I thought cross-subdomain AJAX requests were allowed, but this Chrome error seems to indicate otherwise

In short, the rules of the same origin policy are:

• same host
• same port
• same protocol

In your example you are violating the host rule, as a different subdomain could point to a different host/ IP than another, even if the second level domain is the same.

If you have no other possibility, you could try to use JSONP in your ajax request; this doesn't have an SOP.

Reference

Chrome blocking iframe requests as cross-origin request even when origins are the same

I have found the cause of the problem. It turns out that Google Chrome has problems with files that have commas in their filename. When downloading the file via a direct link, Chrome will report that duplicate headers were reported from the server. This has been a long-standing problem with Chrome that has gone un-addressed. Other browsers are not susceptible to this problem. Still, it's a fairly easy problem to troubleshoot and, indeed, when I searched on this error, the first search result had the solution: remove commas from filenames when handling a request from Google Chrome.

However, this wasn't a direct link, it was an AJAX-request, which results in a different exception. In this case, the error provided by Chrome is the cross-origin request exception and this is what made it so difficult to troubleshoot.

So, the tl;dr of it all is to strip out commas in the names of uploaded files.

---

Related Topics