Chrome 65 blocks cross-origin . Client-side wor

问题:

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?

回答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;
  a.click();
}

// 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)

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

回答2:

Apparently, the web specification changed at some point to disallow cross-origin downloads. Add content-disposition: attachment header in the response and cross-origin downloads may work again.

回答3:

function forceDownload(blob, filename) {
  var a = document.createElement('a');
  a.download = filename;
  a.href = blob;
  a.click();
}

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