サーバーサイド開発者のためのパスキー入門

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Copyright © Yoshikazu Nojima 2024 自己紹介 • 能島良和 • Red Hatでミドルウェア製品のテクニカルサポートを担当 • WebAuthn4Jというライブラリの開発者 https://github.com/webauthn4j/webauthn4j Keycloak、Spring、Quarkus等で採用 • Twitter:@shiroica • GitHub:ynojima 1

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの保存パスキーの登録フロー（概要）パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信クレデンシャル(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,RP固有公開鍵,拡張)を生成 challengeを提供 Storage RP固有秘密鍵を保存 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge を生成・保存 challenge の読込 RP固有鍵ペアを生成クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session

Slide 7

Slide 7 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込パスキーの認証フロー（概要）パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供 challenge を生成・保存

Slide 8

Slide 8 text

Copyright © Yoshikazu Nojima 2024 クレデンシャル (公開鍵)の読込プロトコルレベルで組み込まれたセキュリティ(1)：クレデンシャル流出対策としての公開鍵認証パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供 challenge を生成・保存サーバーに保存されているのは公開鍵、通信経路でやり取りされるのは署名なので流出しても影響は軽減

Slide 9

Slide 9 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込プロトコルレベルで組み込まれたセキュリティ(２)：リプレイ攻撃対策としてのチャレンジデータパスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供 challenge を生成・保存署名対象にチャレンジ（ランダムデータ）を含めることで、詐取した正規のリクエストを繰り返すリプレイ攻撃を防止

Slide 10

Slide 10 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの保存 WebAuthn APIが提供する範囲（登録処理）パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信クレデンシャル(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,RP固有公開鍵,拡張)を生成 challengeを提供 Storage RP固有秘密鍵を保存 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込 RP固有鍵ペアを生成クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session navigator.credentials.create() challenge を生成・保存

Slide 11

Slide 11 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込 WebAuthn APIが提供する範囲（認証処理）パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供 navigator.credentials.get() challenge を生成・保存

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの保存サーバーサイドで必要な処理（登録フロー）パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信クレデンシャル(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,RP固有公開鍵,拡張)を生成 challengeを提供 Storage RP固有秘密鍵を保存 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込 RP固有鍵ペアを生成クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session チャレンジ提供用エンドポイントクレデンシャル登録用エンドポイント challenge を生成・保存

Slide 14

Slide 14 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込サーバーサイドで必要な処理（認証フロー）パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供チャレンジ提供用エンドポイントアサーション認証用エンドポイント challenge を生成・保存

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込エンドポイント含めて提供するフレームワークの場合パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供 challenge を生成・保存エンドポイント含め提供エンドポイント含め提供

Slide 17

Slide 17 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込クレデンシャル検証のみを提供するライブラリの場合パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供 challenge を生成・保存検証処理のみを提供

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込検証処理のみを提供するライブラリの場合のアプリケーション側で必要な実装パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供 challenge を生成・保存アプリとして実装が必要アプリとして実装が必要検証処理のみを提供

Slide 20

Slide 20 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込フレームワークに特化したラッパーライブラリが提供さている場合に必要な実装パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供 challenge を生成・保存ラッパーライブラリが提供ラッパーライブラリが提供検証処理のみを提供アプリとして実装が必要

Slide 21

Slide 21 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込例：Spring/Quarkus パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供 challenge を生成・保存 Spring Security/Quarkus Securityが提供 Spring Security/Quarkus Securityが提供 WebAuthn4Jが提供アプリとして実装が必要

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込おさらい： Quarkus Security WebAuthnで必要な実装箇所パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供 challenge を生成・保存 Quarkus Securityが提供 Quarkus Securityが提供 WebAuthn4Jが提供アプリとして実装が必要

Slide 26

Slide 26 text

Copyright © Yoshikazu Nojima 2024 エンドポイントの有効化のための application.propertiesでの設定 25 quarkus.webauthn.login-page=/ quarkus.webauthn.enable-login-endpoint=true quarkus.webauthn.enable-registration-endpoint=true

Slide 27

Slide 27 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの永続化処理のために WebAuthnUserProviderインタフェースを実装 26 @Blocking @ApplicationScoped public class DemoWebAuthnUserProvider implements WebAuthnUserProvider { private final List credentialRecords = new ArrayList<>(); @Override public Uni> findByUsername(String username) { return Uni.createFrom().item(credentialRecords.stream() .filter(record -> record.getUsername().equals(username)).collect(Collectors.toList())); } @Override public Uni findByCredentialId(String credentialId) { return Uni.createFrom().item(credentialRecords.stream() .filter(record -> record.getCredentialID().equals(credentialId)) .findFirst().orElseThrow(()-> new RuntimeException("credential not found"))); } @Override public Uni update(String credentialId, long counter) { findByCredentialId(credentialId).subscribe().with(credentialRecord -> credentialRecord.setCounter(counter)); return Uni.createFrom().voidItem(); } @Override public Uni store(WebAuthnCredentialRecord credentialRecord) { credentialRecords.add(credentialRecord); return Uni.createFrom().voidItem(); } }

Slide 28

Slide 28 text

Copyright © Yoshikazu Nojima 2024 エンドポイントの動作 $ curl http://localhost:8080/q/webauthn/register-options-challenge?username=ynojima { "rp": { "id": "localhost", "name": "Quarkus server" }, "user": { "id": "Baeobf2jRmqbFa1nLz_rDg", "name": "ynojima", "displayName": "ynojima" }, "challenge": "nLZXvZrAz2rTU0erERIGrRsqY3zl8bW57-IUmzPzEX2FSR50yrGKWy-QPsMtDy6y6y9TWXOlf- _AcQZNSg6wWQ", "pubKeyCredParams": [ { "type": "public-key", "alg": -7 }, { "type": "public-key", "alg": -257} ], "timeout": 300000, "excludeCredentials": [], "authenticatorSelection": { "requireResidentKey": true, "residentKey": "required", "userVerification": "required" }, "attestation": "none", "extensions": {} } 27

Slide 29

Slide 29 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの保存登録処理の全体像パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信クレデンシャル(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,RP固有公開鍵,拡張)を生成 challengeを提供 Storage RP固有秘密鍵を保存 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込 RP固有鍵ペアを生成クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session チャレンジ提供用エンドポイントクレデンシャル登録用エンドポイント challenge を生成・保存 navigator.credentials.create() フロントエンド呼出呼出呼出

Slide 30

Slide 30 text

Copyright © Yoshikazu Nojima 2024 フロントエンドの実装例 29 async function createCredential(username){ // オプション（含チャレンジ）提供用エンドポイントの呼出 const registerOptionsChallengeEndpoint = username ? `/q/webauthn/register-options-challenge?username=${encodeURIComponent(username)}` : “/q/webauthn/register-options-challenge” const response = await fetch(registerOptionsChallengeEndpoint) const publicKeyCredentialCreationOptionsJSON = await response.json() const credentialCreationOptions = PublicKeyCredential.parseCreationOptionsFromJSON(publicKeyCredentialCreationOptionsJSON); // パスキークレデンシャルの作成 const publicKeyCredential = await navigator.credentials.create({ publicKey: credentialCreationOptions}); const registrationResponseJSON = publicKeyCredential.toJSON(); console.log(registrationResponseJSON); // クレデンシャル登録用エンドポイントの呼出 const registerEndpoint = username ? `/q/webauthn/register?username=${encodeURIComponent(username)}` : “/q/webauthn/register” await fetch(registerEndpoint, { method : 'POST', body: JSON.stringify(registrationResponseJSON) }); } ※PublicKeyCredential.parseCreationOptionsFromJSON, PublicKeyCredential#toJSON メソッドはSafariで2025/01現在未実装なので注意。github/webauthn-jsonのようなPolyfillが必須

Slide 31

Slide 31 text

Copyright © Yoshikazu Nojima 2024 クレデンシャルの読込認証処理の全体像パスキープロバイダブラウザサーバー • Credential Id • Authenticator data • 署名を送信アサーション(Credential Id, Authenticator data, Client Data, 署名、etc.）を送信 Client dataのハッシュを送信 Authenticator data(RpIdのハッシュ, フラグ,カウンタ,拡張)を生成 Storage RP固有秘密鍵を読込 Client data (challenge, origin, etc.)を生成 Client dataのハッシュと Authenticator dataに対する署名を生成 challenge の読込クレデンシャルに対し、ドメイン（RP Id）、署名、 challenge、その他の検証 DB Session challengeを提供チャレンジ提供用エンドポイントアサーション認証用エンドポイント challenge を生成・保存 navigator.credentials.get() フロントエンド呼出呼出呼出

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Copyright © Yoshikazu Nojima 2024 ※登録エンドポイントの独自実装が必要なケース • QuarkusやSpringといった、フレームワークが提供する標準のパスキー登録エンドポイントは、パスキーの登録のみが可能 • 1回のフォームPOSTで、ユーザーの氏名や住所等、ユーザーアカウントの他の属性も登録したい場合、標準の登録エンドポイントでは対応不可能 • 独自のエンドポイントを実装し、受け取ったパスキーのクレデンシャルの検証処理を呼び出す必要有 32

Slide 34

Slide 34 text

Copyright © Yoshikazu Nojima 2024 リファレンス • Quarkus公式のquickstartプロジェクト • https://github.com/quarkusio/quarkus-quickstarts/tree/main/security-webauthn-quickstart • Quarkus公式のSecurity WebAuthnのガイド • https://quarkus.io/guides/security-webauthn • Spring公式のPasskeysのガイド • https://docs.spring.io/spring-security/reference/servlet/authentication/passkeys.html 33

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Copyright © Yoshikazu Nojima 2024 まとめ • パスキー認証の登録・認証処理のシーケンスの全体像を説明しました • パスキー認証の実装には、サーバーサイドはチャレンジの提供や、クレデンシャルの登録、認証等のエンドポイントの提供が必要 • ライブラリによって提供する機能は、検証処理だけ、エンドポイントも提供、DBへの永続化処理も提供、と様々 • ライブラリを選定する際は、利用しているフレームワークにおいてどこまでの機能を提供してくれるのか、自らのユースケースにあうのか、がポイントの一つです 35

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Copyright © Yoshikazu Nojima 2024 selenium-javaでのテストコード例 44 public class RegistrationAndAuthenticationE2ETest extends E2ETestBase{ @Test public void test() { VirtualAuthenticatorOptions options = new VirtualAuthenticatorOptions(); ((HasVirtualAuthenticator) driver).addVirtualAuthenticator(options); // Registration SignupComponent signupComponent = new SignupComponent(driver); signupComponent.navigate(); signupComponent.setFirstname(“John”); signupComponent.setLastname(“Doe”); signupComponent.setUsername(“john.doe@example.com”); signupComponent.setPassword(“password”); signupComponent.clickAddAuthenticator(); signupComponent.getResidentKeyRequirementDialog().clickNo(); signupComponent.waitRegisterClickable(); signupComponent.clickRegister(); // Password authentication wait.until(ExpectedConditions.urlToBe(“http://localhost:8080/angular/login”)); PasswordLoginComponent passwordLoginComponent = new PasswordLoginComponent(driver); passwordLoginComponent.setUsername(“john.doe@example.com”); passwordLoginComponent.setPassword(“password”); passwordLoginComponent.clickLogin(); // 2nd-factor authentication AuthenticatorLoginComponent authenticatorLoginComponent = new AuthenticatorLoginComponent(driver); // nop wait.until(ExpectedConditions.urlToBe(“http://localhost:8080/angular/profile”)); } テストコード自体はページオブジェクトパターンに則った Seleniumの普通のテストコード仮想Authenticator追加

Slide 46

Slide 46 text

Copyright © Yoshikazu Nojima 2024 Chromiumの仮想Authenticatorで十分か？ • 仮想Authenticatorの設定項目は多くない (residentKey, uv, transport等) • 残念ながらパスキーは環境依存の問題が発生しがち • ChromeでのE2Eテストは、よく使われる環境をカバー出来、テスト効率を向上させるが、依然として手動テストも重要 45

Slide 47

Slide 47 text

Copyright © Yoshikazu Nojima 2024 まとめ • パスキーはパスキープロバイダーでユーザーの承認操作が必要 • E2Eテストを自動化する上で承認操作が障害 • ChromeはWebAuthn WebDriver Extension APIを通じて仮想Authenticatorに実装を切替、承認ジェスチャーをスキップ可能 • Chrome以外をカバーするために手動テストも依然として必要 • パスキーでも諦めずにE2Eテストを書いていきましょう！ 46