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