Chrome 65 阻止跨域 <a 下载>。强制下载的客户端解决方法？

Question

Chrome 65 移除了对download 属性的支持在具有跨域hrefs 的锚元素上：

阻止跨域

为了避免本质上是用户介导的跨域信息泄漏，Blink 现在将忽略具有跨域属性的锚元素上存在的下载属性。请注意，这适用于 HTMLAnchorElement.download 以及元素本身。

Intent to Remove | Chromestatus Tracker | Chromium Bug

这打破了serverless downloads（对于跨域资源）。 它还破坏了 Reddit Enhancement Suite 的保存图像按钮 (.res-media-controls-download) RES v5.12.0 fixed this 使用 chrome.downloads API（该扩展程序现在请求您允许管理下载）强>)

有什么解决方法吗？

更多细节在Web spec，谢谢@jbmilgrom

Answer 1

根据discussionblob: 和data: URL 不受影响，因此这里是使用fetch 和Blob 的解决方法。

客户端强制下载媒体

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

但是，fetch 仅适用于某些 URL。您可能会收到 CORS 错误：

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.

有一些扩展可以让你拦截、修改或删除网站的安全标头：

ModHeader - Chrome Web Store

（但设置 Access-Control-Allow-Origin: * 为我破坏了 YouTube）

性能

请注意，这种方法的性能不是很好！有时我的下载停滞时间

暴力猴/篡改猴

如果您的用例是用户脚本，则有 GM_download(options), GM_download(url, name)

⚠ 在 Tampermonkey 中这是一项测试功能，您必须先在 Tampermonkey Dashboard > Settings

中设置 下载模式： [Browser API ▾]

Answer 2

显然，web specification 在某些时候更改为禁止跨域下载。在响应中添加content-disposition: attachment 标头，跨域下载可能会再次起作用。