Обычно при использовании iframe устанавливается источник, который позволяет отображать контент извне текущего документа. Это особенно полезно для встраивания стороннего контента в ваше приложение.
Типовая реализация
<iframe src="https://mythridpartycontent.com"></iframe>
Однако, когда вы начинаете рассматривать вопросы динамического содержимого и безопасности, возникает необходимость подумать о заполнении содержимого iframe по-другому. В этом примере мы собираемся использовать вызов ajax, сделанный с модулем axios, для отправки заголовков авторизации и динамического обновления содержимого нашего iframe.
Установка axios
Axios - это HTTP-клиент, основанный на обещаниях, который упрощает AJAX и предоставляет простой чистый интерфейс для выполнения вызовов XMLHttpRequest (XHR).
$ npm install axios
Совершение звонка
После установки axios вы можете динамически заполнять содержимое iframe с помощью объекта ответа XHR.
Сначала измените свой iframe следующим образом:
<iframe id="my_iframe"></iframe>
Затем сделайте свой звонок с помощью axios.
// myexample.js
function getContent(url) {
const authToken = <my_token>;
const header = {'Authorization':'Basic '+authToken};
const iframe = document.getElementById('my_iframe').contentDocument;
axios.get(url, {headers:header})
.then((response) => {
iframe.write(response.data);
}
.catch((error) => {
console.log(error);
});
}
С помощью этого относительно простого метода теперь вы можете динамически настраивать содержимое iframe и предлагать заголовки авторизации стороннему источнику, помогая повысить уровень безопасности их содержимого.
