# Is there any method to set content security policy only in Kibana plugin code?

**URL:** <https://discuss.elastic.co/t/is-there-any-method-to-set-content-security-policy-only-in-kibana-plugin-code/193899>\
**Category:** Kibana\
**Created:** [August 5, 2019, 11:52pm UTC](https://discuss.elastic.co/t/is-there-any-method-to-set-content-security-policy-only-in-kibana-plugin-code/193899 "2019-08-05T23:52:52Z")\
**Posts on this page:** 3\
**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, 11:52pm UTC](https://discuss.elastic.co/t/is-there-any-method-to-set-content-security-policy-only-in-kibana-plugin-code/193899/1 "2019-08-05T23:52:52Z")

</div>

Currently, I am developing a kibana plugin that uses iframe to load remote website. Here is the content of `plugins/query_ai/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;
    this.setState({});
  }
  render() {
    const { title } = this.props;
    return (
      <iframe width="100%" height="100%" frameBorder="0" src="https://ai.query.ai" />
    );
  }
}

```

However, the content security policy blocks the remote website `https://ai.query.ai`:

 ![screenshot](https://us1.discourse-cdn.com/elastic/original/3X/5/6/5668c76d32336c193ae3530bd84f84bbe73a31eb.png)  
The error message is `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.`

I wonder how to set content security policy in the Kibana plugin files so that the iframe can work as expected?

---

<div class="post-metadata">

**Author:** ![christophilus](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/christophilus/32/42991_2.png) [@christophilus](https://discuss.elastic.co/u/christophilus)\
**Post date:** [August 6, 2019, 3:40pm UTC](https://discuss.elastic.co/t/is-there-any-method-to-set-content-security-policy-only-in-kibana-plugin-code/193899/2 "2019-08-06T15:40:08Z")

</div>

You can't configure this via your plugin, but the end-users of Kibana can configure it. In kibana.yml, they can specify the `content-security-policy` header, as documented here:

[https://www.elastic.co/guide/en/kibana/7.1/settings.html](https://www.elastic.co/guide/en/kibana/7.1/settings.html)

I _think_ it would need to look something like this: `csp.rules: "frame-src 'self' https://ai.query.ai/"`

---

<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 3, 2019, 3:40pm UTC](https://discuss.elastic.co/t/is-there-any-method-to-set-content-security-policy-only-in-kibana-plugin-code/193899/3 "2019-09-03T15:40:10Z")

</div>

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