การตรวจสอบการตรวจหาฟีเจอร์ API การจัดการข้อมูลเข้าสู่ระบบ

Eiji Kitamura

สรุป

WebAuthn ช่วยเพิ่มความปลอดภัยด้วยการนำการตรวจสอบสิทธิ์ที่ใช้ข้อมูลเข้าสู่ระบบแบบคีย์สาธารณะไปยังเว็บ และเร็วๆ นี้ระบบจะรองรับใน Chrome, Firefox และ Edge (พร้อมข้อกำหนดที่อัปเดตแล้ว) โดยจะเพิ่มออบเจ็กต์ Credential ประเภทใหม่ที่อาจทําให้เว็บไซต์ที่ใช้ Credential Management 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) ช่วยให้เว็บไซต์เข้าถึงที่เก็บข้อมูลเข้าสู่ระบบของ User Agent แบบเป็นโปรแกรมได้เพื่อจัดเก็บ/ดึงข้อมูลเข้าสู่ระบบของผู้ใช้สำหรับต้นทางที่เรียกใช้

API พื้นฐาน ได้แก่

• navigator.credentials.get()
• navigator.credentials.store()
• navigator.credentials.create()
• navigator.credentials.preventSilentAccess()

ข้อกำหนดเดิมของ CM API กำหนดข้อมูลเข้าสู่ระบบ 2 ประเภทดังนี้

• PasswordCredential
• FederatedCredential

PasswordCredential เป็นข้อมูลเข้าสู่ระบบที่มี ID และรหัสผ่านของผู้ใช้ FederatedCredential คือข้อมูลเข้าสู่ระบบที่มีรหัสของผู้ใช้และสตริงที่แสดงถึงผู้ให้บริการข้อมูลประจำตัว

เมื่อมีข้อมูลเข้าสู่ระบบ 2 รายการนี้ เว็บไซต์จะทำสิ่งต่อไปนี้ได้

• อนุญาตให้ผู้ใช้ลงชื่อเข้าใช้ด้วยข้อมูลรับรองที่ใช้รหัสผ่านหรือแบบสมาพันธ์ที่บันทึกไว้ก่อนหน้านี้ทันทีที่ลงชื่อเข้าใช้ (ลงชื่อเข้าใช้อัตโนมัติ)
• จัดเก็บข้อมูลเข้าสู่ระบบแบบสมาพันธ์หรือรหัสผ่านที่ผู้ใช้ลงชื่อเข้าใช้ไว้
• อัปเดตข้อมูลเข้าสู่ระบบของผู้ใช้ให้เป็นปัจจุบันอยู่เสมอ (เช่น หลังจากเปลี่ยนรหัสผ่าน)

WebAuthn คืออะไร

WebAuthn (การตรวจสอบสิทธิ์เว็บ) เพิ่มข้อมูลเข้าสู่ระบบคีย์สาธารณะลงใน CM API ตัวอย่างเช่น ช่วยให้เว็บไซต์มีวิธีมาตรฐานในการใช้การตรวจสอบสิทธิ์ด้วยปัจจัยที่สองโดยใช้อุปกรณ์ Authenticator ที่เป็นไปตามข้อกำหนดของ FIDO 2.0

ในระดับทางเทคนิค WebAuthn จะขยายการใช้งาน CM API ด้วยอินเทอร์เฟซ PublicKeyCredential

ปัญหาคืออะไร

ก่อนหน้านี้เราได้แนะนำให้นักพัฒนาแอปใช้ฟีเจอร์สำหรับตรวจหา 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()
}

ดูการเปลี่ยนแปลงจริงที่เกิดขึ้นกับโค้ดตัวอย่างเป็นตัวอย่าง

วิธีตรวจหา PublicKeyCredential ที่เพิ่มใน WebAuthn เพื่อใช้เป็นข้อมูลอ้างอิง

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

ไทม์ไลน์

การใช้งาน WebAuthn แรกสุดที่ใช้ได้คือ Firefox และวางแผนว่าจะเสถียรประมาณต้นเดือนพฤษภาคม 2018

สุดท้าย

หากมีข้อสงสัย โปรดส่งไปที่ @agektmr หรือ agektmr@chromium.org