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

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

・ Secure
・ Info or Not secure
・ Not secure or Dangerous

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

ポイント１：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;

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

ポイント２：内部で 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などで教えてくれるので便利。