Ist es möglich, Anforderungsheader zu einer iframe-src-Anforderung hinzuzufügen?

Lesezeit: 5 Minuten

Ich verstehe, dass Sie HTTP-Anforderungsheader sehr einfach festlegen können, wenn Sie AJAX-Aufrufe in JavaScript durchführen.

Ist es jedoch auch möglich, benutzerdefinierte HTTP-Anforderungsheader zu setzen, wenn ein Iframe per Skript in eine Seite eingefügt wird?

<iframe src="https://stackoverflow.com/questions/13432821/someURL"> <!-- is there any place to set headers in this? -->

Ist es moglich Anforderungsheader zu einer iframe src Anforderung hinzuzufugen
FellowMD

Sie können die Anfrage in Javascript stellen und beliebige Header festlegen. Dann kannst du URL.createObjectURL()etwas Passendes für die zu bekommen src des Iframes.

var xhr = new XMLHttpRequest();

xhr.open('GET', 'page.html');
xhr.onreadystatechange = handler;
xhr.responseType="blob";
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.send();

function handler() {
  if (this.readyState === this.DONE) {
    if (this.status === 200) {
      // this.response is a Blob, because we set responseType above
      var data_url = URL.createObjectURL(this.response);
      document.querySelector('#output-frame-id').src = data_url;
    } else {
      console.error('no pdf :(');
    }
  }
}

Der MIME-Typ der Antwort wird beibehalten. Wenn Sie also eine HTML-Antwort erhalten, wird der HTML-Code im Iframe angezeigt. Wenn Sie ein PDF angefordert haben, springt der PDF-Viewer des Browsers für den Iframe ein.

Wenn dies Teil einer langlebigen clientseitigen App ist, möchten Sie möglicherweise verwenden URL.revokeObjectURL() um Speicherlecks zu vermeiden.

Die Objekt-URLs sind auch ziemlich interessant. Sie sind von der Form blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. Sie können sie tatsächlich in einem neuen Tab öffnen und die Antwort sehen, und sie werden verworfen, wenn der Kontext, der sie erstellt hat, geschlossen wird.

Hier ist ein vollständiges Beispiel: https://github.com/courajs/pdf-poc

  • Perfekt. Hat einwandfrei funktioniert. Danke.

    – Mike123

    22. September 2017 um 19:37 Uhr

  • du mann! Ich arbeite an einer Angular 5-Komponente, die von diesem Code inspiriert ist, um PDF-Vorschauen in Angularjs anzuzeigen. das hat mir sehr geholfen

    – Feuerdrache

    23. Januar 2018 um 14:42 Uhr

  • @BSSchwarzkopf sieht so aus, als hättest du Recht. Blob-URLs werden in Edge unterstützt, aber sie funktionieren nicht im src-Attribut eines Iframes. Ich halte es für einen Verstoß gegen die Spezifikation: „Dieses Schema sollte in der Lage sein, mit Web-APIs verwendet zu werden … und mit Elementen, die für die Verwendung mit HTTP-URLs entwickelt wurden … Im Allgemeinen sollte dieses Schema so konzipiert sein überall dort verwendet werden, wo URLs im Web verwendet werden können.” Problem mit dem Edge-Tracker: developer.microsoft.com/en-us/microsoft-edge/platform/issues/… Spezifikation: w3.org/TR/FileAPI/#use-cases-scheme

    – FellowMD

    15. Mai 2018 um 18:44 Uhr


  • Ich erhalte „Fehler beim Ausführen von ‚createObjectURL‘ auf ‚URL‘: Es wurde keine Funktion gefunden, die mit der bereitgestellten Signatur übereinstimmt.“ auf Chrome 84.0.4147.105.

    – poiuytrez

    31. Juli 2020 um 13:51 Uhr

  • @poiuytrez das bedeutet, dass Sie die falsche Art von Argument übergeben haben. Es muss eine Datei, ein Blob oder eine MediaSource sein. Vielleicht übergeben Sie es null, undefiniert, ein Promise oder ein Request-Objekt?

    – FellowMD

    15. August 2020 um 12:21 Uhr

Nein, das kannst du nicht. Allerdings könnte man das einstellen iframe source zu einer Art Preload-Skript, das AJAX verwendet, um die eigentliche Seite mit allen gewünschten Headern abzurufen.

  • Hallo Niet, können Sie bitte Beispielimplementierungscode in JSFiddle bereitstellen

    – Naveen Reddy

    25. September 2014 um 22:04 Uhr

  • Ich glaube, Niet bedeutet so etwas wie stackoverflow.com/a/17695034/1524918

    – Ryan Kara

    5. Mai 2015 um 12:51 Uhr

  • Würde die Anfrage in einem solchen Preload-Skript nicht an eine andere Domain gesendet und damit gegen die Same Origin Policy verstoßen?

    – mart1n

    1. Dezember 2015 um 15:02 Uhr

  • Welche Header werden standardmäßig gesendet? Gibt es dazu eine Norm?

    – Nik

    17. November 2018 um 22:10 Uhr

Da die @FellowMD-Antwort aufgrund der Abwertung von createObjectURL in modernen Browsern nicht funktioniert, habe ich denselben Ansatz verwendet, jedoch das Attribut iframe srcDoc verwendet.

  1. Rufen Sie den Inhalt ab, der im Iframe mithilfe von XMLHttpRequest oder einer anderen Methode angezeigt werden soll
  2. Legen Sie den srcdoc-Parameter des Iframes fest

Nachfolgend finden Sie ein React-Beispiel (ich weiß, es ist übertrieben):

import React, {useEffect, useState} from 'react';

function App() {
  const [content, setContent] = useState('');


  useEffect(() => {
    // Fetch the content using the method of your choice
    const fetchedContent="<h1>Some HTML</h1>";
    setContent(fetchedContent);
  }, []);


  return (
    <div className="App">
      <iframe sandbox id="inlineFrameExample"
              title="Inline Frame Example"
              width="300"
              height="200"
              srcDoc={content}>
      </iframe>


    </div>
  );
}

export default App;

Srcdoc wird jetzt von den meisten Browsern unterstützt. Es scheint, dass Edge etwas spät war, um es zu implementieren: https://caniuse.com/#feat=iframe-srcdoc

  • createObjectURL ist nur für MediaStream-Argumente veraltet. Das Übergeben eines Blobs ist nicht veraltet, und tatsächlich sieht eine ziemlich breite und zunehmende Nutzung. Ich weiß die Mühe zu schätzen, die Dinge auf dem neuesten Stand zu halten 🙂

    – FellowMD

    24. Oktober 2020 um 14:24 Uhr

  • @poiuytrez Wenn ich den Inhalt mit einem benutzerdefinierten Header abrufen möchte, erhalte ich einen Fehler, wie in dieser Frage gestellt. Könnten Sie ihn sich bitte ansehen

    – Enski

    11. Februar 2021 um 15:02 Uhr


  • Diese Lösung zeigt nicht, wie die Header in der Anforderung auf fetchContent festgelegt werden

    – 32423hjh32423

    18. August 2021 um 7:58 Uhr

Es stellt sich heraus, dass URL.createObjectURL() in Chrome 71 veraltet ist
(sehen https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems)

Aufbauend auf den hervorragenden Antworten von @Niet the dark Absol und @FellowMD erfahren Sie hier, wie Sie eine Datei in einen Iframe laden, wenn Sie Authentifizierungsheader übergeben müssen. (Sie können das src-Attribut nicht einfach auf die URL setzen):

$scope.load() {
    var iframe = #angular.element("#reportViewer");
    var url = "http://your.url.com/path/etc";
    var token = "your-long-auth-token";
    var headers = [['Authorization', 'Bearer ' + token]];
    $scope.populateIframe(iframe, url, headers);
}

$scope.populateIframe = function (iframe, url, headers) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = handler;
    xhr.responseType="document";
    headers.forEach(function (header) {
        xhr.setRequestHeader(header[0], header[1]);
    });
    xhr.send();

    function handler() {
        if (this.readyState === this.DONE) {
            if (this.status === 200) {
                var content = iframe[0].contentWindow ||
                    iframe[0].contentDocument.document || 
                    iframe[0].contentDocument;
                content.document.open();
                content.document.write(this.response.documentElement.innerHTML);
                content.document.close();
            } else {
                iframe.attr('srcdoc', '<html><head></head><body>Error loading page.</body></html>');
            }
        }
    }
}

und Gruß an Courajs: https://github.com/courajs/pdf-poc/blob/master/script.js

996590cookie-checkIst es möglich, Anforderungsheader zu einer iframe-src-Anforderung hinzuzufügen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy