WebAuthn 공개 키 자격 증명 / User-Agent 힌트

WebAuthn과 패스키는 강력한 추진력을 얻으며 점점 더 많이 채택되고 있습니다. 또한 기술적인 관점에서도 WebAuthn 표준은 빠르게 발전하고 있습니다. **WebAuthn 공개 키 자격 증명 힌트(User-agent 힌트라고도 함)**는 웹 인증 API에 가장 최근에 추가된 기능으로, 개발자가 애플리케이션에서 패스키 인증을 구현하는 방식을 개선하는 것을 목표로 합니다.

이 글에서는 다음 질문에 답해 보겠습니다.

• WebAuthn 공개 키 자격 증명 힌트란 무엇인가요?
• WebAuthn 공개 키 자격 증명 힌트가 왜 필요한가요?
• WebAuthn 공개 키 자격 증명 힌트는 어떻게 작동하나요?
• 프로젝트에서 WebAuthn 공개 키 자격 증명 힌트를 사용할 때의 제한 사항과 권장 사례는 무엇인가요?

먼저 동기부터 살펴보겠습니다.

요즘에는 패스키를 생성하고 저장할 수 있는 곳이 다양합니다.

• 서드파티 비밀번호 관리자 (예: 1Password, Dashlane, Bitwarden, KeePassXC)
• Google 비밀번호 관리자 / Chrome 프로필
• iCloud 키체인 / Apple 암호
• Windows Hello
• 다른 스마트폰(iOS, Android) 또는 태블릿(iPadOS, Android)
• 하드웨어 보안 키 (예: YubiKey)

사용자에게는 이것이 유연성과 선택의 자유를 제공할 수 있습니다. 하지만 일부 애플리케이션과 시나리오에서는 이러한 옵션 중 일부를 제한해야 하는 경우가 있습니다. 예를 들어, 보안 요구 사항이 높아 하드웨어 보안 키만 허용하려는 경우입니다.

이러한 패스키 생성 및 저장에 영향을 미치기 위해 authenticatorAttachment 속성을 사용해 왔습니다.

Subscribe to our Passkeys Substack for the latest news.

Subscribe

authenticatorAttachment는 신뢰 당사자가 패스키를 생성할 수 있는 위치를 제한할 수 있도록 합니다.

platform은 WebAuthn을 실행하는 기기에 내장된 인증자를 나타냅니다. WebAuthn은 플랫폼별 API와 같은 해당 플랫폼에 특정한 전송 방법을 사용하여 통신합니다. 플랫폼 인증자에 연결된 공개 키 자격 증명을 플랫폼 자격 증명이라고 합니다. 위 목록에서 다음 자격 증명 관리자/위치에 플랫폼 자격 증명을 저장할 수 있습니다.

• 서드파티 비밀번호 관리자 (예: 1Password, Dashlane, Bitwarden, KeePassXC)
• Google 비밀번호 관리자 / Chrome 프로필
• iCloud 키체인 / Apple 암호
• Windows Hello

Windows 11 및 Chrome:

macOS 15 (Sequoia) 및 Chrome:

취소를 클릭하면 다음과 같은 모달이 나타납니다:

macOS 15 (Sequoia) 및 Safari:

cross-platform은 WebAuthn을 실행하는 기기 외부에 있는 인증자(로밍 인증자)를 나타내며, 여러 기기에서 사용할 수 있기 때문입니다. WebAuthn은 블루투스나 NFC와 같은 크로스플랫폼 전송 프로토콜을 사용하여 이와 상호 작용합니다. 로밍 인증자와 연결된 공개 키 자격 증명을 로밍 자격 증명이라고 합니다. 위 목록에서 다음 자격 증명 관리자/위치에 크로스플랫폼 자격 증명을 저장할 수 있습니다.

• 다른 스마트폰(iOS, Android) 또는 태블릿(iPadOS, Android)
• 하드웨어 보안 키 (예: YubiKey)

Windows 11 및 Chrome:

macOS 15 (Sequoia) 및 Chrome:

macOS 15 (Sequoia) 및 Safari:

지정되지 않음은 플랫폼 인증자 또는 크로스플랫폼 인증자를 사용할 수 있음을 나타냅니다. 여기에서 사용자는 패스키를 저장할 위치를 선택할 수 있습니다.

Windows 11 및 Chrome:

macOS 15 (Sequoia) 및 Chrome:

macOS 15 (Sequoia) 및 Safari:

취소를 클릭하면 다음과 같은 모달이 나타납니다:

authenticatorAttachment는 꽤 오랫동안 사용되어 왔습니다. 하지만 QR 코드와 블루투스를 통한 기기 간 인증과 같은 새로운 개발에 대해서는 유연하지 못했습니다. 여기서 패스키는 예를 들어 Google 비밀번호 관리자(플랫폼 자격 증명)에도 저장되지만, 신뢰 당사자에 의해 cross-platform으로 트리거됩니다. 그 외에도, 신뢰 당사자가 로그인(등록이 아닌) 과정에서 사용되어야 할 패스키 종류에 영향을 미치려면 자격 증명의 transports 값을 수정하는 방법밖에 없었습니다.

바로 이 지점에서 WebAuthn 공개 키 자격 증명 힌트가 등장합니다.

Become part of our Passkeys Community for updates & support.

Join

WebAuthn 공개 키 자격 증명 힌트는 웹 인증 API(WebAuthn Level 3에서 공식적으로 도입)에 새로 도입된 매개변수입니다. 이는 인증 과정에서 사용자가 사용할 가능성이 있는 인증자 유형에 대한 가이드를 브라우저에 제공합니다. 이를 통해 브라우저의 UI를 가장 관련성 높은 옵션에 집중시켜 더 간소화되고 직관적인 사용자 경험을 제공할 수 있습니다.

세 가지 유형의 힌트

힌트는 세 가지 유형으로 제공됩니다.

1. security-key: 사용자가 하드웨어 보안 키(예: YubiKey)를 사용할 것으로 예상됨을 나타냅니다.
2. client-device: 사용자가 클라이언트 기기에 연결된 플랫폼 인증자(예: macOS의 Touch ID, iOS의 Face ID 또는 Windows의 Windows Hello)를 사용할 것임을 제안합니다.
3. hybrid: 사용자가 QR 코드와 블루투스를 통해 기기 간 인증을 위해 스마트폰이나 태블릿을 사용할 수 있음을 의미합니다.

이러한 힌트는 신뢰 당사자의 엄격한 요구 사항이 아니라, 브라우저에 힌트를 주어 사용자 경험을 향상시키기 위한 가이드 역할을 합니다.

다음은 authenticatorAttachment가 지정되지 않고 WebAuthn User-agent 힌트가 security-key로 설정된 macOS Sequoia(Edge + Chrome) 및 Windows 10(Chrome)의 스크린샷입니다.

여기서 또 다른 제한 사항을 볼 수 있는데, security-key 힌트가 Windows 10에서는 적어도 직접적으로는 존중되지 않는다는 것입니다. 흐름은 기본적으로 client-device 힌트와 동일합니다.

취소를 클릭하면 다음과 같은 모달이 나타납니다:

다음은 authenticatorAttachment가 지정되지 않고 WebAuthn User-agent 힌트가 client-device로 설정된 macOS Sequoia(Edge + Chrome) 및 Windows 10(Chrome)의 스크린샷입니다.

취소를 클릭하면 다음과 같은 모달이 나타납니다:

취소를 클릭하면 다음과 같은 모달이 나타납니다:

취소를 클릭하면 다음과 같은 모달이 나타납니다:

다음은 authenticatorAttachment가 지정되지 않고 WebAuthn User-agent 힌트가 hybrid로 설정된 macOS Sequoia(Edge + Chrome) 및 Windows 10(Chrome)의 스크린샷입니다.

힌트가 도입되면서 개발자는 이제 우선순위가 높은 순서대로 선호도 배열을 제공하여 더 많은 유연성을 확보할 수 있습니다.

아래 코드 스니펫은 사용자가 하드웨어 보안 키를 사용하여 인증할 가능성이 높다고 브라우저에 알려주어 UI를 그에 맞게 집중시킵니다.

이전 버전의 User-agent와의 호환성을 위해, 이 힌트가 PublicKeyCredentialCreationOptions에서 사용될 때 authenticatorAttachment는 cross-platform으로 설정해야 합니다.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: /* your challenge here */,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

security 힌트는 웹사이트/신뢰 당사자가 하드웨어 보안 키만 허용하고 사용자를 이 방향으로 유도하려는 고신뢰 사례에서 특히 유용합니다.

이 예시에서 힌트는 사용자가 현재 기기에 내장된 플랫폼 인증자를 사용할 수 있음을 제안합니다.

이전 버전의 User-agent와의 호환성을 위해, 이 힌트가 PublicKeyCredentialCreationOptions에서 사용될 때 authenticatorAttachment는 platform으로 설정해야 합니다.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: /* your challenge here */,
    residentKey: true,
    hints: ['client-device'],
    authenticatorSelection: {
      authenticatorAttachment: 'platform'
    }
  }
});

client-device 힌트를 설정하는 것은 사용자 계정에 여러 패스키가 연결되어 있고 그 중 일부는 로그인하는 기기에서 사용 가능하지만 다른 것들은 다른 기기에 저장되어 있을 때 유용합니다. 시스템(패스키 인텔리전스)이 로그인하려는 사용자가 로컬 패스키를 사용할 확률이 높다고 감지하면, 이 힌트를 PublicKeyCredentialRequestOptions에 설정하여 사용자가 올바른 패스키를 선택하는 데 필요한 클릭 한 번을 줄일 수 있습니다.

이 예시에서 힌트는 사용자가 인증을 위해 스마트폰이나 유사한 기기를 사용할 수 있음을 제안합니다.

이전 버전의 User-agent와의 호환성을 위해, 이 힌트가 PublicKeyCredentialCreationOptions에서 사용될 때 authenticatorAttachment는 cross-platform으로 설정해야 합니다.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: /* your challenge here */,
    residentKey: true,
    hints: ['hybrid'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

hybrid 힌트는 사용자가 여러 키를 가지고 있고 시스템(패스키 인텔리전스)이 현재 기기에는 로컬 패스키가 없을 가능성이 높다고 감지할 때 도움이 될 수 있습니다. UX를 개선하고 클릭 한 번을 줄이기 위해 이 WebAuthn User-agent 힌트를 설정하고 사용자에게 직접 기기 간 인증(QR 코드 및 블루투스 경유)을 요청할 수 있습니다. 또한, 모바일 우선 패스키 시스템을 구축하려는 경우 이 힌트를 설정하는 것이 매우 합리적입니다.

다양한 옵션을 직접 시험해 보려면 Passkeys Debugger를 살펴보는 것을 추천합니다.

Want to experiment with passkey flows? Try our Passkeys Debugger.

Try for Free

WebAuthn 공개 키 자격 증명 힌트가 authenticatorAttachment 및 credential transports와 같은 다른 WebAuthn 매개변수와 어떻게 상호 작용하는지 이해하는 것이 중요합니다.

첫째, 이러한 힌트는 엄격한 요구 사항이 아니라는 점을 유의해야 합니다. 이는 user-agent(브라우저)를 구속하지 않으며, 요청에 대한 문맥 정보를 활용하여 최상의 경험을 제공하기 위한 가이드 역할을 합니다. 즉, 브라우저는 힌트를 고려할 수 있지만 반드시 엄격하게 따를 의무는 없습니다.

힌트는 선호도가 높은 순서대로 배열로 제공됩니다. 이 순서에 따라 브라우저가 우선순위를 정합니다.

• 첫 번째 힌트가 우선: 두 힌트가 모순되는 경우 브라우저는 첫 번째 힌트에 우선순위를 둡니다.
• 중복 힌트: 더 구체적인 힌트가 모든 브라우저에서 인식되지 않을 수 있는 경우, 더 넓은 호환성을 위해 덜 구체적인 힌트를 뒤에 포함할 수 있습니다.
• 중복된 힌트: 동일한 힌트가 두 번 이상 나타나면 이후의 모든 등장은 무시됩니다.

예시:

hints: ['security-key', 'hybrid', 'client-device']

이 배열에서:

1. 브라우저는 먼저 security-key를 우선시합니다.
2. 적용할 수 없는 경우 hybrid를 고려합니다.
3. 마지막으로 client-device(클라이언트 기기의 플랫폼 인증자)를 살펴봅니다.

힌트는 authenticatorAttachment 및 credential transports에 포함된 정보와 모순될 수 있습니다. 이런 경우 힌트가 우선합니다. 이는 인증자를 platform 또는 cross-platform으로 제한했던 이전의 엄격한 authenticatorAttachment 사용법에 비해 더 많은 유연성을 제공합니다.

모순되는 매개변수가 있는 예시:

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: /* your challenge here */,
    hints: ['hybrid'],
    authenticatorSelection: {
      authenticatorAttachment: 'platform' // 힌트와 모순됨
    }
  }
});

이 경우:

• 힌트: 하이브리드 인증자에 대한 선호도를 제안합니다.
• authenticatorAttachment: platform을 지정하며, 이는 일반적으로 인증자를 클라이언트 기기로 제한합니다.
• 결과: 브라우저는 authenticatorAttachment보다 힌트를 우선시하여 하이브리드 옵션에 집중합니다.

현재 WebAuthn 공개 키 자격 증명 힌트는 **Chrome(버전 128부터)**에서만 사용할 수 있습니다. 현재 Edge와 Safari는 이 기능을 통합할 계획이라고 밝혔으며, Firefox는 아직 출시 일정을 확정하지 않았습니다.

Chrome에서는 현재 authenticatorAttachment 매개변수가 계속 존중된다는 점을 기억하는 것이 중요합니다. 이는 오늘날 어떤 힌트가 설정되든 authenticatorAttachment가 결정적인 요소라는 것을 의미합니다. 하지만 향후 Chrome 버전에서는 공개 키 자격 증명 힌트가 선호되고 유일한 접근 방식이 될 것으로 예상합니다.

최신 Chrome 버전이 WebAuthn User-agent 힌트를 지원하더라도, 이 힌트는 Windows 11 및 Windows Hello / Windows 보안에서 존중되지 않습니다. 근본적인 이유는 UI가 운영 체제(Windows Hello / Windows 보안) 자체에 의해 제어되기 때문입니다.

또한, Google 비밀번호 관리자에 저장되어 Windows 11에 동기화된 패스키의 경우, 최종 로컬 인증이 Windows 11에서 Windows Hello / Windows 보안으로 이루어지기 때문에 WebAuthn User-agent 힌트가 존중되지 않습니다. Microsoft 계정을 통한 Windows 11에서의 패스키 동기화가 예정되어 있으므로, Windows 11 및 WebAuthn User-agent 힌트에 대한 개선도 기대됩니다.

Windows 10에서는 WebAuthn UI가 Windows Hello / Windows 보안이 아닌 Chrome에 의해 처리되므로 WebAuthn User-agent 힌트가 존중됩니다. 하지만 저희 테스트 중에는 security-key에 대한 효과를 보지 못했습니다. 이 힌트가 설정되었을 때, 흐름은 client-device의 흐름과 유사해 보였습니다.

WebAuthn 공개 키 자격 증명(user-agent) 힌트는 개발자와 사용자 모두에게 다양한 이점을 제공합니다. 이 기능은 아직 새롭고 모든 브라우저와 운영 체제에 출시되지 않았습니다(2024년 10월 기준).

특히 Windows 11과 관련된 현재의 제한 사항을 인지하는 것이 중요합니다. Windows 11에서는 패스키 UI가 Windows Hello(Windows Hello 보안 모달)에 의해 처리되며, 이는 현재 Chrome/Edge의 WebAuthn User-agent 힌트 지원보다 우선합니다. 이는 Google 비밀번호 관리자에서 Windows로 동기화되는 패스키에도 적용됩니다(여기서도 힌트는 아직 효과가 없습니다).

이는 WebAuthn 공개 키 자격 증명 힌트가 주요 데스크톱 운영 체제 중 macOS와 Windows 10에서만 제대로 작동한다는 것을 의미합니다.

또한, 2024년 10월 현재, 이러한 운영 체제에서 Chrome/Edge를 사용하더라도 authenticatorAttachment가 설정되어 있으면 이 또한 WebAuthn User-agent 힌트보다 우선합니다(Google의 발표에 따름).

사용 사례 관점에서, 우리는 이 새로운 기능의 가치를 최대한 활용하기 위해 다음과 같은 권장 사용 사례를 제시합니다.

백엔드와 패스키 인텔리전스를 구축할 때, 공개 키 자격 증명 힌트를 적절히 사용하여 로그인을 용이하게 하고 사용자의 불필요한 클릭을 줄이도록 노력하세요. 예를 들어, 시스템이 사용자가 로컬 패스키를 사용할 가능성이 높은 기기에서 로그인하는 것을 감지하면 client-device 힌트를 사용하세요.

사용자가 새 기기에서 웹사이트에 접속하고 패스키 인텔리전스가 사용자의 모바일 기기에 패스키가 있을 수 있다는 것을 알면, 힌트를 hybrid로 설정하여 사용자가 신속하게 QR 코드를 스캔하고 하이브리드 패스키를 활용할 수 있도록 하세요.

여기서 주요 목표는 더 매끄럽고 직관적인 사용자 경험을 제공하는 것입니다. 개발자는 어떤 인증자가 사용될 가능성이 높은지에 대한 가이드를 브라우저에 제공함으로써 로그인 과정에서 사용자의 혼란과 불편함을 줄일 수 있습니다. 사용자가 불필요한 인증 옵션에 압도되는 대신, 힌트를 통해 브라우저는 가장 관련성 높은 선택지에 집중할 수 있게 되어 더 빠르고 간단한 경험을 제공합니다.

사용자 인증을 위해 하드웨어 보안 키를 표준화한 고신뢰 기업이나 정부 기관은 패스키 자격 증명 힌트가 특히 유용하다는 것을 알게 될 것입니다. security-key 힌트를 사용함으로써 브라우저가 하드웨어 보안 키 옵션을 눈에 띄게 표시하도록 할 수 있습니다.

이는 직원들에게 하드웨어 보안 키가 발급되었고 다른 인증 방법(예: 플랫폼 인증자)이 허용되지 않는 대규모 조직에 특히 유용합니다. security-key 힌트는 기업이 향후 개선을 위한 유연성을 제한하지 않으면서 인증 흐름을 고정할 수 있게 해줍니다.

hybrid 힌트는 기기 간 인증과 따라서 모바일 우선 접근 방식이 바람직하거나 사용자가 기기나 플랫폼 간에 자주 이동하는 시나리오에서 빛을 발합니다.

이 사용 사례의 예로는 대부분의 사용자가 생체 인식 방법이나 웹 기반 인증 앱(모바일 우선 패스키)을 통해 스마트폰을 인증에 사용할 것으로 예상하는 소비자 대상 앱이 있습니다. 개발자는 hybrid를 힌트로 지정함으로써 브라우저의 UI가 스마트폰 사용을 장려하여 편의성과 접근성을 향상시킬 수 있습니다.

WebAuthn 공개 키 자격 증명 힌트는 패스키 인증 중 사용자 경험을 향상시키는 유연한 방법을 제공합니다. 우리가 얻은 통찰력을 바탕으로 서론의 질문들을 다시 살펴보겠습니다.

1. WebAuthn 공개 키 자격 증명 힌트란 무엇인가요?

   웹사이트/앱이 클라이언트에게 사용자가 사용할 가능성이 가장 높은 인증 방법(하드웨어 보안 키, 플랫폼 인증자, 또는 기기 간 인증과 같은 하이브리드 솔루션)을 안내하기 위해 제공하는 선택적 제안입니다.

2. WebAuthn 공개 키 자격 증명 힌트가 왜 필요한가요?

   사용자에게 제시되는 옵션을 좁혀 불필요한 불편함/클릭을 줄이고 전반적인 경험을 개선하여 인증 프로세스를 간소화합니다.

3. WebAuthn 공개 키 자격 증명 힌트는 어떻게 작동하나요?

   개발자는 문맥에 따라 security-key, client-device, 또는 hybrid와 같은 힌트를 지정하여 브라우저가 사용자를 위한 관련 인증 방법의 우선순위를 정하도록 합니다. 이러한 힌트는 엄격한 요구 사항은 아니지만, 인증 중 UI 흐름을 최적화하는 데 도움이 됩니다.

4. 제한 사항과 권장 사용 사례는 무엇인가요?

   현재 이 힌트에 대한 완전한 지원은 Chrome과 Edge에 국한되어 있으며, Windows 11과 같은 다른 브라우저 및 운영 체제는 다양한 수준의 호환성을 보입니다. 가장 효과적인 사용 사례로는 로그인 UX 개선, 고보안 환경에서 하드웨어 보안 키 사용 강제, 모바일 우선 애플리케이션에서 기기 간 인증 활성화 등이 있습니다.

결론적으로, WebAuthn 공개 키 자격 증명 힌트는 개발자가 각 사용자 시나리오에 가장 적합한 옵션으로 브라우저를 안내함으로써 더 직관적이고 사용자 친화적인 인증 프로세스를 만들 수 있게 해줍니다. 아직 발전 중인 기능이지만, 패스키 구현에서 보안과 사용자 경험을 모두 크게 향상시킬 수 있습니다.