Embed kibana dashboard to external UI app

HI Elastic Team,

We are in process of embedding kibana dashboard (elastic + kibana setup we created using Azure marketplace) into separate web application (which was developed in angular 7). This can be done by sharing dashboard and embedding iframe into web app. This works perfectly but the problem is it prompts login page
From different discussion threads from https://discuss.elastic.co/ we have come to know that it is possible to eliminate login page and access dashboard directly by auto-authentication (for this there are two possible ways)

1st method:
Making POST request to api/security/v1/login with username and password which will return a cookie containing “sid” with that cookie iframe loads without prompting login page. But when we tried this, we got CORS issue and again from different discussion threads we came to know we need edit Kibana.yml file to overcome this CORS problem. We updated kibana.yml with server.cors = true and server.cors.origin = [‘*’]

This made options call success (status code 200 but http method OPTION) but still chrome console shows cors error. Now we are stuck at this point.

2nd method:
Using Reverse Proxy Mechanism with header of basic authorization in nginx is another solution we tried. This time our kibana is at URL of localhost:5600 and we installed nginx server in our ubuntu machine where kibana is hosted. We are getting 502 http status code error when we try to access nginx url, below is config we have used in nginx.

worker_processes 1;

events {
worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;

sendfile        on;

keepalive_timeout  65;

server {

listen 4040;
server_name xxxxxxxxxxxxx.centralus.cloudapp.azure.com;
error_log /var/log/nginx/elasticsearch.proxy.error.log;
access_log off;

location / {

proxy_pass http://127.0.0.1:5600/;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Connection "";

proxy_set_header  X-Real-IP  $remote_addr;
proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header  Host $http_host;

# For CORS Ajax
proxy_pass_header Access-Control-Allow-Origin;
proxy_pass_header Access-Control-Allow-Methods;
proxy_hide_header Access-Control-Allow-Headers;
add_header Access-Control-Allow-Headers 'X-Requested-With, Content-Type';
add_header Access-Control-Allow-Credentials true;

}

location /test{
proxy_pass 127.0.0.1:5600/
}
}

}

You can embbed the link in iframe and play around with dashboard using query!

I think what you’re missing in your reverse proxy is setting the login credentials for Kibana. I was actually trying to do something similar to you today and managed to get it working, you can see my nginx configuration here

I am newbie in elastic stack and trying to find a way of embedding kibana visualization(s) in external UI app, built in angular 5, without using iframe.
Explored following link of docs:

https://www.elastic.co/guide/en/kibana/7.5/development-embedding-visualizations.html

but as per my understanding it is useful when someone wants to contribute to kibana visualizations.

can it be used to embed visualizations in external UI app??

@Jeremy_Andrews can you please comment on my reply??

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