요약
WebAuthn은 공개 키 사용자 인증 정보 기반 인증을 웹에 도입하여 보안을 강화하는 데 도움이 되며 곧 Chrome, Firefox, Edge (업데이트된 사양)에서 지원될 예정입니다.
새로운 종류의 Credential
객체를 추가하지만, 사용 중인 특정 사용자 인증 정보 유형을 기능 감지하지 않고 인증 정보 관리 API를 사용하는 웹사이트가 손상될 수 있습니다.
현재 특성 감지를 위해 이 작업을 수행 중인 경우
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
// use CM API
}
대신 다음을 수행하세요.
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
if (window.PasswordCredential) {
// Get/Store PasswordCredential
}
if (window.FederatedCredential) {
// Get/Store FederatedCredential
}
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
// Call navigator.credentials.preventSilentAccess()
}
샘플 코드에 적용된 변경사항을 예로 참고하세요.
자세한 내용을 알아보려면 계속 읽어보세요.
Credential Management API란 무엇인가요?
Credential Management API(CM API)는 호출 출처의 사용자 인증 정보를 저장/검색하기 위해 웹사이트가 사용자 에이전트의 사용자 인증 정보 저장소에 프로그래매틱 방식으로 액세스할 수 있도록 합니다.
기본 API는 다음과 같습니다.
navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.create()
navigator.credentials.preventSilentAccess()
원래 CM API 사양은 다음과 같은 두 가지 사용자 인증 정보 유형을 정의합니다.
PasswordCredential
FederatedCredential
PasswordCredential
는 사용자 ID와 비밀번호가 포함된 사용자 인증 정보입니다.
FederatedCredential
는 사용자 ID와 ID 제공업체를 나타내는 문자열이 포함된 사용자 인증 정보입니다.
이러한 두 가지 사용자 인증 정보를 사용하면 웹사이트에서 다음 작업을 할 수 있습니다.
- 사용자가 사이트에 도달하자마자 이전에 저장된 비밀번호 기반 또는 제휴 인증 정보로 로그인할 수 있도록 허용(자동 로그인)
- 사용자가 로그인한 비밀번호 기반 또는 제휴 사용자 인증 정보를 저장합니다.
- 사용자의 로그인 사용자 인증 정보를 최신 상태로 유지합니다(예: 비밀번호 변경 후).
WebAuthn이란 무엇인가요?
WebAuthn(웹 인증)은 CM API에 공개 키 사용자 인증 정보를 추가합니다. 예를 들어 웹사이트에서 FIDO 2.0 규격 인증자 기기를 사용하여 2단계 인증을 구현할 수 있는 표준화된 방법을 제공합니다.
기술적 수준에서 WebAuthn은 PublicKeyCredential
인터페이스로 CM API를 확장합니다.
어떤 문제가 있나요?
이전에는 개발자가 다음 코드로 CM API를 기능 감지하도록 안내했습니다.
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
// Use CM API
}
But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.
The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.
**Supported credential types by browsers**
<table class="properties with-heading-tint"><tbody><tr>
<th></th>
<th>PasswordCredential / FederatedCredential</th>
<th>PublicKeyCredential</th>
</tr><tr><th>Chrome
</th><td>Available
</td><td>In development
</td></tr><tr><th>Firefox
</th><td>N/A
</td><td>Aiming to ship on 60
</td></tr><tr><th>Edge
</th><td>N/A
</td><td>Implemented with <a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello-in-microsoft-edge/">older API</a>. New API (navigator.credentials) coming soon.
</td></tr></tbody></table>
## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.
```js
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
if (window.PasswordCredential) {
// Get/Store PasswordCredential
}
if (window.FederatedCredential) {
// Get/Store FederatedCredential
}
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
// Call navigator.credentials.preventSilentAccess()
}
샘플 코드에 적용된 실제 변경사항을 예로 참고하세요.
참고로 다음은 WebAuthn에 추가된 PublicKeyCredential
를 감지하는 방법입니다.
if (window.PublicKeyCredential) {
// use CM API with PublicKeyCredential added in the WebAuthn spec
}
타임라인
WebAuthn의 가장 빠른 구현은 Firefox이며 2018년 5월 초에 안정화될 예정입니다.
최종
궁금한 점이 있으면 @agektmr 또는 agektmr@chromium.org로 문의해 주세요.