Kibanaのダッシュボードをiframeとして埋め込む

解決したい課題

元々Kibana6.x環境で、作成したダッシュボードを他のサーバからiframeを使って表示させていました。Kibana環境を7.xを変更したところ、デフォルトの状態だとダッシュボードにアクセスするにも認証が必要になるようで、これを回避するためにnginxを間に挟み、ヘッダーを使って認証情報を渡す形にしました。
※バージョンというより導入方法の違いかもしれませんが。

環境

Elastic: 7.10.0
Nginx: 1.19.5
CoreOS: 2247.6.0

構成

あまり本筋には関係ないですが、全体の構成としては以下のような形になっています。

既にKibanaのダッシュボードと、それを表示させるウェブサーバは構築済の前提です。

Nginxの導入と構成

CoreOS上でdocker-composeを使用して導入しました。
以下のようなディレクトリ構造を作成します。

nginx/
├docker-compose.yml
└nginx.conf

それぞれの中身はこちら。

docker-compose.yml

version: '3'

services:
  reverse-proxy:
    image: nginx
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 80:80

docker-compose.ymlについては、同じディレクトリにあるnginx.confを設定ファイルとして使用するという設定が入っています。

nginx.conf

events {
        worker_connections  1024;
}
http {
        server {
                listen       80;
                server_name  10.10.10.100;

                location / {
                        proxy_set_header  Authorization "Basic xxxxxxxxxxxxxx"; #ユーザとパスワードをエンコード
                        proxy_pass  https://10.10.10.200:5601; # KibanaサーバのURL
                }
        }
}

proxy_set_headerというパラメータで認証情報を渡します。Base64でエンコードしたものを使用します。あまりセンシティブでなければ、オンラインでエンコードすることも可能。
https://www.base64encode.org/

proxy_passにKibanaのURLを渡します。ここではポートまでしか記載しないことがポイントです。最後にスラッシュを含めると解釈がややこしくなるので、含めないほうがよいです。
× proxy_pass https://10.10.10.200:5601/
× proxy_pass https://10.10.10.200:5601/app/dashboards

これらを用意したら、起動します。

core@localhost ~/nginx $ docker-compose up -d
Creating network "nginx_default" with the default driver
Creating nginx_reverse-proxy_1 ... done

ウェブサーバ側(iframe)

以下のようなiframeタグを用意すれば、認証無しでダッシュボードが表示されます。Kibanaのダッシュボード画面のShareというボタンからURLは取得できますが、ホスト名とポートの部分を自分の環境に合わせて変更しています。

<iframe src="http://10.10.10.100:8080/app/dashboards#/view/c7a7ef90-361f-11eb-9711-6531136bb57b?embed=true&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-2y%2Cto%3Anow))&hide-filter-bar=true" height="1600" width="100%" scrolling="no" frameborder="0"></iframe>

参考

iframeとしてKibanaのダッシュボードを認証無しで表示する方法
https://discuss.elastic.co/t/auto-authenticating-to-iframe-embedded-kibana-dashboard/46091/4

nginxのconfの書き方
https://heartbeats.jp/hbblog/2012/04/nginx04.html