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

Esta pregunta se puede tratar de variadas maneras, pero nosotros te dejamos la solución más completa para nosotros.

Solución:

Puede realizar la solicitud en javascript, configurando los encabezados que desee. Entonces tú puedes URL.createObjectURL()para conseguir algo adecuado para el src del 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 :(');
    
  

El tipo MIME de la respuesta se conserva. 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 utilizar 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

No, no puedes. Sin embargo, podría configurar el iframe fuente a algún tipo de script de precarga, que usa AJAX para obtener la página real con todos los encabezados que desea.

Resulta que URL.createObjectURL() está obsoleto en Chrome 71
(consulte https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems)

Sobre la base de las excelentes respuestas de @Niet the dark Absol y @FellowMD, aquí se explica cómo cargar un archivo en un iframe, si necesita pasar encabezados de autenticación. (No puede simplemente establecer el src attribute a 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  else 
                iframe.attr('srcdoc', 'Error loading page.');
            
        
    

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

Recuerda que te concedemos añadir una estimación objetiva si diste con el resultado.

---

---

Utiliza Nuestro Buscador