B i M A P

Embed Kibana Iframe in Angular|Kibana Guide

Kibana logo


準備環境

  • Nginx
  • Angular 11
  • Kibana 7.11


產生驗證簽名檔

選擇其中一個方式。

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

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

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

echo -n 'bimap:[email protected]' | base64


設定 Nginx

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

方法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>




有任何問題,或是想看新主題? 聯絡我們

延伸閱讀
winstonlu的大頭照
ELK 達人

我們致力於 ELK 的各種應用,協助企業建置相關服務。我們也提供基於 ELK 的各種解決方案,有任何問題,觀迎加入我們的官方 Line,或來信詢問,期待與您面對面的機會。