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

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? -->

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

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.

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

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