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

Fawaz Mohammad
Fawaz Mohammad
GitHub
Nina Satragno
Nina Satragno
X

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

ปัญหาของนักพัฒนาแอป

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

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

  2. อุปกรณ์ตรวจสอบสิทธิ์ที่จับต้องได้ออกแบบมาให้ปลอดภัย ดังนั้น การตรวจสอบสถานะจึงมักเป็นไปไม่ได้

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

โซลูชัน: แท็บ WebAuthn ใหม่

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

แท็บ WebAuthn ใหม่

การใช้งาน

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

กระบวนการแบบ 2 ส่วน

ส่วนที่ 1: การเพิ่มโดเมน WebAuthn ลงในโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome

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

CDP จะเชื่อมต่อส่วนหน้าของเครื่องมือสำหรับนักพัฒนาเว็บกับ Chromium ในกรณีของเรา เราใช้การดําเนินการของโดเมน WebAuthn เพื่อเป็นตัวเชื่อมระหว่างแท็บเครื่องมือสําหรับนักพัฒนาเว็บของ WebAuthn กับการใช้งาน WebAuthn ของ Chromium

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

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

(อ่านรหัส)

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

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

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

โมเดล

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

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

(อ่านรหัส)

มุมมอง

แท็บ WebAuthn ใหม่

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

  1. แถบเครื่องมือเพื่อเปิดใช้สภาพแวดล้อม Authenticator เสมือน
  2. ส่วนสำหรับเพิ่มเครื่องมือตรวจสอบสิทธิ์
  3. ส่วนสำหรับโปรแกรมตรวจสอบสิทธิ์ที่สร้างไว้

(อ่านรหัส)

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

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

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

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

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

การเพิ่มส่วนเครื่องมือตรวจสอบสิทธิ์

การเพิ่มส่วนเครื่องมือตรวจสอบสิทธิ์

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

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

มุมมอง Authenticator

มุมมอง Authenticator

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

ชื่อ Authenticator

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

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

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

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

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

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

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

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

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

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

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

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

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

โซลูชันของเรา: สร้างการสื่อสารแบบ 2 ทางจำลองระหว่างปุ่มตัวเลือกกับโปรแกรมตรวจสอบสิทธิ์ที่ใช้งานอยู่ ก่อนอื่น เราจะเก็บรักษาตัวแปร activeId ในมุมมองเพื่อติดตามรหัสของผู้ตรวจสอบสิทธิ์ที่ใช้งานอยู่ในปัจจุบัน จากนั้นเราจะรอการเรียกให้ตั้งค่า Authenticator ที่ใช้งานอยู่เพื่อแสดงผล แล้วตั้งค่า activeId เป็นรหัสของ 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 หรือ เบต้า เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ได้ก่อนที่ผู้ใช้จะพบ

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

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