Embed Kibana Iframe in Angular｜Kibana Guide

準備環境

• Nginx




• Angular 13




• 
  Kibana 8.3.3

修改 Route

vim /etc/kibana/kibana.yml

server.basePath: "/kibana_iframe"
server.rewriteBasePath: true
server.publicBaseUrl: "https://10.99.1.1:5601/kibana_iframe"

修改後，將網址貼上網頁測試是否成功

產生驗證簽名檔

選擇其中一個方式。

方法1：設定好帳號密碼，下面的 nginx 會需要這邊產生的 htpasswd.user 簽名檔

htpasswd -c /etc/nginx/htpasswd.user admin

方法2：產生一個 token，可以寫入 nginx 設定檔

echo -n 'bimap:1qaz@WSX' | base64

設定 Nginx

如果 Nginx 已有其他 Server 設定，請務必切再一個 server 出來用，較無問題。

auth_basic 可以選擇用 off，否則會在網頁上多一次彈窗輸入驗證

方法1：

events{}
http {
  include /etc/nginx/mime.types;
  server { 
    listen 8443; 
    location / { 
      auth_basic "Restricted Access"; 
      auth_basic_user_file htpasswd.user; 
      proxy_set_header  Host $host; 
      proxy_set_header  X-Real-IP $remote_addr; 
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for; 
      proxy_pass http://10.99.1.152:5601; 
    } 
  }
}

方法2：

events{}
http {
  include /etc/nginx/mime.types;
  server { 
    listen 8443; 
    location / {
      proxy_set_header  Authorization "Basic {{ your token }}"; 
      proxy_set_header  Host $host; 
      proxy_set_header  X-Real-IP $remote_addr; 
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for; 
      proxy_pass http://10.99.1.152:5601; 
    } 
  }
}

Angular DomSanitizer Iframe URL

安全性的因素，不能使用網址自帶帳密的方式，且 Google 也禁止。

將 Kibana 中取得的 iframe 網址，帶入到 DomSanitizer 的 bypassSecurityTrustResourceUrl，讓 Angular 知道該網址是經過確認的來源。

this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(kibanaIframeURL);

<iframe [src]="iframeSrc" style="height: 100%; border: none; width: 100%;"></iframe>

Grafana Iframe 如何設置

有任何問題，或是想看新主題?

聯絡我們