Embedding Kibana dashboard in a React web app

Elastic Stack Kibana
1

Hello,

My team has been exploring on the options to embed Kibana dashboard into a React web app. After some exploration we have found the below options:

  1. iFrame is one way. But we dont want to use iFrame due to security reasons.
  2. Canvas: Using Canvas and embedding it using the embeddable plugin. This might not be suitable for our use case as it offers very limited features.
  3. Kibana API: GitHub - Webiks/kibana-API: Kibana-API is an extension to Kibana that lets you tap in to the dashboard management board from your app and change the visualizations dynamically
    Again this requires to use iFrame so not going to work for us.

Also, we have seen the various discussions that has happened around this topic and they are all few years old.
So I am bringing this question once again to see if there are any new options that is possible as Kibana has added a lot more features in the past few years.

So please let us know of any suggestions.

2

Hi,

Unfortunately, I think there are not many options for you:
The obvious option would be to switch from using Kibana dashboards to the Elastcsearch API and to create the visualizations in React. But, depending on your usecase, this might double the effort to maintain the dashboard in both Kibana and React.

Although you explicitly asked for options without iFrame, I would still like to ask:
Have you already explored all your options to secure the iFrame? Like setting CSP, CORS, iFrame Sandbox attribute, ...

Best regards
Wolfram

3

@Wolfram_Haussig Thank you for the response. Will check on the options you have mentioned.

4

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