Chrome で安全でないという警告を回避する

Eric Lawrence 氏

9 月に発表したとおり、Chrome ではまもなく、パスワードとクレジット カードの入力フィールドを含むセキュアでないページの URL バーを「保護されていません」としてマークします。

このドキュメントは、ウェブ デベロッパーがこの警告を回避するためにサイトを更新する際の手助けとなることを目的としています。

警告を有効にする

Chrome 56 では、2017 年 1 月にリリース予定の Chrome 56 では、すべてのユーザーに対して警告がデフォルトで有効になります。

この期限までに提供予定のユーザー エクスペリエンスをテストするには、最新の Google Chrome Canary ビルドをインストールしてください。

2017 年 1 月に表示されるとおりに警告を表示するように Chrome を設定するには、chrome://flags/#mark-non-secure-as を開き、Mark non-secure origins as non-secure オプションを Display a verbose state when password or credit card fields are detected on an HTTP page に設定します。その後、ブラウザを再起動します。

ブラウザの警告動作の例は、こちらのページで確認できます。

[Not Secure] 状態が表示されている場合、DevTools コンソールには This page includes a password or credit card input in a non-secure context. A warning has been added to the URL bar. というメッセージが表示されます。

コンソールの警告の例。

警告を解決する

ページに保護されていない警告が表示されないようにするには、<input type=password> 要素を含むすべてのフォームと、クレジット カード フィールドとして検出されたすべての入力が、安全なオリジンにのみ存在するようにする必要があります。つまり、トップレベル ページは HTTPS である必要があり、input が iframe 内にある場合は、その iframe も HTTPS 経由で配信する必要があります。

サイトが HTTP ページに HTTPS ログイン フレームをオーバーレイしている場合は...

HTTP 経由の HTTPS ログインの例。

サイト全体で HTTPS を使用するように(理想的には)サイトを変更する必要があります。または、ログイン フォームを含む HTTPS ページにブラウザ ウィンドウをリダイレクトする必要があります。

HTTPS 経由の HTTPS ログインの例。

長期 - あらゆる場所で HTTPS を使用する

最終的には、ページに機密性の高い入力フィールドが含まれているかどうかにかかわらず、HTTP で配信されるすべてのページで「保護されていない」という警告が表示されます。対象を絞った解決策のいずれかを採用する場合でも、すべてのページで HTTPS を使用するようにサイトを移行することを検討してください。