Cómo establecer encabezados de solicitud antes de que se cargue en un iframe

Question

Necesito descargar un archivo cuyo encabezado 'Content-Disposition' está establecido en "attachment" por el servidor. Estoy usando jQuery.ajax para GET y en configuración de éxito oculto iframesrc a url, que me da una ventana emergente para la descarga de archivos. Y funciona bien en todos los navegadores. Ahora quiero cambiar los encabezados de las solicitudes personalizadas para cifrar el archivo antes de GET & descargar. Utilicé jQuery.ajax función de devolución de llamada previa solicitud beforeSend para ello.

Puedo OBTENER mi archivo encriptado que puedo observar en firebug pero mi iframe aún muestra archivos no encriptados para descargar. Después de inspeccionar, puedo decir que iframe solicita un nuevo GET.

Código

$.ajax({ 
url: "/tutorial.text", 
beforeSend: function(xhr) { xhr.setRequestHeader("PASSWORD_HEADER", userPwd); }, 
success: function() { $("#Hidden_iframe").attr("src", this.url); }         
}); 

Y esto está funcionando bien en Internet Explorer. ¿Cómo puedo forzar a iframe a utilizar el recurso disponible en lugar de solicitar un nuevo GET? O ¿Cómo puedo setRequestHeader en iframe o realmente necesito un jQuery.Ajax para esta tarea? Hay alguna forma de descargar el encabezado Content-Disposition que se establece en archivos adjuntos directamente desde el servidor.

Answer 1

Esta solución no usa iframe o forma. Utiliza XHR con encabezado personalizado en un recurso que admite CORS (solo svg aleatorio de Internet para este ejemplo). Las diferencias clave en este enfoque es xhr.responseType = 'arraybuffer'; y un enlace con los atributos href blob y download:

jsfiddle

// some initial data 
 
var url = '//enable-cors.org/img/cloud-download.svg'; 
 
var password = '123456'; 
 

 
// download url into arrayBuffer 
 
function download (url, password, cb) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', url, true); 
 
    xhr.responseType = 'arraybuffer'; 
 
    // xhr.setRequestHeader('PASSWORD_HEADER', password); 
 
    xhr.onload = function() { 
 
     cb(xhr.response); 
 
    }; 
 
    xhr.send(null); 
 
} 
 

 
// receive binary content of url 
 
// create blob link and click on it 
 
download(url, password, function (arrayBuffer) { 
 
    var file = new File([arrayBuffer], 'some filename'); 
 
    var a = document.createElement('A'); 
 
    a.setAttribute('href', window.URL.createObjectURL(file)); 
 
    a.setAttribute('download', 'file-name-of-download.ext'); 
 
    // in firefox `a.click()` works only if `a` element is in DOM, so... 
 
    document.documentElement.appendChild(a); 
 
    a.click(); 
 
    console.log('done'); 
 
});

Probado en Chrome57 y FF54.