WebAuthn DevTools のご紹介

自分でパスキーを実装する際や、他のウェブサイトでパスキーがどのように動作しているか調査したい際、デバッガーをセットしてリクエストやレスポンスをキャプチャーしたり、バイナリを解析して中身を読み取るのは簡単ではありません。WebAuthn DevTools という Chrome Extension を使えば、それを簡単に実現できます。

WebAuthn DevTools とは #

WebAuthn DevTools は、Chrome Extension で、WebAuthn のデバッグを効率化するツールです。

WebAuthn が使われているページ上で Chrome DevTools を立ち上げて、"WebAuthn" タブを選択するだけですぐに使えるようになります。

左側のパネルには実行された WebAuthn の命令が表示され、右側にはそのリクエストとレスポンスが詳細に表示されます。

特に navigator.credentials.get() や navigator.credentials.create() のレスポンスは、バイナリを含むため、デコードして中身を読み取るのが面倒なのですが、WebAuthn DevTools はその場で解析済みの情報を表示してくれます。AAGUID であれば対応するパスワードマネージャーの名前も表示してくれます。

また、一部のパラメーターには簡単な説明と、より詳細な内容を学べるリンクが表示されます。

まとめ #

ソースコードは GitHub に公開しています。今後 Safari 版および Firefox 版も検討しています。パスキーや WebAuthn に興味ある方が、ちょっとした調査やデバッグする際にお手軽に使えるツールです。ぜひ使ってみてください。