Hi,
I am trying to embed a Kibana dashboard in my React app. To address security concerns, I am trying to add an authorization header to all requests that are being sent to Kibana so that a proxy service can intercept the request and see if the authorization is valid and the user is authorized (according to the authorization header) then allow the request to get through Kibana.
I have followed a similar approach to this post or this article instead of using the URL of Kibana with <iframe src="https://kibana.com"></iframe> so that I can add the authorization header to all requests.
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;
The problem I am facing is because a page like Kibana is a complex web page with lots of subsequent calls and scripts, the page breaks when I try to add authorization header and cannot get loaded properly (It gets stuck on leading kibana logo). I think the problem is all the paths in the scripts and different resources are loaded with a relative path which is not correct since the request has been proxied through to check the authorization header and make sure it's an authenticated call. Is there any way I can let the client app to build all corresponding resource URLs according to the proxied URL? Obviously, browser automatically does the transformation when Iframe is used with a URL, but given authorization header is required the client itself need to do all the heavy lifting that browser was doing before.
P.S: I am using Elastic cloud service