วิธีที่เราสร้างแท็บ WebAuthn ของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome

ฟาวาซ โมฮัมหมัด
Fawaz Mohammad
นีน่า ซาทราญโน
Nina Satragno

Web Authentication API หรือที่เรียกว่า WebAuthn ช่วยให้เซิร์ฟเวอร์สามารถใช้การเข้ารหัสคีย์สาธารณะในการลงทะเบียนและตรวจสอบสิทธิ์ผู้ใช้แทนการใช้รหัสผ่าน ซึ่งทำได้โดยเปิดใช้การผสานรวมระหว่างเซิร์ฟเวอร์เหล่านี้กับ Authenticator ที่มีประสิทธิภาพ โดย Authenticator เหล่านี้อาจเป็นอุปกรณ์จริงโดยเฉพาะ (เช่น คีย์ความปลอดภัย) หรือผสานรวมกับแพลตฟอร์มต่างๆ (เช่น โปรแกรมอ่านลายนิ้วมือ) ก็ได้ อ่านข้อมูลเพิ่มเติมเกี่ยวกับ WebAuthn ได้ที่นี่ webauthn.guide

ประเด็นปัญหาของนักพัฒนาซอฟต์แวร์

ก่อนหน้าโครงการนี้ WebAuthn ขาดการสนับสนุนการแก้ไขข้อบกพร่องดั้งเดิมใน Chrome นักพัฒนาแอปที่สร้างแอปที่ใช้ WebAuth ต้องการสิทธิ์เข้าถึงการตรวจสอบสิทธิ์จริง ซึ่งเป็นเรื่องยากมากเนื่องจากเหตุผล 2 ประการ ได้แก่

  1. ของแท้มีหลากหลายรสชาติ แก้ไขข้อบกพร่องเกี่ยวกับการกำหนดค่าและความสามารถที่หลากหลายซึ่งจำเป็นต้องให้นักพัฒนาซอฟต์แวร์มีสิทธิ์เข้าถึง Authenticator ต่างๆ มากมายที่บางครั้งอาจมีค่าใช้จ่ายสูง

  2. ตัวรับรองที่จับต้องได้คือมีความปลอดภัย ดังนั้นการตรวจสอบสถานะดังกล่าวมักจะทำไม่ได้

เราต้องการทำให้ง่ายขึ้นโดยเพิ่มการสนับสนุนการแก้ไขข้อบกพร่องลงในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยตรง

วิธีแก้ไข: แท็บ WebAuthn ใหม่

แท็บ WebAuthn DevTools ทำให้การแก้ไขข้อบกพร่องของ WebAuthn ง่ายขึ้นมากโดยทำให้นักพัฒนาซอฟต์แวร์จำลอง Authenticator เหล่านี้ได้ ปรับแต่งความสามารถ และตรวจสอบสถานะได้

แท็บ WebAuthn ใหม่

การใช้งาน

การเพิ่มการสนับสนุนการแก้ไขข้อบกพร่องให้กับ WebAuthn เป็นกระบวนการที่ประกอบด้วย 2 ส่วน

กระบวนการที่ประกอบด้วย 2 ส่วน

ส่วนที่ 1: การเพิ่มโดเมน WebAuthn ลงในโปรโตคอล Chrome DevTools

อย่างแรก เราใช้โดเมนใหม่ในโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (CDP) ซึ่งจะเชื่อมต่อกับตัวแฮนเดิลที่สื่อสารกับแบ็กเอนด์ WebAuthn

CDP เชื่อมต่อฟรอนท์เอนด์ของเครื่องมือ DevTools กับ Chromium ในกรณีของเรา เราใช้การทำงานของโดเมน WebAuthn เพื่อเชื่อมโยงแท็บ WebAuthn DevTools กับการใช้งาน WebAuthn ของ Chromium

โดเมน WebAuthn จะช่วยให้เปิดและปิดใช้สภาพแวดล้อม Virtual Authenticator ได้ ซึ่งจะยกเลิกการเชื่อมต่อเบราว์เซอร์จากการค้นพบ Authenticator จริง และเสียบ Virtual Discovery แทน

นอกจากนี้เรายังแสดงเมธอดในโดเมนที่ทำหน้าที่เป็นชั้นบางๆ ให้กับอินเทอร์เฟซ Virtual Authenticator และ Virtual Discovery ที่มีอยู่ ซึ่งเป็นส่วนหนึ่งของการใช้งาน WebAuthn ของ Chromium ซึ่งรวมถึงการเพิ่มและการนำ Authenticator ออก ตลอดจนการสร้าง รับ และล้างข้อมูลเข้าสู่ระบบที่ลงทะเบียนไว้

(อ่านรหัส)

ส่วนที่ 2: การสร้างแท็บที่แสดงต่อผู้ใช้

อย่างที่ 2 เราได้สร้างแท็บที่แสดงต่อผู้ใช้ในฟรอนท์เอนด์ของ DevTools แท็บประกอบด้วยมุมมองและโมเดล ตัวแทนที่สร้างขึ้นโดยอัตโนมัติจะเชื่อมต่อโดเมนกับแท็บ

แม้ว่าจะมีองค์ประกอบที่จำเป็น 3 อย่างที่เราต้องการ แต่เราต้องกังวลเกี่ยวกับเพียง 2 องค์ประกอบเท่านั้น อันได้แก่ modelและmodel คอมโพเนนต์ที่ 3 ซึ่งก็คือ agent จะสร้างขึ้นโดยอัตโนมัติหลังจากเพิ่มโดเมน กล่าวโดยย่อคือ Agent คือเลเยอร์ที่ทำหน้าที่เรียกระหว่างส่วนหน้าและ CDP

โมเดล

โมเดลนี้เป็นเลเยอร์ JavaScript ที่เชื่อมต่อ Agent กับข้อมูลพร็อพเพอร์ตี้ สำหรับกรณีของเรา โมเดลนี้ค่อนข้างเรียบง่าย โดยจะรับคำสั่งจากมุมมอง สร้างคำขอเพื่อให้ CDP ใช้ได้ต่อจากนั้นจึงส่งผ่าน Agent คำขอเหล่านี้มักเป็นแบบทางเดียวและไม่มีการส่งข้อมูลกลับไปยังมุมมอง

แต่บางครั้งเราก็ส่งคืนการตอบกลับจากโมเดลเพื่อให้รหัสสำหรับ Authenticator ที่สร้างขึ้นใหม่หรือเพื่อส่งคืนข้อมูลเข้าสู่ระบบที่เก็บไว้ใน Authenticator ที่มีอยู่

(อ่านรหัส)

มุมมอง

แท็บ WebAuthn ใหม่

เราใช้มุมมองนี้เพื่อระบุอินเทอร์เฟซผู้ใช้ที่นักพัฒนาซอฟต์แวร์จะเห็นเมื่อเข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งประกอบด้วย

  1. แถบเครื่องมือสำหรับเปิดใช้สภาพแวดล้อม Authenticator เสมือน
  2. ส่วนสำหรับเพิ่ม Authenticator
  3. ส่วนสำหรับ Authenticator ที่สร้างขึ้น

(อ่านรหัส)

แถบเครื่องมือสำหรับเปิดใช้งานสภาพแวดล้อม Authenticator เสมือน

แถบเครื่องมือ

เนื่องจากการโต้ตอบกับผู้ใช้ส่วนใหญ่จะทำงานกับ Authenticator ทีละ 1 รายการ ไม่ใช่กับทั้งแท็บ ฟังก์ชันเดียวที่เรามีให้ในแถบเครื่องมือคือการเปิดและปิดสภาพแวดล้อมเสมือนจริง

เหตุใดจึงสำคัญ ผู้ใช้ต้องสลับสภาพแวดล้อมอย่างชัดเจน เนื่องจากการทำเช่นนั้นจะยกเลิกการเชื่อมต่อเบราว์เซอร์จากการค้นพบ Authenticator จริง ดังนั้น ขณะที่ฟีเจอร์นี้เปิดอยู่ ระบบจะไม่จดจำเครื่องตรวจสอบสิทธิ์ทางกายภาพที่เชื่อมต่อ เช่น เครื่องอ่านลายนิ้วมือ

เราตัดสินใจว่าการสลับอย่างชัดเจนจะทำให้ประสบการณ์ของผู้ใช้ดีขึ้น โดยเฉพาะสำหรับผู้ที่เข้าไปที่แท็บ WebAuthn โดยไม่คาดหวังว่าระบบจะปิดใช้การค้นหาจริง

การเพิ่มส่วน Authenticator

การเพิ่มส่วน Authenticator

เมื่อเปิดใช้สภาพแวดล้อม Authenticator เสมือน เราจะนำเสนอแบบฟอร์มอินไลน์ให้แก่นักพัฒนาซอฟต์แวร์เพื่อให้เพิ่ม Authenticator เสมือนได้ ในแบบฟอร์มนี้ เรามีตัวเลือกการปรับแต่งที่ให้ผู้ใช้เลือกได้ว่าจะใช้โปรโตคอลของ Authenticator และวิธีส่ง รวมถึงตรวจสอบว่า Authenticator รองรับคีย์ที่ใช้ประจำอยู่และการยืนยันผู้ใช้หรือไม่

เมื่อผู้ใช้คลิกเพิ่ม ระบบจะรวมตัวเลือกเหล่านี้ไปยังกลุ่มและส่งไปยังโมเดลที่ทำการเรียกใช้เพื่อสร้าง Authenticator เมื่อดำเนินการเสร็จ ส่วนหน้าจะได้รับการตอบกลับ จากนั้นแก้ไข UI เพื่อรวม Authenticator ที่สร้างใหม่

มุมมอง Authenticator

มุมมอง Authenticator

ทุกครั้งที่มีการจำลอง Authenticator เราจะเพิ่มหัวข้อลงในมุมมอง Authenticator เพื่อแสดงส่วนนี้ โดยส่วน Authenticator แต่ละส่วนจะมีชื่อ รหัส ตัวเลือกการกำหนดค่า ปุ่มสำหรับนำ Authenticator ออกหรือตั้งค่าให้มีการใช้งาน และตารางข้อมูลเข้าสู่ระบบ

ชื่อ Authenticator

ชื่อของ Authenticator เป็นแบบปรับแต่งได้และมีค่าเริ่มต้นเป็น "Authenticator" ซึ่งเชื่อมต่อกับอักขระ 5 ตัวสุดท้ายของรหัส แต่เดิมชื่อ Authenticator จะเป็นรหัสแบบเต็มและเปลี่ยนแปลงไม่ได้ เราใช้ชื่อที่ปรับแต่งเพื่อให้ผู้ใช้ติดป้ายกำกับ Authenticator ได้ตามความสามารถ ตัวตรวจสอบสิทธิ์จริงที่ใช้เลียนแบบ หรือชื่อเล่นที่เข้าใจได้ง่ายกว่าการใช้รหัสที่มีอักขระ 36 ตัวเล็กน้อย

ตารางข้อมูลเข้าสู่ระบบ

เราได้เพิ่มตารางลงในส่วน Authenticator แต่ละส่วนเพื่อแสดงข้อมูลเข้าสู่ระบบทั้งหมดที่ลงทะเบียนโดย Authenticator ในแต่ละแถว เรามีข้อมูลเกี่ยวกับข้อมูลเข้าสู่ระบบ รวมถึงปุ่มสำหรับลบหรือส่งออกข้อมูลเข้าสู่ระบบ

ปัจจุบันเรารวบรวมข้อมูลเพื่อเติมในตารางเหล่านี้โดยการสำรวจ CDP เพื่อรับข้อมูลเข้าสู่ระบบที่ลงทะเบียนไว้สำหรับ Authenticator แต่ละรายการ เราวางแผนที่จะเพิ่มกิจกรรมสําหรับการสร้างข้อมูลเข้าสู่ระบบในอนาคต

ปุ่มใช้งานอยู่

นอกจากนี้ เรายังเพิ่มปุ่มตัวเลือกใช้งานอยู่ลงในส่วน Authenticator แต่ละส่วนด้วย Authenticator ที่ตั้งไว้ว่าใช้งานอยู่จะเป็นโปรแกรมเดียวที่รอฟังและลงทะเบียนข้อมูลเข้าสู่ระบบ หากไม่มีการดำเนินการนี้ การลงทะเบียนข้อมูลเข้าสู่ระบบที่มี Authenticator หลายรายการก็จะไม่มีการกำหนดไว้ ซึ่งจะเป็นข้อบกพร่องร้ายแรงเมื่อพยายามทดสอบ WebAuthn ด้วย

เราใช้สถานะแอ็กทีฟโดยใช้เมธอด SetUserPresence กับ Authenticator เสมือน เมธอด SetUserPresence จะตั้งค่าว่าการทดสอบการปรากฏตัวของผู้ใช้สําหรับ Authenticator นั้นสําเร็จหรือไม่ หากเราปิดไว้ Authenticator จะคอยฟังข้อมูลเข้าสู่ระบบไม่ได้ ดังนั้น การตรวจสอบว่าฟีเจอร์นี้เปิดอยู่สำหรับ Authenticator อย่างน้อย 1 ตัว (ตัวที่ตั้งค่าเป็นใช้งานอยู่) และปิดการแสดงตัวตนของผู้ใช้สำหรับตัวตรวจสอบสิทธิ์อื่นๆ ทั้งหมด เราจึงจะบังคับให้มีพฤติกรรมเชิงกำหนดได้

ความท้าทายที่น่าสนใจหนึ่งที่เราพบขณะเพิ่มปุ่ม "แอ็กทีฟ" คือการหลีกเลี่ยงภาวะแข่งขัน ลองพิจารณาสถานการณ์ต่อไปนี้

  1. ผู้ใช้คลิกปุ่มตัวเลือกใช้งานอยู่สำหรับ Authenticator X เพื่อส่งคำขอไปยัง CDP ให้ตั้งค่าเป็น X เป็นใช้งานอยู่ เลือกปุ่มตัวเลือกใช้งานอยู่สำหรับ X อยู่ และยกเลิกการเลือกอื่นๆ ทั้งหมด

  2. ทันทีหลังจากนั้น ผู้ใช้คลิกปุ่มตัวเลือกใช้งานอยู่สำหรับ Authenticator Y แล้วส่งคำขอไปยัง CDP เพื่อตั้งค่า Y เป็นใช้งานอยู่ เลือกปุ่มตัวเลือกใช้งานอยู่สำหรับ Y อยู่ และยกเลิกการเลือกปุ่มตัวเลือกอื่นๆ ทั้งหมด รวมถึง X

  3. ในแบ็กเอนด์ การเรียกให้ตั้งค่า Y เป็น "ใช้งานอยู่" เสร็จสมบูรณ์และปิดแล้ว ตอนนี้ Y ทำงานอยู่และ Authenticator อื่นๆ ทั้งหมดก็ไม่ได้ใช้งาน

  4. ในแบ็กเอนด์ การเรียกใช้เพื่อตั้งค่า X เป็นใช้งานอยู่เสร็จสมบูรณ์และได้รับการแก้ไขแล้ว ตอนนี้ X ทำงานอยู่และ Authenticator อื่นๆ ทั้งหมด รวมถึง Y ไม่ได้ทำงาน

ในตอนนี้ สถานการณ์ที่ได้คือ X คือ Authenticator ที่ใช้งานอยู่ แต่ปุ่มตัวเลือกใช้งานอยู่สำหรับ X จะไม่ได้เลือก คุณไม่ใช่ Authenticator ที่มีการใช้งาน อย่างไรก็ตาม ระบบจะเลือกปุ่มตัวเลือกใช้งานอยู่สำหรับ Y มีความเห็นไม่ตรงกันระหว่างส่วนหน้าและสถานะจริงของ Authenticator แน่นอนว่าเป็นปัญหา

วิธีแก้ปัญหาของเราคือ สร้างการสื่อสารแบบ 2 ทางจำลองระหว่างปุ่มตัวเลือกและ Authenticator ที่มีการใช้งาน ขั้นแรก เราจะคงตัวแปร activeId ไว้ในข้อมูลพร็อพเพอร์ตี้เพื่อติดตามรหัสของ Authenticator ที่ใช้งานอยู่ในปัจจุบัน จากนั้นเราจะรอให้มีการเรียกตั้งค่า Authenticator ที่กำลังใช้งานกลับมา แล้วจึงตั้งค่า activeId เป็นรหัสของ Authenticator นั้น สุดท้าย เราจะวนซ้ำส่วน Authenticator แต่ละส่วน หากรหัสของส่วนดังกล่าวเท่ากับ activeId เราจะตั้งค่าปุ่มเป็นการเลือก ไม่เช่นนั้นเราจะตั้งค่าปุ่มเป็น "ยกเลิกการเลือก"

โดยมีลักษณะดังนี้


 async _setActiveAuthenticator(authenticatorId) {
   await this._clearActiveAuthenticator();
   await this._model.setAutomaticPresenceSimulation(authenticatorId, true);
   this._activeId = authenticatorId;
   this._updateActiveButtons();
 }
 
 _updateActiveButtons() {
   const authenticators = this._authenticatorsView.getElementsByClassName('authenticator-section');
   Array.from(authenticators).forEach(authenticator => {
     authenticator.querySelector('input.dt-radio-button').checked =
         authenticator.getAttribute('data-authenticator-id') === this._activeId;
   });
 }
 
 async _clearActiveAuthenticator() {
   if (this._activeId) {
     await this._model.setAutomaticPresenceSimulation(this._activeId, false);
   }
   this._activeId = null;
 }

เมตริกการใช้งาน

เราต้องการติดตามการใช้งานฟีเจอร์นี้ ในตอนแรกเรามี 2 ตัวเลือก

  1. นับทุกครั้งที่มีการเปิดแท็บ WebAuthn ในเครื่องมือสำหรับนักพัฒนาเว็บ ตัวเลือกนี้อาจทำให้เกิดการนับมากเกินไป เนื่องจากผู้ใช้อาจเปิดแท็บโดยไม่ได้ใช้งานจริง

  2. ติดตามจำนวนครั้งที่มีการสลับช่องทำเครื่องหมาย "เปิดใช้สภาพแวดล้อม Authenticator เสมือน" ในแถบเครื่องมือ นอกจากนี้ ตัวเลือกนี้ยังมีปัญหาการนับเกินที่อาจเกิดขึ้นด้วย เนื่องจากบางตัวอาจสลับเปิดและปิดสภาพแวดล้อมหลายครั้งในเซสชันเดียวกัน

สุดท้ายนี้ เราตัดสินใจที่จะเลือกคนหลังแต่จำกัดการนับโดยตรวจสอบว่าได้เปิดใช้สภาพแวดล้อมในเซสชันหรือยัง ดังนั้นเราจะเพิ่มจำนวนเพียง 1 รายการเท่านั้น ไม่ว่านักพัฒนาซอฟต์แวร์จะเปิดสภาพแวดล้อมกี่ครั้งก็ตาม ซึ่งได้ผลเนื่องจากมีการสร้างเซสชันใหม่ทุกครั้งที่แท็บเปิดขึ้นมาอีกครั้ง ซึ่งจะรีเซ็ตการตรวจสอบและให้ระบบเพิ่มเมตริกได้อีกครั้ง

สรุป

ขอขอบคุณที่อ่าน หากคุณมีคำแนะนำในการปรับปรุงแท็บ WebAuthn โปรดแจ้งให้เราทราบโดยการส่งข้อบกพร่อง

ต่อไปนี้เป็นแหล่งข้อมูลบางส่วนหากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ WebAuthn

ดาวน์โหลดช่องตัวอย่าง

ลองใช้ Chrome Canary, Dev หรือเบต้าเป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ช่องทางแสดงตัวอย่างเหล่านี้ช่วยให้คุณได้เข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะได้ใช้งาน

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่ๆ และการเปลี่ยนแปลงในโพสต์ หรือเรื่องอื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ

  • ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่าน crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม   > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวีตที่ @ChromeDevTools
  • โปรดแสดงความคิดเห็นในวิดีโอ YouTube เกี่ยวกับมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บในวิดีโอ YouTube หรือเคล็ดลับสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ