בדיקה לזיהוי תכונות של Credential Management API

Eiji Kitamura

סיכום

WebAuthn עוזר לשפר את האבטחה על ידי הוספת אימות מבוסס פרטי כניסה של מפתח ציבורי לאינטרנט. בקרוב תהיה תמיכה ב-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()
}

לדוגמה, השינויים שבוצעו בקוד לדוגמה.

כדי לקבל מידע נוסף, כדאי להמשיך לקרוא.

הערה: אם אתם משתמשים בזהות Google כדרך הראשית שבה המשתמשים נכנסים לחשבון, כדאי לכם להשתמש בספריית JavaScript להרשמה בנגיעה אחת וכניסה אוטומטית שמבוססת על Credential Management API. היא משלבת כניסה באמצעות חשבון Google וכניסה באמצעות סיסמה בקריאה אחת ל-API, ומוסיפה תמיכה ביצירת חשבון בלחיצה אחת.

מהו Credential Management API

Credential Management API (CM API) מעניק לאתרים גישה פרוגרמטית למאגר פרטי הכניסה של סוכן המשתמש, כדי לאחסן או לאחזר את פרטי הכניסה של המשתמש עבור מקור הקריאה.

ממשקי API בסיסיים הם:

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

במפרט המקורי של CM API מוגדרים 2 סוגים של פרטי כניסה:

• PasswordCredential
• FederatedCredential

PasswordCredential הוא פרטי כניסה שמכילים את מזהה המשתמש והסיסמה שלו. השדה FederatedCredential הוא פרטי כניסה שמכילים את מזהה המשתמש ומחרוזת שמייצגת ספק זהויות.

בעזרת שני פרטי הכניסה האלה, אתרי אינטרנט יכולים:

• לאפשר למשתמש להיכנס באמצעות פרטי כניסה מבוססי סיסמה או משותפים שנשמרו בעבר, ברגע שהוא מגיע לדף (כניסה אוטומטית).
• לאחסן את פרטי הכניסה המאוחדת או המבוססים על סיסמה שבאמצעותם המשתמש נכנס לחשבון,
• עדכון פרטי הכניסה של המשתמש (למשל, אחרי שינוי הסיסמה)

מהו WebAuthn

WebAuthn (אימות אינטרנט) מוסיף פרטי כניסה של מפתח ציבורי ל-CM API. לדוגמה, השירות מספק לאתרים דרך סטנדרטית להטמיע אימות דו-שלבי באמצעות מכשירי אימות שתואמים ל-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 או לכתובת [e-mail].