Iframe Embed Cross Origin Security Exception

Elastic Stack Kibana
1

I have kibana hosted at xx.prod.mydomain.com. I am trying to use the embed share link in yy.stg.mydomain.com and localhost:8080 like this:

<iframe  src="THE-KIBANA-SHARE-EMBED-URL"
		height="600" width="800"></iframe>

It throws Uncaught SecurityError: Blocked a frame with origin "######" from accessing a cross-origin frame. (######/bundles/kibana.bundle.js?v=10229:75283)

Kibana version - 4.6

What I have tried till now:

  1. Enabling server.cors: true in kibana.yml
    This does not help. If I try to make a XHR call, then I see the required headers in the response. But when I put those document contents inside the iframe, only the loading page appears and the css and other js are pointed to local paths. Nothing loads.

access-control-allow-originhttp://localhost:8080
access-control-expose-headersWWW-Authenticate,Server-Authorization

Code:

    var xhttp = new XMLHttpRequest();
   
    xhttp.onload = function() {
                        var myFrame = document.getElementById('output-frame-id');
                	myFrame.sandbox= 'allow-scripts';
                	var doc = myFrame.contentWindow.document;
                	doc.open();
                	doc.write (this.response.documentElement.outerHTML);
                	doc.close();
  }
 xhttp.open("GET", "URL");
 xhttp.responseType = 'document';
 xhttp.send();

  1. Have read a number of articles on the same topic but nothing seems to help.

  2. Saw this merge from @Spencer_Alger, in a beta branch but not sure if the feature was ever enabled in the release.

Any help would be much appreciated. I am kind of on a tight deadline here.

2

Have you tried using the suggestions in this topic? Kibana iFrame CORS

Basically, use server.cors.origin: ['*'] instead of the boolean.

It's not clear what your code section in part 1 is in reference to. Are you trying to access Kibana's elements in the iframe in your own Javascript?

3

Ya I have tried that, but as mentioned is the same thread, that is not the reason. And also I am already getting the headers. Problem lies somewhere else.

4

The user in the other topic looks like they had stability problems with their Kibana instance, but they never followed up with providing any error logs from Kibana.

Are you also seeing your Kibana instance go to red status when you use server.cors.origin: ['*']?

5

Hi again,

I checked more with my team and found out that changing server.cors.origin in production mode is not supported in Kibana. It's allowed as an option just in Dev mode as it is necessary for running unit tests.

See the code in https://github.com/elastic/kibana/blob/4.6/src/server/config/schema.js#L47

This means that you will not be able to call Kibana API's from AJAX in a browser application. Since it's CORS, you would have the option of calling the APIs in server-based application though.

6

Thanks Tim. That's what I have been trying to do with the xhr calls. Is
there a tested way of doing this with proxy.. like nginx?

7

If you are to use nginx as a proxy to make your application appear to call Kibana from the same domain, I believe the process would be to:

  1. Define a server section in nginx
  2. The server section has a path that proxies Kibana, and a path that proxies your application

Kibana would have to have the server.basePath setting configured. Then, you get to Kibana through:

...and you get to your application through:

This is just a rough explanation because internally, this isn't routinely tested. But proxying Kibana to use a subpath of a domain is common.

8

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