ローカルで Related Origin Requests (ROR) <a href="#fn-541c-1" id="fnref-541c-1">[1]</a> を試してみたのでその際の手順を備忘録として残しておきます。 
動作確認を行うにあたって、passkeys.dev<a href="#fn-541c-1" id="fnref-541c-1:1">[1:1]</a> の Example に記載されている <code>https://shopping.com</code> と <code>https://shopping.co.uk</code> というドメインを使用したシナリオに沿って再現しました<a href="#fn-541c-2" id="fnref-541c-2">[2]</a>。 
また、実装としては以下のリポジトリのコードを利用しました。すでに Autofill UI が動作している状態でいくつか修正を加えることで動作させています。
<iframe id="zenn-embedded__05d1dd9e9929" src="https://embed.zenn.studio/card#zenn-embedded__05d1dd9e9929" data-content="https%3A%2F%2Fgithub.com%2Fkg0r0%2Fpasskey-autofill-example%2Ftree%2Frelated-origins" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/kg0r0/passkey-autofill-example/tree/related-origins" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kg0r0/passkey-autofill-example/tree/related-origins</a>
<h2 id="rp-%E5%AE%9F%E8%A3%85%E3%81%AE%E5%A4%89%E6%9B%B4%E7%82%B9" data-line="6" class="code-line">
<a class="header-anchor-link" href="#rp-%E5%AE%9F%E8%A3%85%E3%81%AE%E5%A4%89%E6%9B%B4%E7%82%B9" aria-hidden="true"></a> RP 実装の変更点</h2>
主に RP に必要な変更は <code>/.well-known/webauthn</code> の実装です<a href="#fn-541c-3" id="fnref-541c-3">[3]</a>。このとき、<code>https://[RP ID]/.well-known/webauthn</code> となるようにエンドポイントを実装します。レスポンスの形式は JSON であり、以下のように <code>origins</code> に有効なオリジンの配列を含めて返します。
<div class="code-block-container"><pre class="language-json"><code class="language-json code-line" data-line="10">{
 "origins": [
 "https://shopping.com",
 "https://myshoppingrewards.com",
 "https://myshoppingcreditcard.com",
 "https://myshoppingtravel.com",
 "https://shopping.co.uk",
 "https://shopping.co.jp",
 "https://shopping.ie",
 "https://shopping.ca"
 ]
}
</code></pre></div>なお、ブラウザが Related Origin Requests をサポートしているか事前にチェックすることができます<a href="#fn-541c-4" id="fnref-541c-4">[4]</a>。これにより、クライアントの状況を踏まえたハンドリングを追加することができるでしょう。
<div class="code-block-container"><pre class="language-js"><code class="language-js code-line" data-line="27"> if (typeof PublicKeyCredential === 'undefined') {
 console.log("PublicKeyCredential is not supported in this browser.");
 }
 if (typeof PublicKeyCredential.getClientCapabilities === 'function') {
 let capabilities;
 try {
 capabilities = await PublicKeyCredential.getClientCapabilities();
 console.log(capabilities);
 } catch (error) {
 console.error('Error getting client capabilities:', error);
 }
 if (!capabilities.relatedOrigins) {
 console.log('Related Origin Requests (ROR) is not supported in this browser');
 }
 } else {
 console.log('getClientCapabilities is not supported in this browser');
 }
</code></pre></div><h2 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" data-line="47" class="code-line">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h2>
動作確認をするうえでいくつか準備をおこないます。 
まず、<code>shopping.com</code> および <code>shopping.co.uk</code> でローカルの RP にアクセスできるように <code>/etc/hosts</code> に以下の定義を追加します。
<div class="code-block-container">
<div class="code-block-filename-container">/etc/hosts</div>
<pre class="language-bash"><code class="language-bash code-line" data-line="52">127.0.0.1	localhost shopping.com shopping.co.uk
</code></pre>
</div>また、WebAuthentication API の呼び出し時のオリジンとして <code>localhost</code> 以外を利用する場合、HTTPS かつ証明書エラーが発生しないようにする必要があります。 
これについては、"Use HTTPS for local development"<a href="#fn-541c-5" id="fnref-541c-5">[5]</a> に記載の手順を行うことで証明書エラーが発生しないようにローカルで HTTPS のサーバーを起動することができます。 
例えば、今回に関しては、以下のコマンドを実行することで <code>shopping.com+1-key.pem</code> および <code>shopping.com+1.pem</code> が生成され、<code>shopping.com</code> および <code>shopping.co.uk</code> に証明書エラー無しでアクセスできるようになります。
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="60">$ mkcert shopping.com shopping.co.uk
</code></pre></div>(上記のコマンドによって生成された証明書を確認したところ、入力したオリジンに基づいて良い感じに SAN を指定してくれているようでした。)
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="66">$ openssl x509 -noout -text -in shopping.com+1.pem
 ...
 X509v3 Subject Alternative Name:
 DNS:shopping.com, DNS:shopping.co.uk
 ...
</code></pre></div>ここまでで動作確認をする準備ができたので実際に RP を起動してアクセスしてみます (前述の通り証明書などはご自身で用意してください)。
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="76">$ git clone -b related-origins https://github.com/kg0r0/passkey-autofill-example.git
$ cd passkey-autofill-example
$ ls certs
shopping.com+1-key.pem shopping.com+1.pem
$ go run .
</code></pre></div>まずは、<code>shopping.co.uk</code> にアクセスして Passkeys の登録を行います。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--tA20LMIa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/37121d509e3500862e5b98ac.png%3Fsha%3Dc68d8499b53d575c69a153e5fd032d03b210aa76" loading="lazy" class="md-img">
この時点で <code>shopping.co.uk</code> のサインインに先ほど登録した Passkeys が使えることがわかります。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--sDjXcKwb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/35eab11ecf39547b732d8975.png%3Fsha%3D1221bf9cbfedd0816760524d51046239ed88a056" loading="lazy" class="md-img">
次に、<code>shopping.com</code> にアクセスします。このとき RP ID として <code>shopping.co.uk</code> を指定して Web Authentication API を呼び出します。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--h23cuivd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/256c0f42f87324c02fb72ece.png%3Fsha%3D6796ae2f1048abde077005b0464618672b3b67fa" loading="lazy" class="md-img">
ここで、従来であれば現在アクセスしているオリジンと RP ID のミスマッチにより Web Authentication API の呼び出しにおいてエラーが返されますが、以下のように <code>https://[RP ID]/.well-known/webauthn</code> に対してリクエストが行われていることが確認できます。
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="98">$ go run .
2024/12/22 18:29:13 INFO shopping.co.uk/.well-known/webauthn
</code></pre></div>最終的にサインインが完了することが確認できました。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--X_8mZnz1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/3e7aeab64f9387905006e3f6.png%3Fsha%3Dcf3fef327b992a7e9e47d4e4b1794649e424e283" loading="lazy" class="md-img">
なお、<code>https://shopping.co.uk/.well-known/webauthn</code> のレスポンスに含まれるオリジンから <code>https://shopping.com</code> を削除した場合、以下のようなエラーが発生してサインインが失敗することを確認しました。
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="109">SecurityError: The RP ID "shopping.co.uk" is invalid for this domain
 at error (index.umd.min.js:2:3961)
 at e.startAuthentication (index.umd.min.js:2:4289)
 at async login:47:22Caused by: SecurityError: The relying party ID is not a registrable domain suffix of, nor equal to the current domain. Subsequently, fetching the .well-known/webauthn resource of the claimed RP ID was successful, but no listed origin matched the caller.
</code></pre></div>今回はとりあえず Related Origin Requests (ROR) の動作を試してみました。
この記事を Digital Identity 技術勉強会 #iddance Advent Calendar 2024 9 日目の記事として、終わりたいと思います。ではまた！
<iframe id="zenn-embedded__87cbb593ad5e3" src="https://embed.zenn.studio/card#zenn-embedded__87cbb593ad5e3" data-content="https%3A%2F%2Fqiita.com%2Fadvent-calendar%2F2024%2Fiddance" frameborder="0" scrolling="no" loading="lazy"></iframe><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>
<section class="footnotes">
脚注
<ol class="footnotes-list">
<li id="fn-541c-1" class="footnote-item">
<a href="https://passkeys.dev/docs/advanced/reloated-origins/#deployment-considerations" target="_blank" rel="nofollow noopener noreferrer">https://passkeys.dev/docs/advanced/reloated-origins/#deployment-considerations</a> <a href="#fnref-541c-1" class="footnote-backref">↩︎</a> <a href="#fnref-541c-1:1" class="footnote-backref">↩︎</a>
</li>
<li id="fn-541c-2" class="footnote-item">
<a href="https://passkeys.dev/docs/advanced/related-origins/#example" target="_blank" rel="nofollow noopener noreferrer">https://passkeys.dev/docs/advanced/related-origins/#example</a> <a href="#fnref-541c-2" class="footnote-backref">↩︎</a>
</li>
<li id="fn-541c-3" class="footnote-item">
<a href="https://passkeys.dev/docs/advanced/related-origins/#relying-party-changes" target="_blank" rel="nofollow noopener noreferrer">https://passkeys.dev/docs/advanced/related-origins/#relying-party-changes</a> <a href="#fnref-541c-3" class="footnote-backref">↩︎</a>
</li>
<li id="fn-541c-4" class="footnote-item">
<a href="https://passkeys.dev/docs/advanced/related-origins/#client-support" target="_blank" rel="nofollow noopener noreferrer">https://passkeys.dev/docs/advanced/related-origins/#client-support</a> <a href="#fnref-541c-4" class="footnote-backref">↩︎</a>
</li>
<li id="fn-541c-5" class="footnote-item">
<a href="https://web.dev/articles/how-to-use-local-https" target="_blank" rel="nofollow noopener noreferrer">https://web.dev/articles/how-to-use-local-https</a> <a href="#fnref-541c-5" class="footnote-backref">↩︎</a>
</li>
</ol>
</section>

ローカルで Related Origin Requests (ROR) を試した際のメモ

Discussion