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';"
>