Introduction to WebAuthn Testing API

Transcript

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