이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Credential Management API 기능 감지 진단

Eiji Kitamura

요약

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로 보내 주세요.