Я пытаюсь установить заголовок авторизации для Iframe, чтобы решить проблемы безопасности. Я пытаюсь встроить Kibana, которая является довольно сложной динамической страницей. Я следовал аналогичному подходу к этому сообщению или этой статьи вместо использования URL-адреса Kibana с <iframe src="https://kibana.com"></iframe>
, чтобы я мог добавлять заголовок авторизации ко всем запросам.
import React, {Component} from 'react';
import {getToken} from 'Utils/token';
class CustomIframe extends Component {
constructor() {
super();
this.iframe_ref = null;
this.writeHTML = this.writeHTML.bind(this);
}
writeHTML(frame) {
if (!frame) {
return;
}
this.iframe_ref = frame;
const doc = frame.contentDocument;
doc.open();
const src = 'kibana.com/dashboard';
const type = 'text/html';
const token = getToken('token');
const method = 'GET';
const authorization = `Bearer ${token}`;
const headers = new Headers();
headers.append('Authorization', authorization);
headers.append('Content-Type', type);
headers.append('Host', 'proxy.com');
const options = {method, headers};
fetch(src, options)
.then((response) => response.text())
.then((response) => {
const test = response.replace(/\/s\/kibana\users\//g, 'https://proxy.com/s/users/');
doc.write(test);
})
.catch((e) => console.error('Error', e));
doc.close();
frame.style.width = '100%';
frame.style.height = '1024px';
}
render() {
return (
<iframe src='about:blank' scrolling='no' frameBorder='0' ref={this.writeHTML}></iframe>
);
}
}
export default CustomIframe;
Проблема, с которой я столкнулся, заключается в том, что такая страница, как Kibana, представляет собой сложную веб-страницу с множеством последующих вызовов и сценариев, страница разрывается, когда я пытаюсь добавить заголовок авторизации, и не может быть загружена должным образом. Я думаю, проблема в том, что все пути в сценариях и разные ресурсы загружаются с относительным путем, который неверен, поскольку запрос был проксирован, чтобы проверить заголовок авторизации и убедиться, что это аутентифицированный вызов. Можно ли каким-либо образом позволить клиентскому приложению создавать все соответствующие URL-адреса ресурсов в соответствии с проксируемым URL-адресом? Очевидно, что браузер автоматически выполняет преобразование, когда Iframe используется с URL-адресом, но с учетом заголовка авторизации требуется, чтобы сам клиент выполнял всю тяжелую работу, которую браузер делал раньше.