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証明書）入門