# The problem of using iframe when developing a Kibana plugin that loads remote website

**URL:** <https://discuss.elastic.co/t/the-problem-of-using-iframe-when-developing-a-kibana-plugin-that-loads-remote-website/193858>\
**Category:** Kibana\
**Created:** [August 5, 2019, 5:37pm UTC](https://discuss.elastic.co/t/the-problem-of-using-iframe-when-developing-a-kibana-plugin-that-loads-remote-website/193858 "2019-08-05T17:37:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sunminxuan](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@sunminxuan](https://discuss.elastic.co/u/sunminxuan)\
**Post date:** [August 5, 2019, 5:37pm UTC](https://discuss.elastic.co/t/the-problem-of-using-iframe-when-developing-a-kibana-plugin-that-loads-remote-website/193858/1 "2019-08-05T17:37:43Z")

</div>

I am developing a Kibana plugin and named it _test-3_. This is the content of `kibana/plugins/test_3/public/components/main/main.js`:

```auto
import React from 'react';

export class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    /*
       FOR EXAMPLE PURPOSES ONLY. There are much better ways to
       manage state and update your UI than this.
    */
    const { httpClient } = this.props;
    httpClient.get('../api/test3/example').then((resp) => {
      this.setState({ time: resp.data.time });
    });
  }
  render() {
    const { title } = this.props;
    return (
        <iframe src="https://ai.query.ai"></iframe>
    );
  }
}

```

And i opened the Chrome and go to [http://localhost:5601/vpr/app/test\_3](http://localhost:5601/vpr/app/test_3). It's failed to load `https://ai.query.ai` and giving error: `Refused to frame 'https://ai.query.ai/' because it violates the following Content Security Policy directive: "child-src blob:". Note that 'frame-src' was not explicitly set, so 'child-src' is used as a fallback.`:

 ![screenshot](https://us1.discourse-cdn.com/elastic/original/3X/5/6/5668c76d32336c193ae3530bd84f84bbe73a31eb.png) .

I think the iframe is failed to use is because of the content security policy. I wonder what should i do to make iframe works in this scenario? Thanks!!

---

<div class="post-metadata">

**Author:** ![joshdover](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/joshdover/32/42020_2.png) [@joshdover](https://discuss.elastic.co/u/joshdover)\
**Post date:** [August 5, 2019, 6:06pm UTC](https://discuss.elastic.co/t/the-problem-of-using-iframe-when-developing-a-kibana-plugin-that-loads-remote-website/193858/2 "2019-08-05T18:06:27Z")

</div>

To make this work, you'll need to configure the Content Security Policy so that iframes for your domain are allowed. To do that, you'll need to add a section like the one below to your kibana.yml file to allow iframes from the [https://ai.query.ai/](https://ai.query.ai/) domain.

```auto
# kibana.yml
csp.rules:
  # current defaults
  - "script-src 'unsafe-eval' 'nonce-{nonce}'"
  - "worker-src blob'"
  - "child-src blob:"
  # New rule for iframes
  - "frame-src https://ai.query.ai/"

```

Note that modifying the CSP rules is not generally recommended and should be used at your own risk. This will allow code from ai.query.ai to run within the context of the logged in user, so be sure that this domain is one that you trust.

---

<div class="post-metadata">

**Author:** ![sunminxuan](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@sunminxuan](https://discuss.elastic.co/u/sunminxuan)\
**Post date:** [August 5, 2019, 6:50pm UTC](https://discuss.elastic.co/t/the-problem-of-using-iframe-when-developing-a-kibana-plugin-that-loads-remote-website/193858/4 "2019-08-05T18:50:08Z")

</div>

Thank you for your response, Joshdover, adding the sections in kibana.yml works for me. However, Is there any way to make it work by just editing the Kibana plugin code? Or in other words, how can we config content security policy only in kibana plugin code?

Since i am developing a kibana plugin and editing kibana.yml might not be a valid solution for me.

---

<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:** [September 2, 2019, 6:50pm UTC](https://discuss.elastic.co/t/the-problem-of-using-iframe-when-developing-a-kibana-plugin-that-loads-remote-website/193858/5 "2019-09-02T18:50:14Z")

</div>

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