GoogleCloudのRedashで「接続が拒否されました」とiframeが失敗する理由

Redashのグラフ埋め込み機能でiframeのタグが出てきたけど、そのままコピペしてもグラフが表示できない…。

iframeで表示しようとしているURLにブラウザでアクセスしたら表示できるのに。

Redashは様々なデータソースから抽出したデータをクエリで結合して可視化できるサービスだ。

RDBMSやNoSQL、BigDataなどのデータソースに対応しており、複数のデータソースからクエリを作成し、そのクエリをクエリリザルトとしてさらに結合して可視化できるのがRedashのひとつの強みである。

GoogleCloudではマーケットプレイスに登録されているので、インストール作業不要でRedash用インスタンスを作成できる。

そして可視化したグラフはiframeで他のサイトに埋め込むことができる。

埋め込み用URLとiframeタグ

しかしそのiframeでの埋め込みをしたときにエラーになってしまう。

xx.xx.xx.xxで接続が拒否されました

まるでRedash側で接続拒否しているようなメッセージだが、iframe経由ではなく直にWEBブラウザにグラフのURLを打ち込んだらアクセスできる。

なぜiframe経由だとRedashのグラフが表示できないのか。

そこで今回はGoogleCloudのRedashで「接続が拒否されました」とiframeが失敗する理由について紹介する。

この記事を書いている人

システムエンジニア、AIエンジニアと、IT業界で10年以上働いている中堅。PythonとSQLが得意。

GoogleCloudのRedashで「接続が拒否されました」とiframeが失敗する理由

GoogleCloudのRedashで「接続が拒否されました」とiframeが失敗する理由。

それはHTTPS対応していないから。

Redashインスタンス側に何か接続を拒否する設定があるとかではなく、HTTPSじゃないからなの？

そうなんですよ。メッセージからでは全然わかりませんが。

マーケットプレイスから作成したRedashのインスタンスはSSL対応していない。

何も設定していなければドメインを使ったアクセスもできないので、IPでアクセスすることになる。

なのでグラフのURLも http://xx.xx.xx.xx/embed/query/1/visualization/1/?api_key=xxxxxx のような形式になっているはずだ。

そしてHTTPS（SSL）対応されているWEBサイト上にiframeタグを設置して、そこからHTTPサイトを参照しようとすると接続拒否エラーになる。

Redashインスタンス側が接続を拒否してたわけじゃなかったの？

WEBブラウザ側も拒否するらしいですが、挙動を見た感じだとiframeからHTTPのサイトを予防としたのに、HTTPSに書き換えられててHTTPS化してないサイト側に接続拒否されたような挙動をしてたんですよね。。。

iframeを設置したサイト側で読み替えでもしてるんですかね。。。

解決方法

GoogleCloudのRedashで「接続が拒否されました」とiframeが失敗する理由は「HTTPS化していないから」だった。

なので解決方法は「HTTPS（SSL）対応する」ということになる。

RedashのHTTPS（SSL）の設定については、公式サイトにガイドが記載されている。

ガイドのページでは「最新版の設定はコチラ」とGistのページに誘導している。

しかしここの手順には少し誤っている箇所があり、手順のまま操作すると設定変更が反映されない。

私のようなDockerコンテナの初心者を泣かせる罠である。

なので細かい設定方法については、また記事を作成しようと思うので、そちらを見て欲しい。

つづく。