今からお前んちこいよ

多摩川沿いにて細々とお勉強。

SSL(443ポート)のはずなのに "Not secure" とされてしまう理由

参考)Check if a site's connection is secure - Google Chrome Help
ChromeではURLバーに3種類のセキュリティーレベルが表示される。

https://storage.googleapis.com/support-kms-prod/9IKkC4co6mWlM461wyAF94BiF9nMmvcfaqUl Secure
https://storage.googleapis.com/support-kms-prod/rzP3Kj6ct8WH1Ez2S5wV6HCXQVJZg4z0dppd Info or Not secure
https://storage.googleapis.com/support-kms-prod/IFnvUSEwUHO4ppdhra3qLp1qTqnrZduuMwft Not secure or Dangerous

もちろん https通信なのだから Secure にしたいわけだが、いくつかのポイントで Info レベルに落ちてしまっている可能性がある。今回は2つのポイントに触れていく。

ポイント1:TLS1.2 にしましょう

例えばNginxの設定で、

ssl_certificate     /etc/letsencrypt/live/XXXX/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/XXXX/privkey.pem;
ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers         HIGH:!aNULL:!MD5;

としてしまっている場合は

ssl_certificate     /etc/letsencrypt/live/XXXX/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/XXXX/privkey.pem;
ssl_protocols       TLSv1.2;
ssl_ciphers         HIGH:!aNULL:!MD5;

と、暗号方式を指定してあげる。

ポイント2:内部で http を呼んでませんか?

特定のタグにおいて、 http でのリクエストをしている箇所がある場合のこと(Mixed Content: Mixed content - Web security | MDN)を指します。

httpでリクエストしても良いタグ

・ <img> (src attribute)   
・ <audio> (src attribute)  
・ <video> (src attribute)  
・ <object>   

http でリクエストしてはダメなタグ

・ <script> (src attribute)  
・ <link> (href attribute) (this includes CSS stylesheets)  
・ <iframe> (src attribute)  
・ XMLHttpRequest  
・ CSS内全てのURL  
・ <object> (data attribute)  

例えば、
・ headerで css や js の外部リンクが http となっている場合
・ CSS内で、background-img() が http となっている場合

見つける方法

\ ブラウザのコンソール /
エラーやWarningなどで教えてくれるので便利。