ロゴ

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

※本ページはプロモーションが含まれています

南京錠

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」で表示させることができた。

おわりに

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

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