Embed Kibana Iframe in Angular|Kibana Guide

瀏覽人次: 2064
2022-11-18 更新

Kibana logo

準備環境

  • 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 如何設置

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

聯絡我們

快速跳轉目錄

✦ 集先鋒 Bimap – 企業建置高速穩定的海量日誌分析平台✦

集中不同的結構化資料和非結構化日誌,並進行關聯性的大數據整合,客製化儀表版、自訂事件告警、機器學習等等,以滿足各種大數據的應用場景和解決方案。