Dashboard embeded iframe CORS issue

Elastic Stack Kibana
1

Tried to embed a kibana iframe into my SPA built with react.
I try to adjusting the height of the iframe to fit with its content
this is a code snips of who I am trying to do it:

const Iframe = ({ url }) => {
  const [iFrameHeight, setState] = useState(600);
  const iframe = useRef(null);    

    return (
    <>
    <iframe
      title="z"
      className=""
      onLoad={() => {         
        setState(            
            (iframe.current.contentWindow.document.body.scrollHeight+50)+ "px",
        );        
      }}
     
      ref="https://kibana.mydomain.co/app/dashboards#/view..."
      src={url}
      width="100%"
      height={iFrameHeight} 
      scrolling="no"
      frameBorder="0"
      crossOrigin="true"
    />
      </>
  );
};

basically I am trying to access the contentWindow.document in order to get the scroll height and adjust the content but I am getting this error:
running the app om mozila:

SecurityError: Permission denied to access property "document" on cross-origin object

running the app on chrome

Blocked a frame with origin "https://myapp.mydomain.co" from accessing a cross-origin frame.

2

CORS is not enabled by default.
Have you tried to enable it with kibana.yml file? See server.cors.enabled, server.cors.allowCredentials and server.cors.allowOrigin in

3

thanks, I let you know if it works

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.