iframe src 요청에 요청 헤더를 추가 할 수 있습니까?

iframe src 요청에 요청 헤더를 추가 할 수 있습니까?

---

JavaScript에서 AJAX 호출을 할 때 HTTP 요청 헤더를 매우 쉽게 설정할 수 있음을 이해합니다.

그러나 스크립트를 통해 iframe을 페이지에 삽입 할 때 사용자 지정 HTTP 요청 헤더를 설정할 수도 있습니까?

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

---

아니, 할 수 없습니다. 그러나 iframeAJAX를 사용하여 원하는 모든 헤더가있는 실제 페이지를 가져 오는 일종의 사전로드 스크립트로 소스를 설정할 수 있습니다.

---

원하는 헤더를 설정하여 자바 스크립트로 요청할 수 있습니다. 그런 다음 iframe에 URL.createObjectURL()적합한 것을 얻을 수 있습니다 src.

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

응답의 MIME 유형이 유지됩니다. 따라서 html 응답을 받으면 html이 iframe에 표시됩니다. pdf를 요청한 경우 브라우저 pdf 뷰어가 iframe을 시작합니다.

이것이 오래 지속되는 클라이언트 측 앱의 일부인 경우 URL.revokeObjectURL()메모리 누수를 방지하기 위해 사용할 수 있습니다 .

객체 URL도 꽤 흥미 롭습니다. 그들은 형태 blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170입니다. 실제로 새 탭에서 열어 응답을 볼 수 있으며, 생성 한 컨텍스트가 닫히면 삭제됩니다.

전체 예는 다음과 같습니다. https://github.com/courajs/pdf-poc

참조 URL : https://stackoverflow.com/questions/13432821/is-it-possible-to-add-request-headers-to-an-iframe-src-request