Chromeで入力済みのBasic認証を初期化し、入力をやり直すための4つの方法。

はじめに

Google製のブラウザ、Chromeをずっと愛用してきています。

SessionやCookieの初期化は、Chromeの「要素を検証」から行えば簡単ですが、Basicの初期化 を行う方法がどれだけあるかを調べた結果、思っていたよりたくさんあったため、記事にしてご紹介したいと思います。

本記事の想定読者

Webサイト開発を行なわれているエンジニアの型
Basic認証がかかっているサイトを閲覧される管理ツール・CMS利用者の方

※ なお管理ツールについては、以下の記事でも解説している＆実際に私も業務で使っておりますので、ご興味があれば参考になさってください。

参考記事: 入稿管理システム「Strapi」をMySQL DBで運用する方法。類似サービスも交えて紹介。

4つの初期化方法

1. URLにユーザー名を追加する

この方法はとてもシンプルで、2番目に簡単 だと思います。

以下のURLがBasic認証がかかったURLだとします。こちらを、

https://moldspoon.jp

このように変更します。

https://me@moldspoon.jp/

解説

多くのブラウザは、URLに以下の形式でBasicのID&Passwordを含めると、ダイアログへの入力なしで認証を突破してくれる機能があります。

https://username:password@moldspoon.jp/

よろしければ、username:passwordのところをあなたの環境に合わせて試してみてください。

つまり、me@の部分はBasicのユーザー名を指定しているのですが、パスワードの入力がないため、ブラウザに失敗されたとみなされて、改めてBasicのダイアログをイチから出し直している ためこのような動きをします。

2. アドレスバーにchrome://restartを入力する（全部のサイトのBasicが消えるので注意！)

この方法は1番簡単ですが、タイトルに示す通り、全部のサイトのBasic入力情報が初期化されるという点で問題があります。 また、Chromeがいきなり閉じるので、作業しているものがあるときは消えてしまう可能性があります。 Google SpreadSheetで作業している時なんかは直前の履歴が消えて困る可能性もあるということです。

Chromeのアドレスバーに

chrome://restart

と入れるだけです。

解説

Chromeのデフォルトの機能を直に呼び出せるURLがchrome://です。（カスタムスキーム　と言います。）

方法としては一番簡単 ですが、ちょっと問題がある方法です。

逆の発想として、いろんなサイトのBasicをまとめて全部無効化したいときはアリかもしれません。

※ 念のためですが、CookieやSeession、閲覧履歴はこの方法では消えない のでご安心ください。

3. シークレットウィンドウを開いてつかう

Ctrl + Shift + n

でシークレットウィンドウが開きます。(Mac/Windowの両方で同じコマンド。)

こちらで、Basic認証されたサイトにアクセスするとBasicはイチから入力を求められます。

解説

2個以上シークレットウィンドウを開いているときは、1つ目でBasicをすでに入力していた場合引き継いでしまうので その点は注意が必要です。

入力をやり直すときは全てのシークレットウィンドウを閉じて、立ち上げ直しましょう（やり直しの際には通常のウィンドウは閉じなくても大丈夫です）

4. Chromeの「要素を検証」に、Javascriptのコードを貼り付ける

以下の記事を参考にしました。

How to clear basic authentication details in chrome

Basicのリセット方法についてさまざまなユーザーが意見を出し合っています。

この方法を実行するサンプルとして以下が示されていました。

{
    const str = location.origin.replace("http://", "http://" + new Date().getTime() + "@");
    let xmlhttp;
    if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
    else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4) location.reload();
    }
    xmlhttp.open("GET",str,true);
    xmlhttp.setRequestHeader("Authorization","Basic YXNkc2E6")
    xmlhttp.send();
}

Ctrl + Shift + i Macの場合は Command + Shift + iでChromeの「要素を検証」を開き、「console」画面に、上記のソースコードをペースト&Enterするだけです。

解説

プログラミング言語Javascriptを実行する能力を、Chromeは持っています。よって、Enterを押すことで、上記のプログラムを実行していることになります。

コードリーディングしたところ、やっている事としては、1.のme@をつける方法をConsoleから実行しているのに近くて、やり方として遠回りな気 もします。stackoverflowに記載があったのは、古いバージョンのChromeでの対応方法、なのかもですね。

1~3以外の方法であえて試したいときはありだと思いますが、自分にはこれを行う必要性は理解できませんでした...。

まとめ

私は元のURLにme@を追加するだけの、1.の方法が簡単でベストかなと感じました。

他の方法も一長一短があるので、ユースケースに合わせて使い分けられるといいな と思いました。

この記事が何かのお役に立てれば幸いです。
最後までお読みいただきありがとうございました！