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

[sunminxuan (Minxuan Sun)]

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:

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. 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.:

.

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!!

[joshdover]

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/ domain.

# 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.

[sunminxuan (Minxuan Sun)]

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.