วิธีที่เราสร้างแท็บ 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 Discovery และ Virtual Authenticator ที่มีอยู่ ซึ่งเป็นส่วนหนึ่งของการใช้งาน WebAuthn ของ Chromium ซึ่งรวมถึงการเพิ่มและนำเครื่องมือตรวจสอบสิทธิ์ออก ตลอดจนสร้าง รับ และล้างข้อมูลเข้าสู่ระบบที่ลงทะเบียนไว้

(อ่านรหัส)

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

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

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

โมเดล

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

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

(อ่านรหัส)

มุมมอง

แท็บ WebAuthn ใหม่

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

  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 เป็นโปรแกรมตรวจสอบสิทธิ์ที่ใช้งานอยู่ แต่ปุ่มตัวเลือกใช้งานอยู่สําหรับ 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

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