Introduction to WebAuthn Testing API

An Introduction to Google Chrome WebAuthn Testing API

1. Copyright © Yoshikazu Nojima 2018 WebAuthnテスト自動化入門 2019-05-29 iddance #1 能島 良和 (@shiroica)
2. Copyright © Yoshikazu Nojima 2018 自己紹介 • 能島良和 • 通信キャリアでホスティングサービスの開発・運用 • 前職は通信キャリア系SIerで社内向けにSpringのPJ支援業務 • Apache CloudStack Commiter（活動休止中。。） • WebAuthn4Jというライブラリ作ってます • https://github.com/webauthn4j/webauthn4j • JJUG発表資料：Java開発者のためのWebAuthn入門 • https://speakerdeck.com/ynojima/webauthn-for-java-developers • Twitter:@shiroica • GitHub:ynojima 1
3. Copyright © Yoshikazu Nojima 2018 WebAuthn採用時の悩み 2 どうやって自動テスト書く？
4. Copyright © Yoshikazu Nojima 2018 E2Eテストで扱う典型的な認証フロー（パスワード認証） 1. 登録画面に遷移する 2. 登録画面でユーザー名と パスワードを入力する 3. 登録ボタンを押す 4. 認証画面に遷移する 5. 認証画面でユーザー名と パスワードを入力する 6. 認証画面で認証ボタンを押す 3 自動化は容易
5. Copyright © Yoshikazu Nojima 2018 E2Eテストで扱う典型的な認証フロー（WebAuthn認証） 1. 登録画面に遷移する 2. 登録画面でユーザー名を入力する 3. Authenticatorの追加ボタンを押す 4. Authenticatorデバイス側で承認ジェスチャーを行う 5. 登録ボタンを押す 6. 認証画面に遷移する 7. 認証画面で認証ボタンを押す 8. Authenticatorデバイスで認証ジェスチャーを行う 4
6. Copyright © Yoshikazu Nojima 2018 E2Eテストで扱う典型的な認証フロー（WebAuthn認証） 1. 登録画面に遷移する 2. 登録画面でユーザー名を入力する 3. Authenticatorの追加ボタンを押す 4. Authenticatorデバイス側で承認ジェスチャーを行う 5. 登録ボタンを押す 6. 認証画面に遷移する 7. 認証画面で認証ボタンを押す 8. Authenticatorデバイスで認証ジェスチャーを行う 5 手動操作が必要
7. Copyright © Yoshikazu Nojima 2018 6 認証ジェスチャなしで応答を 返す、エミュレータが欲しい
8. Copyright © Yoshikazu Nojima 2018 Web Authentication Testing API WebAuthnのE2Eテスト実装を支援するためのChromeのAPI Chrome://flags画面あるいは起動オプションから有効化可能（デフォルトでは無効） 7
9. Copyright © Yoshikazu Nojima 2018 selenium-javaでのテストコード例（1/2） 8 @RunWith(SpringRunner.class) @SpringBootTest(classes = SampleWebApplication.class, webEnvironment = SpringBootTest.WebEnvironment.DEFINED_PORT) public class E2ETestBase { protected WebDriver driver; protected WebDriverWait wait; @BeforeClass public static void setupClassTest(){ WebDriverManager.chromedriver().setup(); } @Before public void setupTest() { ChromeOptions chromeOptions = new ChromeOptions(); chromeOptions.addArguments(“--enable-web-authentication-testing-api”); //chromeOptions.setHeadless(true); driver = new ChromeDriver(chromeOptions); wait = new WebDriverWait(driver, 5); driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); } @After public void teardown() { if (driver != null) driver.quit();} } 起動オプションで指定 Headless起動も可能
10. Copyright © Yoshikazu Nojima 2018 selenium-javaでのテストコード例（2/2） 9 public class RegistrationAndAuthenticationE2ETest extends E2ETestBase{ @Test public void test() { // 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の普通の テストコード
11. Copyright © Yoshikazu Nojima 2018 ChromeのAuthenticatorエミュレータが返却する Attestation Certificate • Attestation Certificateは自己署名証明書 • RPがルート証明書とチェーンしているか検証している場合、検証エラー 10
12. Copyright © Yoshikazu Nojima 2018 おまけ • WebAuthn4JではAuthenticatorのエミュレータをPure Javaで実装 • ブラウザ使わずにサーバー単体でのテストを実装可能 11 // 認証デバイスエミュレータの接続されたクライアントエミュレータを準備 private ClientPlatform clientPlatform = EmulatorUtil.createClientPlatform(new AndroidSafetyNetAuthenticator()); @Test void validate_test(){ String rpId = “example.com”; Challenge challenge = new DefaultChallenge(); AuthenticatorSelectionCriteria authenticatorSelectionCriteria = new AuthenticatorSelectionCriteria(AuthenticatorAttachment.CROSS_PLATFORM, true, UserVerificationRequirement.REQUIRED); PublicKeyCredentialParameters publicKeyCredentialParameters = new PublicKeyCredentialParameters(PublicKeyCredentialType.PUBLIC_KEY, COSEAlgorithmIdentifier.ES256); PublicKeyCredentialUserEntity publicKeyCredentialUserEntity = new PublicKeyCredentialUserEntity(); AuthenticationExtensionsClientInputs<RegistrationExtensionClientInput> extensions = new AuthenticationExtensionsClientInputs<>(); PublicKeyCredentialCreationOptions credentialCreationOptions = new PublicKeyCredentialCreationOptions( new PublicKeyCredentialRpEntity(rpId, “example.com”), publicKeyCredentialUserEntity, challenge, Collections.singletonList(publicKeyCredentialParameters), null, Collections.emptyList(), authenticatorSelectionCriteria, AttestationConveyancePreference.DIRECT, extensions ); // エミュレータによるCredentialの生成 PublicKeyCredential<AuthenticatorAttestationResponse, RegistrationExtensionClientOutput> publicKeyCredential = clientPlatform.create(credentialCreationOptions); // 以下省略 }
13. Copyright © Yoshikazu Nojima 2018 まとめ • WebAuthnは認証デバイスに対するユーザーの承認ジェスチャーが必要 • E2E自動テスト実施する上で承認ジェスチャー要件が障害 • Chromeは起動オプションでAuthenticatorエミュレータに実装を切替、 承認ジェスチャーをスキップ可能 • WebAuthnでも諦めずにE2Eテストを書いていきましょう！ 12
14. Copyright © Yoshikazu Nojima 2018 おまけ１ ChromiumのWebAuthnのE2Eテストコード https://github.com/chromium/chromium/blob/fc74bfe460548ef49e12 d78c476f0ffc5ff2db99/third_party/blink/web_tests/http/tests/credenti almanager/virtual-navigator-credentials.html#L20-L43 13
15. Copyright © Yoshikazu Nojima 2018 おまけ２ WebAuthn Testing API Design Doc https://docs.google.com/document/d/1bp2cMgjm2HSpvL9-WsJoIQMsBi1oKGQY6CvWD- 9WmIQ/edit#heading=h.wemjkxju7znw 14