Chrome 65 блокирует перекрестное происхождение <a download>.</a> <a download>Обходное решение на стороне клиента для принудительной загрузки?</a>

Chrome 65 удалил поддержку атрибута download элементов привязки с перекрестными значениями href s:

Блок перекрестного происхождения <a download>

Чтобы избежать того, что по существу является опосредованной опосредованными пользователями информацией об утечке информации об источнике, Blink теперь игнорирует наличие атрибута загрузки элементов привязки с атрибутами перекрестного происхождения. Обратите внимание, что это относится к HTMLAnchorElement.download а также к самому элементу.

Намерение удалить | Chromestatus Tracker | Chromium Bug

Это прерывает безсерверные загрузки (для ресурсов перекрестного происхождения). Он также сломал кнопку восстановления изображения Reddit Enhancement Suite (.res-media-controls-download) RES v5.12.0 исправил это с помощью API chrome.downloads (теперь расширение запрашивает ваше разрешение на управление загрузками)

Любое обходное решение?

ОТВЕТЫ

Ответ 1

Согласно обсуждению, URL-адреса blob: и data: не затрагиваются, поэтому здесь есть обходной путь, использующий 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');

Ответ 2

Очевидно, что в какой-то момент веб-спецификация изменилась, чтобы запретить загрузку из разных источников. Добавьте content-disposition: attachment заголовок content-disposition: attachment в ответе и загрузка из разных источников может снова сработать.

Ответ 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');