Est-il possible d'ajouter des en-têtes de requête à une requête src iframe?
je comprends que vous pouvez définir des en-têtes de requête HTTP très facilement lorsque vous faites des appels AJAX en JavaScript.
cependant, est-il également possible de définir des en-têtes de requête HTTP personnalisés lors de l'insertion d'une iframe dans une page via script?
<iframe src="someURL"> <!-- is there any place to set headers in this? -->
2 réponses
Non, vous ne pouvez pas. Toutefois, vous pouvez définir l' iframe source à une sorte de script de préchargement, qui utilise AJAX pour récupérer la page réelle avec tous les en-têtes que vous voulez.
vous pouvez faire la demande en javascript, paramétrant les en-têtes que vous voulez. Ensuite, vous pouvez URL.createObjectURL(), pour obtenir quelque chose de convenable pour l' src de l'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 :(');
}
}
}
le type MIME de la réponse est préservé. Donc, si vous obtenez une réponse html, le html s'affichera dans l'iframe. Si vous avez demandé un pdf, le navigateur pdf viewer se lancer pour l'iframe.
si cela fait partie d'une application client de longue date, vous pouvez utiliser URL.revokeObjectURL() pour éviter les fuites de mémoire.
les URLs des objets sont aussi assez intéressantes. Ils sont de la forme blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. Vous pouvez en fait les ouvrir dans un nouvel onglet et voir la réponse, et ils sont rejetés lorsque le contexte qui les a créés est fermé.
Voici un exemple complet: https://github.com/courajs/pdf-poc