it-swarm.com.de

Chrome 65-Blöcke cross-Origin <Download>. Clientseitige Problemumgehung, um den Download zu erzwingen?

Chrome 65 hat die Unterstützung für das download-Attribut on-Ankerelemente mit cross-Origin hrefs entfernt:

Cross-Origin blockieren <a download>

Um zu vermeiden, dass es sich im Wesentlichen um einen vom Benutzer vermittelten Cross-Origin-Informationsverlust handelt, ignoriert Blink jetzt das Vorhandensein des Download-Attributs auf Ankerelementen mit Cross-Origin-Attributen. Beachten Sie, dass dies für HTMLAnchorElement.download sowie für das Element selbst gilt.

beabsichtigt zu entfernen | Chromestatus Tracker | Chrom Bug

Dies bricht serverlose Downloads (für Origin-Ressourcen). Die Schaltfläche zum Speichern von Bildern der Reddit Enhancement Suite (.res-media-controls-download) wurde ebenfalls beschädigt. RES v5.12.0 Problem behoben mithilfe der chrome.downloads-API (Die Erweiterung fordert jetzt Ihre Erlaubnis für Downloads verwalten)

Irgendwelche Problemumgehung?

13
Leeroy

Entsprechend der Diskussionblob:- und data:-URLs sind nicht betroffen. Daher ist hier eine Problemumgehung mit fetch und Blobs.

Client-seitiges Download-Medium

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

Abrufen funktioniert jedoch nur für einige URLs. Sie erhalten möglicherweise einen CORS-Fehler:

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.

Es gibt Erweiterungen, mit denen Sie die Sicherheitsheader von Websites abfangen, ändern oder löschen können:

UnXSS - Chrome Web Store

(Aber Access-Control-Allow-Origin: * brach YouTube für mich)

Performance

Bitte beachten Sie, dass dieser Ansatz nicht sehr performant ist! Manchmal hatte ich Downloads für <1min. Der Rest der Seite reagierte jedoch während dieser Zeit. Ich habe das nicht untersucht, aber ich denke, dass das Erstellen großer Blobs ressourcenintensiv ist.

Violentmonkey/Tampermonkey

Wenn es sich bei Ihrem Anwendungsfall um Benutzerskripte handelt, gibt es GM_download(options), GM_download(url, name)

⚠ In Tampermonkey ist dies eine Beta-Funktion, und Sie müssen zunächst Download-Modus einstellen: [Browser-API] in Tampermonkey Dashboard> Einstellungen.

 Tampermonkey Dashboard > Settings > Downloads

18
Leeroy

Offenbar hat sich die Web-Spezifikation irgendwann geändert, um Cross-Origin-Downloads nicht zuzulassen. Fügen Sie content-disposition: attachment-Header in der Antwort hinzu. Cross-Origin-Downloads funktionieren möglicherweise erneut.

1
jbmilgrom