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

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


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