HTTPS対応したサイトで外部HTTP画像を警告無く表示させる方法

作成:2015/06/25

南京錠

HTTPS通信に対応したページに「https」ではなく「http」ではじまるリンクを入れるとアドレスバーの鍵マークに警告マークが表示されてしまいます。
鍵マークが表示されてしまう

これではせっかくのセキュアなイメージが台無しになってしまいます。

かといって「http」リンクを排除しようとすると外部リンクに制限ができ、A8などのアフィリエイトリンク・画像が使えなくなるのは困ります。

そこで、nginxで「https」に対応していないサイトの画像を「https」リンクにして警告マークが表示されない方法を紹介します。

URLの解析

例えば表示させたい画像の画像URLはこのようになっているとする。

http://hogehoge.com/svt/bgt?aid=…

ドメイン以下が「svt」となっているのでこれを使い、

https://example.com/svt/bgt?aid=…

のようにドメインを自分のhttpsのURL（ここではexample.comとする）に変えて、一度自分のサーバにアクセスし、そこから「hogehoge.com」の画像を返すようにする。

nginxのプロキシを利用して、特定のURLへのアクセスを外部サイトに接続する。

サイトの設定をしているファイルを開く。

$ sudo vi /etc/nginx/nginx.conf

sslの設定部分に「/svt」へのアクセスがあった場合のパスを設定。今回の例では「hogehoge.com」のURLを設定。

server {
     listen       443 ssl;

     …通常の設定

     location /svt {
           proxy_pass http://hogehoge.com;
     }

     …通常の設定
}

nginxを再起動

$ sudo service nginx restart

以上で「http」でしかアクセスできない画像を「https」で表示させることができた。

フリーのエンジニアになって仕事を自由に選びたい！正社員並みの保証が欲しい！

という相反する要望をかなえてくれるのが【midworks】です。

雇われるだけの生活から脱出してみませんか？

この方法ではURLを書き換えるというなかかなの力技なので使用する場合は自己責任でお願いします。

SSLに関して詳しく知りたい場合はこちらもどうぞ。
参考：ブロガーのためのHTTPS（SSL証明書）入門