web-dev-qa-db-ja.com

Chrome 65ブロックのクロスオリジン<aダウンロード>。ダウンロードを強制するためのクライアント側の回避策？

Chrome 65はdownload属性のサポートを削除しましたクロスオリジンhrefsのアンカー要素：

クロスオリジンのブロック<ダウンロード>

本質的にユーザーが仲介するクロスオリジン情報漏洩を回避するために、Blinkはクロスオリジン属性を持つアンカー要素のダウンロード属性の存在を無視するようになりました。これは HTMLAnchorElement.download および要素自体に。

削除する意図 | Chromestatus Tracker | クロムバグ

これにより、 サーバーレスダウンロード （クロスオリジンリソースの場合）が壊れます。 また、Reddit Enhancement Suiteの画像保存ボタン（.res-media-controls-download） RES v5.12.0 これを修正chrome.downloads API を使用して（拡張機能はダウンロードの管理への許可を要求するようになりました）

回避策はありますか？

Web仕様 の詳細、@ jbmilgromに感謝

javascriptgoogle-chromefrontendtampermonkey
17
Leeroy

discussion _blob:_および_data:_によると、URLは影響を受けないため、 fetch およびBlobsを使用した回避策があります。

クライアント側の強制ダウンロードメディア

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

ただし、フェッチは一部の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._

Webサイトのセキュリティヘッダーを傍受、変更、または削除できる拡張機能があります。

nXSS-Chrome Web Store

（ただし、_Access-Control-Allow-Origin: *_を設定するとYouTubeが壊れました）

性能

このアプローチはあまりパフォーマンスが良くないことに注意してください！時々、ダウンロードが1分未満停止することがありました。ただし、この間、ページの残りの部分は応答していました。私はこれを検討していませんが、大きなBlobを作成することはリソースを大量に消費すると思います。

Violentmonkey/Tampermonkey

ユースケースがユーザースクリプトの場合、 GM_download(options), GM_download(url, name)

T Tampermonkeyでは、これはベータ機能であり、最初にダウンロードモードを設定する必要があります：[Browser API▾] in Tampermonkeyダッシュボード>設定

Tampermonkey Dashboard > Settings > Downloads

23
Leeroy

どうやら、 web specification はある時点で変更され、クロスオリジンのダウンロードが禁止されています。応答にcontent-disposition: attachmentヘッダーを追加すると、クロスオリジンダウンロードが再び機能する場合があります。

2
jbmilgrom