Iframe not Load Properly with NGINX & Kibana

Elastic Stack Kibana
1

Hi Masters,

Kindly need your expertise on Kibana & NGINX config.
So my Kibana Application and Angularjs is running in the same server and I have enable the connection from internet.

So when i hit mydomain.com, browser will display my Angular apps.
Inside my Angular Apps, I have an Iframe which is the url of my Kibana Dashboard.

Everything accessible if I access from a direct URL.

  1. https://mydomain.com -> it will go to my Angularjs
  2. https://mydomain.com/kibana -> it will go to my Kibana

It is not working if I tried to get the embeded code from Kibana and put it into my Angular Iframe. Do you happen to know why?

My current NGINX config as below:

Server {
  listen 80;
  server_name mydomain.com;

  location / {
     root /usr/share/nginx/html;
     try_files $uri $uri/ /index.html;
  }

  location ~ ^/kibana/(.*)$ {
     rewrite /kibana/(.*) /$1 break;
     proxy_pass http://DOMAIN_IP:5601;
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection 'upgrade';
     proxy_set_header Host $host;
     proxy_cache_bypass $http_upgrade;
  }
}

Current Kibana Config as below:

#Server Setup
server.port: 5601
server.host: 0.0.0.0
server.basePath: "/kibana"
path.data: "/app/kibana/data"

My Iframe Code as below:

<iframe src="http://mydomain.com/kibana/s/realtime/app/kibana#/dashboard/fnjd7230-en1c-10l9-bmk4-2d8ks6be2e99?embed=true&_g=()" height="600" width="800"></iframe>

Use the same url above, copy the url and open in the new tab, able to work but not in Iframe.

2

Do you see any errors in the browser console?