de-gucci.com

新しいモノが大好き、知るコトが大好き、楽しむコトが大好き♪

nginx + Let’s Encrypt の環境で Android からアクセスしたときエラー画面を出さなくする方法

nginx + Let’s Encrypt の環境で Android からアクセスしたときエラー画面を出さなくする方法

こんにちは。でぐっち(@de_gucci)です。

先日、AndoirdのGoogle Chromeで https://de-gucci.com にアクセスした際に「この接続ではプライバシーが保護されません」というエラー画面が出てしまうこと。

そして、エラー画面が出たときの対処方法について書きました。コレ↓

Google Chromeでhttps://de-gucci.comにアクセスしたらエラー画面が出た場…

現在、安全なサイトにのみアクセスしようという流れがあり、Google Chromeなどでhttpsサイトにアクセスした際に、エラーらしき画面が表示される場合があります。de-gucc…

別件でメールのやりとりを暗号化する SMTP over SSL について調べているときに、このエラー画面が出る原因が判明し、その対処を KUSANAGI + nginx + Let’s Encrypt の環境で実施してうまく行ったようなので紹介します。

Androidで「この接続ではプライバシーが保護されません」が出る原因

iPhoneやiPadでは出ず、また、MacやPCのWebブラウザでも出ない。出るのはAndroidだけ、、、

ということで、ずっとAndoid版の画面表示をするときにAndroidであることをUSER-AGENTなどで判別し、画面表示をするときにhttpsとhttpのURLが混在しているためだと考えていました。

でも、実際には Webサーバである nginx で指定する証明書が間違っていたことが判明しました。

対処方法

気づいたキッカケはこのブログ記事

Let’s Encrypt + ApacheのSSL設定を間違ってAndroidからのアクセスを1/5に…

あーあ、やっちまいましたね。 多分大丈夫だと思うけど既にSEO効いてるページを一気にSSL対応するの怖すぎる— hazumu (@hazumu) 2016年10月27日 こんなこと言ってたのに…

ここの中に

Apacheの証明書周りの設定で、fullchain.pemというサーバー証明書と中間証明書が両方含まれたファイルの設定を漏らしていました。
こいつ何が問題かって、PCの各種ブラウザ(IE, Safari, Chrome)、iOS Safariだとなんの問題もなく表示されてしまうところです。

という記述があったんです。

Let’s Encryptでは

  • cert.pem (サーバ証明書(公開鍵))
  • chain.pem (中間証明書)
  • fullchain.pem (サーバ証明書と中間証明書を統合したもの)
  • private.pem (秘密鍵)

の4つの証明書ファイルが作成されます。

nginxの設定では /etc/nginx/nginx.conf などに下記の記述を加えます。

server {

listen 443 ssl http2;
server_name example.com

ssl_certificate /etc/letsencrypt/live/example.com/cert.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

(中略)
}

この ssl_certificate、ssl_certificate_key の ssl_sertificate にサーバ証明書(公開鍵)である cert.pem を指定してしまっていたんです。

が、サーバ証明書だけでは Android は正しいサイトと認識してくれず、実際にはサーバ証明書と中間証明書が統合された fullchain.pem を指定しなければならなかったんです。

実際に
ssl_certificate /etc/letsencrypt/live/example.com/cert.pem;

ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;

に書き換えて、nginx を再起動したところ、Androidでエラーが出なくなりました。

以上、ご参考まで。

 

ちなみに変更したところ、はてなブックマークしたときに表示されなかったOGPが表示されるようになりました。

 
おもしろい!参考になった!という方は、よろしければはてなブックマークをお願いします。

このエントリーをはてなブックマークに追加

The following two tabs change content below.
コンピュータ会社に勤めるサラリーマン。 Apple製品、電子小物など、新しいものが大好き。 インターネットビジネス、ブログ運営、iOSプログラミングなど、学ぶことが大好き。 グルメ、旅行、映画鑑賞、音楽鑑賞など、楽しむコトが大好き♪ 夢はプロブロガー?「質より量より更新頻度」をスローガンに更新中♪ 詳細なプロフィールはこちら

コメントはこちらへ

*

コメントはこちらへ

Return Top