[ SOLVED] Adding custom csp rule on Elastic Cloud : 'csp.rules': is not allowed - Not possible yet

[IanCap (Ian Ducrot)]

Hi !

I'm currently trying to modify the Content Security Policy in the kibana.yml file on a Clouded Deployment to allow a custom javascript to run on a dashboard but i get the following error message when adding the csp rules

csp.rules': is not allowed

My configuration is the following :

csp.rules:
  # current defaults
  - "script-src 'unsafe-eval' 'self' 'nonce-{base64nonce}'"

I researched the following links first whitout success :

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

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.se…

Problem with google map api integration in React Kibana Plugin

I am developing a custom plugin with React for Kibana. I need to use google geocode and reverse geocode from google map API. But I am facing a problem when I inject the API script in my react component. It seems like it refuses to connect the Google Map API network. So the API throws a network error. Refused to load the script 'https://maps.googleapis.com/maps/api/js?key={MY_API_KEY}&libraries=places%2Cgeometry' because it violates the following Content Security Policy directive: "script-src …

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

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/examp…

Any help would be much appreciated !

Thanks in advance,

Ian

[azasypkin]

@IanCap

Clouded Deployment

Do you mean Elastic Cloud?

If so, then yeah I see it's not whitelisted there yet. Thanks for letting us know! We'll take care of this as soon as possible. But for now can you try to reach out to the Cloud support to see if they can do that for you?

Best,
Oleg

[IanCap (Ian Ducrot)]

I meant Elastic Cloud indeed, sorry about the wrong name

I expected that it wasn't possible yet, thanks for the quick answer !

I worked the problem an other way
Instead of trying to inject a script to modify the html/css in a dynamic way, i used a module of nginx to do it in a static way :
http://nginx.org/en/docs/http/ngx_http_sub_module.html

Thanks again

[azasypkin]

Thanks for sharing your solution! Yeah, that's also an option (and maybe even better than relaxed CSP rules ) .

[IanCap (Ian Ducrot)]

Surely much better after finding the said module