Попробуйте встроить Kibana Iframe с заголовком авторизации

Я пытаюсь установить заголовок авторизации для 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-адресом, но с учетом заголовка авторизации требуется, чтобы сам клиент выполнял всю тяжелую работу, которую браузер делал раньше.


person Ali    schedule 09.10.2020    source источник