この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、CX事業本部 IoT事業部の若槻です。
今回は、Basic認証のキャッシュを削除（ログアウト）する方法を確認してみました。
環境
- Google Chrome 94.0.4606.71（Official Build） （x86_64）
まず結論
Basic認証でログイン済みのWebサイト（例：example.com）に、下記のようにホスト名の前に<任意の文字>@（例：me@）を付けてアクセスすれば、そのブラウザではログアウトできます。
https://me@example.com
再度ログインする場合は、ログアウトしたタブを閉じて新しいタブで開き直します。
Basic認証とは
"Basic" HTTP 認証方式は RFC 7617 で定義されており、Base64 を使用してエンコードされたユーザー ID とパスワードのペアとしてクレデンシャルを送信します。
検証環境として使用するWebサイトなどで「ユーザーログイン機能を導入するほどでは無いけど何らかの認証は掛けておきたい」という場合に、Basic認証を設定すればユーザーID/パスワードを使用した認証をWebサイトに簡単に導入することができます。
なぜログアウトしたいのか
すでにBasic認証で一度ログイン済みのWebページでは、その後アクセスをしてもキャッシュにより認証を求められなくなります。普通に使う分にはそれで便利なのですが、Basic認証周りの動作を確認したい場合や、単純にログアウトしたい場合があるからです。
ログアウトしてみる
Basic認証でログイン済みのWebサイトに、ホスト名の前に<任意の文字>@を付けてアクセスすればログアウトできるとのことです。
- How to clear basic authentication details in chrome - Stack Overflow
- http - How to log out user from web site using BASIC authentication? - Stack Overflow
どういうことかと言うと、Basic認証によるアクセス時はブラウザは下記のようなユーザー名とパスワードを含むURLでアクセスしています。またブラウザにはusername:passwordがキャッシュされ、次回以降のアクセス時に再利用されます。
https://username:password@www.example.com/
これをhttps://me@www.example.com/のようにしてアクセスすることにより、不正なユーザー名とパスワードでキャッシュを上書きし、実質的なログアウトを行うことができます。
実際に試してみます。下記の方法で実装したBasic認証付きサイトを使用します。
Webサイト（https://xxxxxxx.cloudfront.net）にアクセスするとまずBasic認証のログインを行います。
ログインできました。
ホスト名の前にme@を付けてアクセスしてみます。
するとBasic認証を要求されました。
このまま同じタブで正しいユーザーIDとパスワードを指定してログインを試行すると失敗します。ディベロッパーツールのNetworkを見ると、リクエストURLが引き続きme@が付いたものとなっています。一度この方法でアクセスすると以降のBasic認証でのアクセスもme@で上書きされるようです。
試しにこの時のナビゲーションバーのURLをコピーして新しく開いたタブのナビゲーションバーに貼り付けると、
下記のように@meが付いたURLとなっています。Google Chromeの機能でBasic認証の情報はナビゲーションバー上では非表示となるようです。
そこで別タブを開きWebサイトにアクセスし再度正しいユーザーIDとパスワードを指定してログインします。
再度ログインが成功しアクセスできました。
補足
ログアウト後に別タブを開かずにアクセスする方法
me@を付けてアクセスしたタブのままでも、https://user:pass@xxxxxxxxxxx.cloudfront.net/のように正しいログイン情報のURLでアクセスした場合は別タブを開かずにアクセス可能です。
一度のme@のアクセスでログアウトされない場合
me@を付けてアクセスしてもログアウトされずBasic認証を再度要求されない場合があります。その場合は何度か試行すれば要求されるようになります。（大抵2回目でログアウトできます。）
以上