¿Es posible agregar encabezados de solicitud a una solicitud iframe src?

Question 1

Entiendo que puede configurar los encabezados de solicitud HTTP muy fácilmente al realizar llamadas AJAX en JavaScript.

Sin embargo, ¿también es posible configurar encabezados de solicitud HTTP personalizados al insertar un iframe en una página a través de un script?

<iframe src="someURL"> <!-- is there any place to set headers in this? -->

Question 2

No, no puedes. Sin embargo, puede configurar la iframefuente para algún tipo de script de precarga, que usa AJAX para recuperar la página real con todos los encabezados que desee.

Question 3

Puede realizar la solicitud en javascript, configurando los encabezados que desee. Entonces puede URL.createObjectURL(), para obtener algo adecuado para srcel iframe.

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 :(');
    }
  }
}

Se conserva el tipo MIME de la respuesta. Entonces, si obtiene una respuesta html, el html se mostrará en el iframe. Si solicitó un pdf, el visor de pdf del navegador se activará para el iframe.

Si esto es parte de una aplicación del lado del cliente de larga duración, es posible que desee utilizarla URL.revokeObjectURL()para evitar pérdidas de memoria.

Las URL de los objetos también son bastante interesantes. Son de la forma blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. De hecho, puede abrirlos en una nueva pestaña y ver la respuesta, y se descartan cuando se cierra el contexto que los creó.

Aquí hay un ejemplo completo: https://github.com/courajs/pdf-poc

Question 4

Resulta que URL.createObjectURL () está obsoleto en Chrome 71
(consulte https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems )
Construyendo sobre @Niet the dark Absol y Las excelentes respuestas de @ FellowMD, aquí le mostramos cómo cargar un archivo en un iframe, si necesita pasar encabezados de autenticación. (No puede simplemente establecer el atributo src en la URL):

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

y un saludo a courajs: https://github.com/courajs/pdf-poc/blob/master/script.js

Question 5

Como la respuesta de @FellowMD no funciona en los navegadores modernos debido a la depreciación de createObjectURL, utilicé el mismo enfoque pero usando el atributo iframe srcDoc.

Recupere el contenido para mostrar en el iframe usando XMLHttpRequest o cualquier otro método
Establecer el parámetro srcdoc del iframe

A continuación, encontrará un ejemplo de React (sé que es excesivo):

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 ahora es compatible con la mayoría de los navegadores. Parece que Edge llegó un poco tarde para implementarlo: https://caniuse.com/#feat=iframe-srcdoc