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

[sunminxuan (Minxuan Sun)]

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:

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:

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?

[christophilus (Chris Davies)]

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

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