We are building a POC to deploy Kibana iframe using a react app.
We have an existing react app and have embedded the iframe into it. Elastic cloud version 8.3.3 is used.
The iframe successfully loads but we do not want the ES login page to appear. Therefore we are passing a API Token using these headers for automatic login.
import React, { useEffect, useState } from 'react';
export const ElasticDashboard = () => {
const [urlObject, setURLObject] = useState(null);
const url =
'https://<SERVER_URL>:9243/app/dashboards#/view/<dashboard-id>?embed=true&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-15y%2Cto%3Anow))&show-top-menu=true&show-query-input=true&show-time-filter=true';
const apiKey = 'apiKey==';
useEffect(() => {
const fetchIframeXHR = async () => {
let xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = handler;
xhr.responseType = 'blob';
xhr.setRequestHeader('Authorization', `apikey ${apiKey}`);
xhr.send();
function handler() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
// this.response is a Blob, because we set responseType above
let urlObject = URL.createObjectURL(this.response);
setURLObject(urlObject);
} else {
console.error('Page not found');
}
}
}
};
fetchIframeXHR();
}, []);
return (
<div>
<iframe title='elastic_charts' src={urlObject} height='700'></iframe>
</div>
);
};
Currently POC is running in the localhost with http protocol.
We currently have these configurations on Kibana.yml
server.cors.enabled: true
server.cors.allowOrigin: ['*']
xpack.security.sameSiteCookies: None
xpack.reporting.roles.enabled: false
csp.strict: false
#csp.script_src: [https://kibana_url:9243 'self' 'unsafe-inline' 'unsafe-eval' https://*]
csp.script_src: [ http:// 'self' 'unsafe-eval']*
All these configurations led us to this error on the browser and no errors on console.
Can anyone please provide any help?
