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

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

このドキュメントは、ウェブ デベロッパーがサイトを更新して、この警告を回避できるようにすることを目的としています。

警告を有効にする

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

この時間より前に今後のユーザー エクスペリエンスをテストするには、最新の Google Chrome Canary ビルドをインストールしてください。

Chrome で 2017 年 1 月の警告が表示されるように設定するには、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 に設定します。その後、ブラウザを再起動します。

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

保護されていない状態が表示されると、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 を使用する

最終的には、Chrome では、ページに機密性の高い入力フィールドが含まれているかどうかにかかわらず、HTTP 経由で配信されるすべてのページに対して、保護されていない警告を表示します。上記のような、よりターゲットを絞った解決策のいずれかを採用する場合でも、すべてのページで HTTPS を使用するようにサイトを移行する計画を立ててください。