Подтвердить что ты не робот

Можно ли добавить заголовки запроса в запрос iframe src?

Я понимаю, что вы можете легко устанавливать заголовки HTTP-запросов при выполнении вызовов AJAX в JavaScript.

Однако также возможно установить пользовательские заголовки HTTP-запросов при вставке iframe на страницу через script?

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

Ответ 1

Нет, вы не можете. Однако вы можете установить источник iframe в какой-то preload script, который использует AJAX для извлечения фактической страницы со всеми желаемыми заголовками.

Ответ 2

Вы можете сделать запрос в javascript, установив любые заголовки, которые вы хотите. Затем вы можете URL.createObjectURL(), чтобы получить что-то подходящее для src 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 :(');
    }
  }
}

Тип ответа 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