WebAuthn이라고도 하는 Web Authentication API를 사용하면 서버에서 비밀번호가 아닌 공개 키 암호화를 사용하여 사용자를 등록하고 인증할 수 있습니다. 이러한 서버와 강력한 인증자 간의 통합을 가능하게 합니다. 이러한 인증자는 전용 물리적 기기 (예: 보안 키)이거나 플랫폼 (예: 지문 판독기)과 통합될 수 있습니다. webauthn.guide에서 WebAuthn에 대해 자세히 알아볼 수 있습니다.
개발자 고충사항
이 프로젝트 이전에는 WebAuthn이 Chrome에서 기본 디버깅을 지원하지 않았습니다. WebAuth를 사용하는 앱을 빌드하려는 개발자는 실제 인증자에 액세스해야 했습니다. 이 작업이 특히 어려웠던 이유는 다음 두 가지입니다.
인증자에는 다양한 유형이 있습니다. 다양한 구성과 기능을 디버깅하려면 개발자가 때로는 비용이 많이 드는 다양한 인증자에 액세스할 수 있어야 했습니다.
물리적 인증자는 기본적으로 안전합니다. 따라서 상태를 검사하는 것은 일반적으로 불가능합니다.
우리는 Chrome DevTools에서 바로 디버깅 지원을 추가하여 이 작업을 더 쉽게 할 수 있길 바랐습니다.
해결 방법: 새 WebAuthn 탭
WebAuthn DevTools 탭을 사용하면 개발자가 인증자를 에뮬레이션하고 기능을 맞춤설정하며 상태를 검사할 수 있으므로 WebAuthn을 훨씬 더 쉽게 디버깅할 수 있습니다.
구현
WebAuthn에 디버깅 지원을 추가하는 작업은 두 부분으로 구성된 프로세스였습니다.
파트 1: Chrome DevTools 프로토콜에 WebAuthn 도메인 추가
먼저 Chrome DevTools 프로토콜 (CDP)에 WebAuthn 백엔드와 통신하는 핸들러에 연결되는 새 도메인을 구현했습니다.
CDP는 DevTools 프런트엔드를 Chromium과 연결합니다. 이 사례에서는 WebAuthn 도메인 작업을 활용하여 WebAuthn DevTools 탭과 Chromium의 WebAuthn 구현 사이를 연결했습니다.
WebAuthn 도메인을 사용하면 가상 OTP 환경을 사용 설정하거나 사용 중지할 수 있으며, 이렇게 하면 브라우저의 실제 OTP 검색 연결이 해제되고 대신 가상 검색에 연결됩니다.
또한 도메인에서 얇은 레이어 역할을 하는 메서드를 Chromium의 WebAuthn 구현의 일부인 기존 Virtual Authenticator 및 Virtual Discovery 인터페이스에 노출합니다. 이러한 메서드에는 인증자 추가 및 삭제, 등록된 사용자 인증 정보 생성, 가져오기, 삭제가 포함됩니다.
(코드 읽기)
파트 2: 사용자 대상 탭 빌드
둘째, DevTools 프런트엔드에 사용자 대상 탭을 빌드했습니다. 탭은 뷰와 모델로 구성됩니다. 자동 생성된 에이전트가 도메인을 탭과 연결합니다.
필요한 구성요소는 3가지이지만 그중 두 가지인 model과 model에만 신경 쓰면 됩니다. 세 번째 구성요소인 에이전트는 도메인을 추가한 후 자동으로 생성됩니다. 간단히 말해서 상담사는 프런트엔드와 CDP 간의 통화를 전달하는 레이어입니다.
모델
모델은 에이전트와 뷰를 연결하는 JavaScript 레이어입니다. 우리의 경우 모델은 매우 간단합니다. 뷰에서 명령어를 가져오고 CDP에서 사용할 수 있도록 요청을 빌드한 후 에이전트를 통해 전송합니다. 이러한 요청은 일반적으로 단방향이며 뷰로 다시 전송되는 정보는 없습니다.
하지만 새로 생성된 인증자의 ID를 제공하거나 기존 인증자에 저장된 사용자 인증 정보를 반환하기 위해 모델의 응답을 다시 전달하는 경우도 있습니다.
(코드 읽기)
뷰
이 뷰를 사용하여 개발자가 DevTools에 액세스할 때 찾을 수 있는 사용자 인터페이스를 제공합니다. 여기에는 다음이 포함됩니다.
- 가상 인증자 환경을 사용하기 위한 툴바
- 인증자를 추가하는 섹션.
- 생성된 인증자를 위한 섹션입니다.
(코드 읽기)
가상 인증자 환경을 사용 설정하는 툴바
대부분의 사용자 상호작용은 전체 탭이 아니라 한 번에 하나의 인증자와 함께 이루어지기 때문에, 툴바에서 제공하는 유일한 기능은 가상 환경을 켜고 끄는 것입니다.
이것이 필요한 이유는 무엇인가요? 사용자가 환경을 명시적으로 전환해야 합니다. 그렇게 하면 브라우저가 실제 OTP Discovery에서 연결 해제되기 때문입니다. 따라서 사용 설정되어 있는 동안에는 지문 판독기와 같은 연결된 실제 인증자를 인식하지 못합니다.
Google에서는 명시적인 전환 기능을 통해 사용자 환경이 개선되고, 특히 실제 검색이 사용 중지될 것이라고 예상하지 않고 WebAuthn 탭을 탐색하는 사용자에게 더 나은 사용자 환경을 제공하겠다고 결정했습니다.
OTP 섹션 추가
가상 인증자 환경을 사용 설정하면 개발자가 가상 인증자를 추가할 수 있는 인라인 양식을 개발자에게 제공합니다. 이 양식에서는 사용자가 인증자의 프로토콜과 전송 방법을 결정할 수 있는 맞춤설정 옵션을 제공하고 인증자가 상주 키 및 사용자 인증을 지원하는지 여부를 확인합니다.
사용자가 추가를 클릭하면 이러한 옵션이 번들로 묶여 인증자를 생성하는 모델로 전송됩니다. 완료되면 프런트엔드가 응답을 수신하고 새로 생성된 인증자를 포함하도록 UI를 수정합니다.
OTP 뷰
인증자가 에뮬레이션될 때마다 인증자 뷰에 섹션을 추가하여 인증자를 나타냅니다. 각 인증자 섹션에는 이름, ID, 구성 옵션, 인증자를 삭제하거나 활성화하기 위한 버튼, 사용자 인증 정보 테이블이 포함되어 있습니다.
OTP 이름
인증자의 이름은 맞춤설정할 수 있으며 기본적으로 ID의 마지막 5자(영문 기준)와 연결된 'OTP'로 설정됩니다. 원래 인증자의 이름은 전체 ID였으며 변경할 수 없습니다. 사용자가 인증자의 기능, 에뮬레이션하려는 물리적 인증자 또는 36자 ID보다 이해하기 쉬운 닉네임에 따라 인증자에 라벨을 지정할 수 있도록 맞춤설정 가능한 이름을 구현했습니다.
사용자 인증 정보 테이블
각 인증자 섹션에 인증자가 등록한 모든 사용자 인증 정보를 보여주는 표를 추가했습니다. 각 행에는 사용자 인증 정보에 대한 정보와 사용자 인증 정보를 삭제하거나 내보내는 버튼이 제공됩니다.
현재 Google은 CDP를 폴링하여 각 인증자의 등록된 사용자 인증 정보를 가져오는 방식으로 이러한 테이블을 채우는 정보를 수집합니다. 향후 사용자 인증 정보 생성을 위한 이벤트를 추가할 계획입니다.
활성 버튼
또한 각 인증자 섹션에 활성 라디오 버튼이 추가되었습니다. 현재 활성으로 설정된 인증자는 사용자 인증 정보를 수신 대기하고 등록하는 유일한 인증자입니다. 그렇지 않으면 인증자가 여러 개 있을 때 사용자 인증 정보를 등록하는 것이 확정적이지 않으므로 이를 사용하여 WebAuthn을 테스트하려고 할 때 치명적인 결함이 발생합니다.
가상 인증자에 SetUserPresence 메서드를 사용하여 활성 상태를 구현했습니다. SetUserPresence 메서드는 특정 인증자에 대한 사용자 존재 테스트가 성공할지 여부를 설정합니다. 이 기능을 사용 중지하면 인증자가 사용자 인증 정보를 수신 대기할 수 없습니다. 따라서 최대 한 개의 인증자 (활성으로 설정된 인증자)에 이 기능이 사용 설정되어 있는지 확인하고 다른 모든 인증자에 대해서는 사용자 접속 상태를 사용 중지하면 확정적 동작을 강제할 수 있습니다.
활성 버튼을 추가하는 동안 발생한 흥미로운 과제는 경합 상태를 피하는 것이었습니다. 다음 상황을 살펴보세요.
사용자가 OTP X에 대한 활성 라디오 버튼을 클릭하여 CDP에 X를 활성 상태로 설정하도록 요청을 보냅니다. X에 대해 활성 라디오 버튼이 선택되어 있고 나머지는 모두 선택 해제되어 있습니다.
직후에 사용자가 OTP Y에 대한 활성 라디오 버튼을 클릭하여 Y를 활성으로 설정하라는 요청을 CDP에 전송합니다. Y에 대해 활성 라디오 버튼이 선택되어 있고 X를 포함한 다른 모든 부분은 선택 해제되어 있습니다.
백엔드에서 Y를 활성으로 설정하는 호출이 완료되고 해결됩니다. Y는 현재 활성 상태이고 다른 모든 인증자는 활성 상태가 아닙니다.
백엔드에서는 X를 활성으로 설정하는 호출이 완료되고 해결됩니다. X는 현재 활성 상태이고 Y를 포함한 다른 모든 인증자는 활성 상태가 아닙니다.
이제 그 결과는 다음과 같습니다. X는 활성 인증자 입니다. 하지만 X의 활성 라디오 버튼이 선택되지 않았습니다. Y는 활성 인증자가 아닙니다. 하지만 Y에는 활성 라디오 버튼이 선택되어 있습니다. 프런트엔드와 인증자의 실제 상태 간에는 불일치가 있습니다. 분명히 이것은 문제가 됩니다.
Google의 해결책은 라디오 버튼과 활성 인증자 간에 가상 양방향 통신을 설정하는 것입니다. 먼저 뷰에서 activeId 변수를 유지하여 현재 활성 인증자의 ID를 추적합니다. 그런 다음 반환되는 인증자를 활성 상태로 설정하도록 호출이 대기한 후 activeId를 해당 인증자의 ID로 설정합니다. 마지막으로 각 인증자 섹션을 반복합니다. 이 섹션의 ID가 activeId와 같으면 버튼이 선택됨으로 설정됩니다. 그렇지 않으면 버튼을 선택 해제됨으로 설정합니다.
다음과 같이 표시됩니다.
async _setActiveAuthenticator(authenticatorId) {
await this._clearActiveAuthenticator();
await this._model.setAutomaticPresenceSimulation(authenticatorId, true);
this._activeId = authenticatorId;
this._updateActiveButtons();
}
_updateActiveButtons() {
const authenticators = this._authenticatorsView.getElementsByClassName('authenticator-section');
Array.from(authenticators).forEach(authenticator => {
authenticator.querySelector('input.dt-radio-button').checked =
authenticator.getAttribute('data-authenticator-id') === this._activeId;
});
}
async _clearActiveAuthenticator() {
if (this._activeId) {
await this._model.setAutomaticPresenceSimulation(this._activeId, false);
}
this._activeId = null;
}
사용량 측정항목
이 기능의 사용을 추적하려고 했습니다. 처음에 두 가지 옵션을 생각했습니다.
DevTools에서 WebAuthn 탭이 열릴 때마다 카운트합니다. 이 옵션을 사용하면 누군가 탭을 실제로 사용하지 않고 열 수 있으므로 노출수가 과도하게 집계될 수 있습니다.
툴바의 '가상 인증자 환경 사용' 체크박스가 전환된 횟수를 추적합니다. 또한 이 옵션은 일부 사용자가 동일한 세션에서 환경을 여러 번 켜거나 끌 수 있으므로 과다 계산 문제가 발생할 수 있습니다.
결국 Google은 후자를 사용하기로 결정했지만 세션에 이미 환경이 사용 설정되어 있는지 확인하여 계산을 제한했습니다. 따라서 개발자가 환경을 전환한 횟수와 관계없이 1씩만 증가합니다. 이는 탭을 다시 열 때마다 새 세션이 생성되어 확인을 재설정하고 측정항목이 다시 증가할 수 있기 때문에 작동합니다.
요약
읽어 주셔서 감사합니다. WebAuthn 탭 개선을 위한 제안사항이 있으면 버그를 신고하여 알려주시기 바랍니다.
다음은 WebAuthn에 관해 자세히 알아볼 수 있는 리소스입니다.
- WebAuthn DevTools 프런트엔드 디자인 문서
- 웹 인증 테스트 API 설계 문서
- Web Authentication API (WebAuthn) 사양
- WebAuthn 설명 및 가이드
미리보기 채널 다운로드
Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.
Chrome DevTools 팀에 문의하기
다음 옵션을 사용하여 게시물의 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 모든 것에 대해 논의합니다.
- crbug.com을 통해 제안이나 의견을 제출해 주세요.
- DevTools에서 옵션 더보기
> 도움말 > DevTools 문제 보고를 사용하여 DevTools 문제를 신고합니다. - @ChromeDevTools로 트윗을 보냅니다.
- DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 의견을 남겨주세요.