Unable to embed Kibana dashboard on a reverse proxy server using Nginx

[Fabian_Matesa (Fabian Mateša)]

I am trying to embed a Kibana dashboard using Nginx, but keep getting a blank screen. No errors are thrown (except for the expected "inline script" error), but nothing gets loaded. Kibana is deployed on an Azure cloud, and I don't have admin access, so I am unable to edit the .yaml file. I am trying to embed Kibana in my Angular app using iframe.
Here is my Nginx config file:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }

        location /api {
            proxy_pass http://localhost:8080/<client>/api;
            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;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $remote_addr;
        }

        location /kibana/ {
            add_header X-my-debug $http_referer;
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/;
            sub_filter_once     off;
            sub_filter          'src="bootstrap.js'  'src="/kibana/bootstrap.js';
            proxy_set_header    X-Real-IP $remote_addr;
            proxy_set_header    Authorization '<auth-info>';
            proxy_set_header    X-Found-Cluster cbca73a5db19409287b3e17ef1a3df82;
            proxy_set_header    Host $host;
            proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header    X-Forwarded-Proto $scheme;
            proxy_set_header    Connection "Keep-Alive";
            proxy_set_header    Proxy-Connection "Keep-Alive";
            proxy_redirect    off;
            add_header          Content-Security-Policy "script-src 'self' <company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline' 'unsafe-eval';" always;
        }

        location /bootstrap.js {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/bootstrap.js;
            add_header          Content-Security-Policy "script-src 'self' https://<company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline' 'unsafe-eval';" always;
        }

        location /39457/ {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/39457/;
            add_header          Content-Security-Policy "script-src 'self' https://<company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline' 'unsafe-eval';" always;
        }

        location /translations/ {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/translations/;
        }

        location /node_modules/@kbn/ui-framework/dist/kui_light.css {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/node_modules/@kbn/ui-framework/dist/kui_light.css;
        }

        location /ui/legacy_light_theme.css {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/ui/legacy_light_theme.css;
        }
        
        location /api/core/capabilities {
            proxy_pass         https://<company-name>.azure.elastic-cloud.com:<port>/api/core/capabilities;
        }

        location /ui/fonts/inter_ui/ {
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/ui/fonts/inter_ui/;
        }
        
        location /internal/ {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/internal/;
        }

        location /api/licensing/info {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/api/licensing/info;
        }

        location /api/saved_objects_tagging/tags {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/api/saved_objects_tagging/tags;
        }

        location /logout {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/logout;
        }

        location /api/ui_counters/_report {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/api/ui_counters/_report;
        }

        location /api/security/logout {
            proxy_set_header    Authorization '<auth-info>';
            proxy_pass          https://<company-name>.azure.elastic-cloud.com:<port>/api/security/logout;
        }

        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
    }

}

and I also have this in my index.html:

<meta http-equiv="Content-Security-Policy" 
  content="
  script-src 'self' https://<company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline' 'unsafe-eval';
  frame-src 'self'https://<company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline';
  style-src 'self' https://<company-name>.azure.elastic-cloud.com:<port> 'unsafe-inline';"
  >

[cheiligers]

@Fabian_Matesa Welcome to the community!
It looks like you might be missing auth as was the case for this older post.

You can compare your nginx config with the one described in that post.

[cromat (Tomislav Brabec)]

@cheiligers Have you even read the whole question? There is already Authorization header.