Problem with google map api integration in React Kibana Plugin

Elastic Stack Kibana
1

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 'unsafe-eval' 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I checked the component in a fresh react app outside the Kibana. The map loads easily there. But facing problem in Kibana. I am using Kibana 7.4.2 in -oss mode in localhost and an ElasticSearch is running in Elastic Cloud.

How can I approach and solve this issue?

2

hi @RaghibHuda

Loading external scripts (from a different domain) are prohibited by the default Kibana content security policy. That is why it is preventing to load the Google Maps API script.

You can modify the csp-settings by editing the csp.* properties in the kibana.yml (https://www.elastic.co/guide/en/kibana/current/settings.html). To load external scripts, you would need a custom CSP.

1 Like
3

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