Embed Grafana Iframe in Angular｜Grafana Guide

準備環境

• Nginx
• Angular 13
• Grafana 9.2.0

修改 Route

vim /etc/grafana/grafana.ini

[server] 
domain = example.com 
root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana_iframe/ 
serve_from_sub_path = true

[auth.proxy]
enabled = true
header_name = X-WEBAUTH-USER

[security]
allow_embedding = true

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

產生驗證簽名檔

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

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

設定 Nginx

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

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

location /grafana_iframe { 
    auth_basic off; 
    auth_basic_user_file /etc/nginx/htpass.user;
    proxy_set_header Host $http_host; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Proto $scheme; 
    proxy_set_header X-WEBAUTH-USER admin;
    proxy_set_header Authorization ""; #將 token 清空
    proxy_pass http://10.99.1.1; # 設置代理服务器的協議和地址 
}

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>

Kibana Iframe 如何設置

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