# Iframe Embed Cross Origin Security Exception

**URL:** <https://discuss.elastic.co/t/iframe-embed-cross-origin-security-exception/101035>\
**Category:** Kibana\
**Created:** [September 19, 2017, 2:28pm UTC](https://discuss.elastic.co/t/iframe-embed-cross-origin-security-exception/101035 "2017-09-19T14:28:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![dixyantar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dixyantar/32/22293_2.png) [@dixyantar](https://discuss.elastic.co/u/dixyantar)\
**Post date:** [September 19, 2017, 2:28pm UTC](https://discuss.elastic.co/t/iframe-embed-cross-origin-security-exception/101035/1 "2017-09-19T14:28:11Z")

</div>

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](https://github.com/elastic/kibana/commit/d428175faf4ec4171de5f4b1fe0cefee8633d7fe) 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.

---

<div class="post-metadata">

**Author:** ![tsullivan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsullivan/32/31077_2.png) [@tsullivan](https://discuss.elastic.co/u/tsullivan)\
**Post date:** [September 20, 2017, 10:22pm UTC](https://discuss.elastic.co/t/iframe-embed-cross-origin-security-exception/101035/2 "2017-09-20T22:22:10Z")

</div>

Have you tried using the suggestions in this topic? [Kibana iFrame CORS](https://discuss.elastic.co/t/kibana-iframe-cors/54291)

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?

---

<div class="post-metadata">

**Author:** ![dixyantar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dixyantar/32/22293_2.png) [@dixyantar](https://discuss.elastic.co/u/dixyantar)\
**Post date:** [September 21, 2017, 7:01am UTC](https://discuss.elastic.co/t/iframe-embed-cross-origin-security-exception/101035/3 "2017-09-21T07:01:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tsullivan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsullivan/32/31077_2.png) [@tsullivan](https://discuss.elastic.co/u/tsullivan)\
**Post date:** [September 21, 2017, 5:20pm UTC](https://discuss.elastic.co/t/iframe-embed-cross-origin-security-exception/101035/4 "2017-09-21T17:20:47Z")

</div>

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: ['*']`?

---

<div class="post-metadata">

**Author:** ![tsullivan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsullivan/32/31077_2.png) [@tsullivan](https://discuss.elastic.co/u/tsullivan)\
**Post date:** [September 21, 2017, 6:19pm UTC](https://discuss.elastic.co/t/iframe-embed-cross-origin-security-exception/101035/5 "2017-09-21T18:19:10Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![dixyantar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/dixyantar/32/22293_2.png) [@dixyantar](https://discuss.elastic.co/u/dixyantar)\
**Post date:** [September 21, 2017, 6:31pm UTC](https://discuss.elastic.co/t/iframe-embed-cross-origin-security-exception/101035/6 "2017-09-21T18:31:12Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tsullivan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsullivan/32/31077_2.png) [@tsullivan](https://discuss.elastic.co/u/tsullivan)\
**Post date:** [September 21, 2017, 6:59pm UTC](https://discuss.elastic.co/t/iframe-embed-cross-origin-security-exception/101035/7 "2017-09-21T18:59:45Z")

</div>

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:

- [http://myproxy.mydomain.com/kibana](http://myproxy.mydomain.com/kibana)

...and you get to your application through:

- [http://myproxy.mydomain.com/myapplication](http://myproxy.mydomain.com/myapplication)

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [October 19, 2017, 7:00pm UTC](https://discuss.elastic.co/t/iframe-embed-cross-origin-security-exception/101035/8 "2017-10-19T19:00:28Z")

</div>

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