URLがhttpsであればSSL対応済みと勘違いしているWeb担当者が多い問題

URLがhttpsであればSSL対応済みと勘違いしているWeb担当者が多い問題

https ≠ SSL対応済み

Chrome62からHTTPでフォーム送信するサイトにGoogleが警告を表示するようになるとIT界隈では話題になっている。

Web担当者などに話を聞くと「うちはURLがhttpsでSSL対応済みだから問題ない!」という回答が多いのだが、企業のお問い合わせフォームを見てみると正しく対応されていないことが非常に多い。

保護された通信の表示がない

URLがhttpsで正しくSSL対応がされているWebページの場合、URLの左部分に緑色で「保護された通信」と表示される。

逆に言うと、httpsでも正しくSSL対応がされていなければ「保護された通信」と表示されないのだ。

例えば森永製菓の場合、URLはhttpsだが「保護された通信」とは表示されておらず、iボタンをクリックすると「このサイトへの接続は完全には保護されていません」と表示される。※
iボタンをクリックすると「このサイトへの接続は完全には保護されていません」と表示される

https://www.morinaga.co.jp/cgi-bin/soudan_form/mrg_sou_inquire.cgi

※追記:現在は修正済み。記事投稿からわずか数時間で修正された。
森永製菓の代わりにカルビーのお問い合わせフォームを添付。


ご指摘戴きました件は、至急関連部門に申し伝え、修正させていただきました。

https://faq.calbee.co.jp/form/contactus.html
カルビーのお問い合わせフォーム

本来であればこのように表示されるのが正しい。
「保護された通信」の表示

https://meiji-otoiawase.jp/

保護された通信と表示されない理由

なぜ同じhttpsのURLでも「保護されていません」と「保護された通信」の表示の違いが出るのか。

答えは混合コンテンツが原因だ。

混合コンテンツとは

前述の森永製菓をChromeのDeveloper ToolsのConsoleで確認するとMixed Content(混合コンテンツ)と表示される。
ChromeのDeveloper ToolsのConsoleで確認するとMixed Content(混合コンテンツ)と表示される

混合コンテンツとはHTTPSのページで画像、動画、CSS、スクリプトなどが安全ではないHTTP接続で読み込まれると発生する。

ChromeはHTTPSのページでも安全でないHTTPプロトコルを使用してサブリソースをリクエストするとページのセキュリティが低下するため「このサイトへの接続は完全には保護されていません」と表示される仕様になっている。

そのため「保護された通信」と表示させるにはそのページだけSSL対応にするのではなく、リクエストもすべてHTTPSで行う必要があるのだ。

コンプライアンス違反の可能性も

ほとんどの企業サイトにはプライバシーポリシーがあり、森永製菓の場合は以下のように書かれている。

森永製菓は、お客様からお預かりした個人情報を厳重に管理いたします。森永製菓は、お預かりした個人情報を紛失、破壊、社外への不正流出、改ざん、不正アクセスから保護するために、合理的な安全対策を講じます。

SSL対応が正しく行われていない以上、「合理的な安全対策を講じている」とは言えないためコンプライアンス違反の可能性がある。

http://www.morinaga.co.jp/privacy/

今回は森永製菓を例に出したが、日本の多くの大手企業のお問い合わせフォームはSSL対応が正しく行われていないため森永製菓に限った話ではない。

混合コンテンツのサンプル

以上のことを踏まえて簡単なサンプルを作成した。

問題:以下の2つのうち混合コンテンツはどちらか?

混合コンテンツサンプルA

混合コンテンツサンプルB

答えは「保護された通信」とConsoleのMixed Content表示の有無で判断できる。

一方は「保護された通信」と表示されずConsoleにMixed Contentと表示される。
一方は「保護された通信」と表示されずConsoleにMixed Contentと表示される

HTMLをこのように記述してHTTPでリクエストしているため、上記のような結果になるのだ。

<form method="get" action="http://iwb.jp/">
  <p>サイト内検索</p>
  <input type="search" placeholder="検索 …" value="" name="s">
</form>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

ちなみにHTTPSではなくHTTPでリクエストしているファイルはConsoleではなくNetworkタブでmixed-content:allのフィルターをかけると確認しやすい。
Networkタブでmixed-content:allのフィルターをかけると確認しやすい

さらにSecurityタブを見ればNon-secure form / The page includes a form with a non-secure "action" attribute. と「保護された通信」と表示されていない原因が表示されるため便利である。
Chrome Developer Tools Securityタブ