Chrome 65 blocks cross-origin <a download>. Client-side workaround to force download?

Question

Chrome 65 removed support for the download attribute on anchor elements with cross-origin hrefs:

Block cross-origin <a download>

To avoid what is essentially a user-mediated cross-origin information leakage, Blink will now ignore the presence of the download attribute on anchor elements with cross origin attributes. Note that this applies to HTMLAnchorElement.download as well as to the element itself.

Intent to Remove | Chromestatus Tracker | Chromium Bug

This breaks serverless downloads (for cross-origin resources). It has also broken Reddit Enhancement Suite's save image button (.res-media-controls-download) RES v5.12.0 fixed this by using the chrome.downloads API (the extension now requests your permission to Manage downloads)

Any workaround?

More details in the Web spec, thanks @jbmilgrom

Answer 1

According to the discussion blob: and data: URLs are unaffected, so here is a workaround using fetch and Blobs.

Client-side force download media

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');

However, fetch only works on some URLs. You may get a CORS error:

Failed to load https://i.redd.it/l53mxu6n14o01.jpg: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://redditp.com' is therefore not allowed access.

There are extensions that let you intercept and modify or delete websites' security headers:

UnXSS - Chrome Web Store

(But setting Access-Control-Allow-Origin: * broke YouTube for me)

Performance

Please note that this approach isn't very performant! At times I've had downloads stall for <1min. The rest of the page was responsive during this time though. I haven't looked into this, but I imagine creating large Blobs is resource intensive.

Violentmonkey / Tampermonkey

If your use case is userscripts, there's GM_download(options), GM_download(url, name)

⚠ In Tampermonkey this is a beta feature, and you must first set Download Mode: [Browser API ▾] in Tampermonkey Dashboard > Settings