<p data-line="0" class="code-line">この記事は<a href="https://qiita.com/advent-calendar/2024/iddance" target="_blank" rel="nofollow noopener noreferrer">Digital Identity技術勉強会 #iddance Advent Calendar 2024</a> 12日目の記事です。</p>
<p data-line="2" class="code-line">こんにちは。毎度パスキーの話ばかりですみません。そして今回もパスキーのお話です。<br>
今年夏頃に以下の記事を拝読し、興味深いFirefox Androidの仕様について知ることができたのでRPとしてサポートする場合に考慮した方がよさそうなことを書きます。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b832735086a28" src="https://embed.zenn.studio/card#zenn-embedded__b832735086a28" data-content="https%3A%2F%2Fwontfix.blogspot.com%2F2024%2F08%2Fandroid-14-credential-manager.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://wontfix.blogspot.com/2024/08/android-14-credential-manager.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://wontfix.blogspot.com/2024/08/android-14-credential-manager.html</a></p>
<h1 id="android-firefox%E3%81%AE%E4%BB%95%E6%A7%98" data-line="6" class="code-line">
<a class="header-anchor-link" href="#android-firefox%E3%81%AE%E4%BB%95%E6%A7%98" aria-hidden="true"></a> Android Firefoxの仕様</h1>
<p data-line="7" class="code-line">冒頭紹介したブログによると、Firefox Androidはパスキー登録時に<a href="https://developer.mozilla.org/ja/docs/Web/API/CredentialsContainer/create#residentkey" target="_blank" rel="nofollow noopener noreferrer">authenticatorSelection.residentKey</a>の値によってパスキーを生成する方法が異なるようです。まとめると以下のようになります。</p>
<table data-line="9" class="code-line">
<thead data-line="9" class="code-line">
<tr data-line="9" class="code-line">
<th>residentKey</th>
<th>挙動</th>
</tr>
</thead>
<tbody data-line="11" class="code-line">
<tr data-line="11" class="code-line">
<td>required</td>
<td>
<a href="https://developer.android.com/reference/androidx/credentials/package-summary" target="_blank" rel="nofollow noopener noreferrer">Credential Manager</a>による同期パスキー作成</td>
</tr>
<tr data-line="12" class="code-line">
<td>discouraged</td>
<td>
<a href="https://developers.google.com/android/reference/com/google/android/gms/fido/fido2/package-summary" target="_blank" rel="nofollow noopener noreferrer">FIDO API</a>によるデバイス固定パスキー作成</td>
</tr>
<tr data-line="13" class="code-line">
<td>preferred</td>
<td>
<a href="https://developers.google.com/android/reference/com/google/android/gms/fido/fido2/package-summary" target="_blank" rel="nofollow noopener noreferrer">FIDO API</a>による同期パスキー作成※</td>
</tr>
</tbody>
</table>
<p data-line="15" class="code-line">なお、パスキーでの認証時はCredentials Managerを利用しているような挙動となっていました。※<br>
※Android 15, Firefox 133.0.2で確認<br>
（ブログ内では明記されておらず、手元の検証端末で表示されたUIで判断しています。間違っていたら教えてください。）</p>
<h1 id="fido-api%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%95%E3%82%8C%E3%82%8B%E3%83%91%E3%82%B9%E3%82%AD%E3%83%BC%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9" data-line="19" class="code-line">
<a class="header-anchor-link" href="#fido-api%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%95%E3%82%8C%E3%82%8B%E3%83%91%E3%82%B9%E3%82%AD%E3%83%BC%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9" aria-hidden="true"></a> FIDO APIで作成されるパスキーの注意点</h1>
<h2 id="%E3%82%B5%E3%83%BC%E3%83%89%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E3%83%9E%E3%83%8D%E3%83%BC%E3%82%B8%E3%83%A3%E3%83%BC%E3%81%A7%E3%83%91%E3%82%B9%E3%82%AD%E3%83%BC%E3%81%8C%E4%BD%9C%E3%82%8C%E3%81%AA%E3%81%84" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B5%E3%83%BC%E3%83%89%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E3%83%9E%E3%83%8D%E3%83%BC%E3%82%B8%E3%83%A3%E3%83%BC%E3%81%A7%E3%83%91%E3%82%B9%E3%82%AD%E3%83%BC%E3%81%8C%E4%BD%9C%E3%82%8C%E3%81%AA%E3%81%84" aria-hidden="true"></a> サードパーティパスワードマネージャーでパスキーが作れない</h2>
<p data-line="21" class="code-line">Android 14以降ではCredential Managerを通じてサードパーティパスワードマネージャーでパスキーを作成管理できるようになりました。一方、FIDO APIの方ではこの機能を利用できません。</p>
<table data-line="22" class="code-line">
<thead data-line="22" class="code-line">
<tr data-line="22" class="code-line">
<th>FIDO API</th>
<th>Credential Manager</th>
</tr>
</thead>
<tbody data-line="24" class="code-line">
<tr data-line="24" class="code-line">
<td>
<img src="https://storage.googleapis.com/zenn-user-upload/2504dd1debf8-20241211.png" width="240" loading="lazy" class="md-img"><br><em>GPMでしかパスキー作れない</em>
</td>
<td>
<img src="https://storage.googleapis.com/zenn-user-upload/fbbf4cdc8284-20241211.png" width="215" loading="lazy" class="md-img"><em>その他のオプションから<br>サードパーティパスワードマネージャーを選択可能</em>
</td>
</tr>
</tbody>
</table>
<h2 id="transport%E3%81%AE%E5%80%A4%E3%81%8C%5B%22internal%22%2C%22cable%22%5D%E3%81%AB%E3%81%AA%E3%82%8B" data-line="26" class="code-line">
<a class="header-anchor-link" href="#transport%E3%81%AE%E5%80%A4%E3%81%8C%5B%22internal%22%2C%22cable%22%5D%E3%81%AB%E3%81%AA%E3%82%8B" aria-hidden="true"></a> transportの値が<code>["internal","cable"]</code>になる</h2>
<p data-line="27" class="code-line"><a href="https://www.w3.org/TR/webauthn-3/#enum-transport" target="_blank" rel="nofollow noopener noreferrer">transport</a>とは、AttestationResponse内に含まれる「そのクレデンシャルを作成した認証器がクライアントデバイスとの接続可能な方法」です。例えば、クライアントデバイスとUSBやNFCで接続可能なセキュリティキーの場合は<code>transport=["usb","nfc"]</code>だったり、iOS(Safari)やAndroid(Chrome)などのスマートフォンであれば認証器がデバイス内にあり、かつQRコード読み取りで開始するhybridフローによる接続をサポートしているので<code>transport=["hybrid","internal"]</code>だったりします。"cable"（caBLE）というのはこの"hybrid"の以前の名称です。</p>
<p data-line="29" class="code-line">ここで登録されたパスキーは、同期パスキーはGPMで管理、デバイス固定パスキーの場合はデバイス内で管理され、従来通りそのデバイスでのパスキーの認証に利用できますし、hybridフローでも問題なく動きます。しかし問題になるのはこのtransportをサーバから受け取ったPCなどのブラウザ側です。<strong>具体的にSafari※において、transport=["hybrid"]の場合はhybridフローのみが発動しますが、transport=["cable"]の場合は認証器の候補にセキュリティキーが含まれます。</strong>　このような挙動を回避するためにauthenticatorAttachment="platform"を指定しているようなRPでは、この挙動は把握しておくと良いと思います。対策としてはRPが配信するallowCredentialsのtransportsのcableをhybridに上書きする黒魔術しかおもいつきません。</p>
<table data-line="31" class="code-line">
<thead data-line="31" class="code-line">
<tr data-line="31" class="code-line">
<th>transport=["hybrid"]</th>
<th>transport=["cable"]</th>
</tr>
</thead>
<tbody data-line="33" class="code-line">
<tr data-line="33" class="code-line">
<td>
<img src="https://storage.googleapis.com/zenn-user-upload/0e64c109f985-20241211.png" width="240" loading="lazy" class="md-img"><br><em>hybridフローのみ発動</em>
</td>
<td>
<img src="https://storage.googleapis.com/zenn-user-upload/d0aabd83d866-20241211.png" width="240" loading="lazy" class="md-img"><em>hybridフローとセキュリティキーが発動候補</em>
</td>
</tr>
</tbody>
</table>
<p data-line="35" class="code-line">※ Safari 18.2で確認</p>
<h1 id="throw%E3%81%95%E3%82%8C%E3%82%8Bdomexception" data-line="37" class="code-line">
<a class="header-anchor-link" href="#throw%E3%81%95%E3%82%8C%E3%82%8Bdomexception" aria-hidden="true"></a> ThrowされるDOMException</h1>
<p data-line="39" class="code-line">普段WebAuthn APIで開発するときによく見かける例外は、主にユーザキャンセルや認証に利用できるパスキーのない<code>NotAllowedError</code>や、excludeCredentialsで指定されたパスキーが存在したときの<code>InvalidStateError</code>です。あとは、限定的ですがAndroid Chromeでデバイス固定パスキーの画面ロック解除時にタイムアウトになった際の<code>NotReadableError</code>とか。一方Firefox Androidでは一般のユーザ操作によってそれ以外のDOMExceptionが発生するケースがあります。</p>
<h2 id="%E7%99%BB%E9%8C%B2%E6%99%82%E3%81%AE%E6%8C%99%E5%8B%95" data-line="41" class="code-line">
<a class="header-anchor-link" href="#%E7%99%BB%E9%8C%B2%E6%99%82%E3%81%AE%E6%8C%99%E5%8B%95" aria-hidden="true"></a> 登録時の挙動</h2>
<ul data-line="43" class="code-line">
<li data-line="43" class="code-line">登録時<code>residentKey=required</code>のケース（Credential Manager）
<ul data-line="44" class="code-line">
<li data-line="44" class="code-line">platform認証器の登録画面で登録キャンセル -&gt; <code>AbortError</code>
</li>
<li data-line="45" class="code-line">cross-platform認証器の選択画面/登録画面で登録キャンセル -&gt; <code>UnknownError</code>
</li>
</ul>
</li>
<li data-line="46" class="code-line">登録時<code>residentKey=prefferd</code>（FIDO API）
<ul data-line="47" class="code-line">
<li data-line="47" class="code-line">（platform/cross-platform問わず）登録キャンセル -&gt; <code>NotAllowedError</code>
</li>
</ul>
</li>
<li data-line="48" class="code-line">登録時<code>residentKey=discouraged</code>（FIDO API）
<ul data-line="49" class="code-line">
<li data-line="49" class="code-line">platform認証器の登録画面で登録キャンセル -&gt; <code>UnknownError</code>
</li>
<li data-line="50" class="code-line">cross-platform認証器の選択画面/登録画面で登録キャンセル -&gt; <code>NotAllowedError</code>
</li>
</ul>
</li>
</ul>
<h2 id="%E8%AA%8D%E8%A8%BC%E6%99%82%E3%81%AE%E6%8C%99%E5%8B%95" data-line="52" class="code-line">
<a class="header-anchor-link" href="#%E8%AA%8D%E8%A8%BC%E6%99%82%E3%81%AE%E6%8C%99%E5%8B%95" aria-hidden="true"></a> 認証時の挙動</h2>
<ul data-line="54" class="code-line">
<li data-line="54" class="code-line">認証時のケース（デバイス固定パスキーがallowCredentialsに含まれていたケース）
<ul data-line="55" class="code-line">
<li data-line="55" class="code-line">platform認証器の認証画面で認証キャンセル -&gt; <code>NotAllowedError</code>
</li>
</ul>
</li>
<li data-line="56" class="code-line">認証時のケース（Credential Manager）
<ul data-line="57" class="code-line">
<li data-line="57" class="code-line">アカウント選択画面での認証キャンセル -&gt; <code>AbortError</code>
</li>
<li data-line="58" class="code-line">platform認証器での認証キャンセル -&gt; <code>UnknownError</code>
</li>
<li data-line="59" class="code-line">cross-platform認証器の選択画面/認証画面での認証キャンセル -&gt; <code>UnknownError</code>
</li>
</ul>
</li>
</ul>
<h2 id="%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AE%E6%8C%99%E5%8B%95" data-line="61" class="code-line">
<a class="header-anchor-link" href="#%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AE%E6%8C%99%E5%8B%95" aria-hidden="true"></a> タイムアウトの挙動</h2>
<p data-line="63" class="code-line">WebAuthn APIの挙動として、RPの指定するtimeoutの値が適切な範囲でない場合は、クライアント内で自動的に「適切な値」に書き換えられます。（参考: <a href="https://www.w3.org/TR/webauthn-3/#:~:text=.publicKey.-,If%20pkOptions.timeout%20is%20present%2C%20check%20if%20its%20value%20lies,not%20present%2C%20then%20set%20lifetimeTimer%20to%20a%20client%2Dspecific%20default.,-Recommended%20ranges%20and" target="_blank" rel="nofollow noopener noreferrer">WebAuthn L3 5.1.3. Create a New Credential</a>）そして、Android Firefoxではこのtimeoutの値を超過すると<code>TimeoutError</code>がthrowされます。Chrome（Credentials Manager）やSafariではこの「適切な値」がかなり長いようで基本的にタイムアウトエラーは起こりません。一方でAndroid FirefoxにおいてはFIDO APIを利用する登録ケースではRPが指定した値をほぼ解釈してくれるようでした。また、認証時においてもデバイス固定パスキーを利用するケースでも同様な挙動が見られました。<br>
よってAndroid Firefoxでrpの指定したtimeoutで<code>TimeoutError</code>がthrowされうるケースは以下です。</p>
<ul data-line="66" class="code-line">
<li data-line="66" class="code-line">
<code>residentKey=prefferd/discouraged</code>でパスキー登録を行うケース</li>
<li data-line="67" class="code-line">認証時のallowCredentialsにデバイス固定パスキーのkeyIdが含まれているケース</li>
</ul>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="69" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p data-line="70" class="code-line">Android Firefoxの仕様的にRPが注意すべき点は以下です。</p>
<ul data-line="72" class="code-line">
<li data-line="72" class="code-line">
<code>residentKey=prefferd/discouraged</code>を指定しているRPではAndroid Chromeと異なる挙動になる</li>
<li data-line="73" class="code-line">
<code>AbortError</code>,<code>UnknownError</code>,<code>TimeoutError</code>の例外ハンドリングに注意</li>
</ul>
<p data-line="75" class="code-line">サービス内でサポート環境として明記しないとしても、これらの仕様でもUXが破綻しないようなサービス設計にしていきたいですね。</p>
<p data-line="77" class="code-line">年末年始はパスキー周りの書籍とか特集などの予定がありメジャーな知識はそこで扱うだろうと思い、マイナーな部分を攻めようとしたら仕事の調査報告書みたいになっちゃいました。</p>
<p data-line="79" class="code-line">以上、Digital Identity技術勉強会 #iddance Advent Calendar 2024、12日目の記事でした。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__84e264394fcea" src="https://embed.zenn.studio/card#zenn-embedded__84e264394fcea" data-content="https%3A%2F%2Fqiita.com%2Fadvent-calendar%2F2024%2Fiddance" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/advent-calendar/2024/iddance" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/advent-calendar/2024/iddance</a></p>


RPがFirefox Androidのパスキーをサポートするときの覚え書き

サードパーティパスワードマネージャーでパスキーが作れない

transportの値が["internal","cable"]になる

FIDO APIで作成されるパスキーの注意点

Discussion