ขอแนะนำคำแนะนำ คำขอต้นทางที่เกี่ยวข้อง และการเรียงลำดับ JSON สำหรับ WebAuthn ใน Chrome

Chrome 128 และ 129 เปิดตัวฟีเจอร์ใหม่ที่น่าสนใจสำหรับ WebAuthn นั่นคือ API ที่สำคัญสำหรับสร้างระบบการตรวจสอบสิทธิ์ที่ใช้พาสคีย์

Eiji Kitamura

  • คำแนะนำ: คำแนะนำช่วยให้บุคคลที่พึ่งพา (RP) ควบคุม WebAuthn ได้ดียิ่งขึ้น UI ในเบราว์เซอร์ ซึ่งมีประโยชน์อย่างยิ่งสำหรับผู้ใช้ระดับองค์กรที่ต้องการ เพื่อใช้คีย์ความปลอดภัย
  • คำขอต้นทางที่เกี่ยวข้อง: มีต้นทางที่เกี่ยวข้อง โดย RP จะทำให้พาสคีย์ใช้งานได้ในหลายโดเมน หากคุณเป็นเจ้าของหลายบัญชี ตอนนี้ คุณสามารถให้ผู้ใช้นำพาสคีย์กลับมาใช้ซ้ำในเว็บไซต์ต่างๆ ของคุณ เพื่อขจัดอุปสรรคในการลงชื่อเข้าใช้
  • การทำให้เป็นอนุกรม JSON: API การทำให้เป็นอนุกรม JSON ช่วยให้คุณลดความซับซ้อนของโค้ดฟรอนท์เอนด์ของ RP ได้ด้วยตัวเลือกการเข้ารหัสและถอดรหัส และ ข้อมูลเข้าสู่ระบบที่ส่งไปยังและจาก WebAuthn API

คำแนะนำ

เมื่อใช้ hints บุคคลที่อาศัย (RP) สามารถระบุค่ากําหนด UI สําหรับการสร้าง พาสคีย์หรือการตรวจสอบสิทธิ์ด้วยพาสคีย์

ก่อนหน้านี้ เมื่อ RP ต้องการจํากัด Authenticator ผู้ใช้สามารถใช้เพื่อ สร้างพาสคีย์หรือตรวจสอบสิทธิ์ โดยใช้ authenticatorSelection.authenticatorAttachment เพื่อระบุ "platform" หรือ "cross-platform" โปรแกรมเหล่านี้จะจำกัด Authenticator เป็นแพลตฟอร์มตามลำดับ Authenticator หรือการโรมมิ่ง Authenticator เมื่อใช้ hints ข้อกำหนดนี้จะมีความยืดหยุ่นมากขึ้น

RP สามารถใช้ hints ที่ไม่บังคับใน PublicKeyCredentialCreationOptions หรือ PublicKeyCredentialRequestOptions เพื่อระบุ "security-key" "client-device" และ "hybrid" ในลำดับที่ต้องการในอาร์เรย์

ต่อไปนี้เป็นตัวอย่างคำขอสร้างข้อมูลเข้าสู่ระบบ "cross-platform" Authenticator ที่มี "security-key" เป็นคำแนะนำ ข้อมูลนี้จะบอก Chrome จะแสดง UI ที่เน้นคีย์ความปลอดภัยสำหรับผู้ใช้ระดับองค์กร

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});
ระบุ "คีย์ความปลอดภัย" เบราว์เซอร์จะแสดงกล่องโต้ตอบที่โฟกัสคีย์ความปลอดภัย
โดยระบุ "คีย์ความปลอดภัย" เบราว์เซอร์จะแสดงกล่องโต้ตอบที่โฟกัสคีย์ความปลอดภัย

เมื่อ RP ต้องการให้ความสำคัญกับสถานการณ์การยืนยันข้ามอุปกรณ์ ก็สามารถ ส่งคำขอการตรวจสอบสิทธิ์ที่ต้องการเครื่องมือตรวจสอบสิทธิ์ "cross-platform" โดยมี "hybrid" เป็นคำแนะนำ

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    residentKey: true,
    hints: ['hybrid']
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});
ระบุ "ไฮบริด" เบราว์เซอร์จะแสดงกล่องโต้ตอบที่มุ่งเน้นการเข้าสู่ระบบจากหลายอุปกรณ์
โดยการระบุ "ไฮบริด" เบราว์เซอร์จะแสดงกล่องโต้ตอบที่มุ่งเน้นการเข้าสู่ระบบจากหลายอุปกรณ์

มีต้นกำเนิดที่เกี่ยวข้อง คำขอ, RP สามารถ ทำให้พาสคีย์ใช้งานได้จากหลายโดเมน การสร้างการเข้าสู่ระบบแบบรวมศูนย์ และการใช้โปรโตคอลการรวมศูนย์ยังคงเป็นโซลูชันที่แนะนำสำหรับ เว็บไซต์ส่วนใหญ่ แต่ถ้าคุณเป็นเจ้าของโดเมนหลายโดเมนและการรวมศูนย์ไม่สามารถทำได้ ต้นทางที่เกี่ยวข้องอาจเป็นทางออกที่ดี

คำขอ WebAuthn ทั้งหมดต้องระบุรหัสบุคคลที่อ้างอิง (รหัส RP) และพาสคีย์ทั้งหมด เชื่อมโยงกับรหัสของ RP เดียว แต่เดิม ต้นทางจะระบุได้เพียง รหัส RP ที่อิงตามโดเมน ดังนั้นในกรณีดังกล่าว www.example.co.uk จะระบุได้ รหัส RP ของ example.co.uk แต่ไม่ใช่ example.com มีต้นทางที่เกี่ยวข้อง คำขอต่างๆ สามารถตรวจสอบรหัส RP ที่มีการอ้างสิทธิ์ได้โดยการดึงข้อมูลไฟล์ JSON ที่รู้จัก ซึ่งอยู่ที่ /.well-known/webauthn จากโดเมนเป้าหมาย ฉะนั้น example.co.uk (และ example.in, example.de และอื่นๆ) สามารถใช้รหัส RP ของ example.com หาก example.com ระบุในรูปแบบต่อไปนี้

URL: https://example.com/.well-known/webauthn

{
  "origins": [
    "https://example.co.uk",
    "https://example.de",
    "https://example.sg",
    "https://example.net",
    "https://exampledelivery.com",
    "https://exampledelivery.co.uk",
    "https://exampledelivery.de",
    "https://exampledelivery.sg",
    "https://myexamplerewards.com",
    "https://examplecars.com"
  ]
}

ดูวิธีตั้งค่าคำขอต้นทางที่เกี่ยวข้องได้ที่อนุญาตให้ใช้พาสคีย์ซ้ำในอุปกรณ์ เว็บไซต์ที่มีต้นทางที่เกี่ยวข้อง คำขอ

การเรียงลำดับ JSON

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

ตอนนี้ WebAuthn มี API สำหรับแยกวิเคราะห์แล้ว PublicKeyCredentialCreationOptions และ PublicKeyCredentialRequestOptions WebAuthn ขอออบเจ็กต์จาก JSON โดยตรง และจัดลำดับ PublicKeyCredential ตอบกลับใน JSON โดยตรง ฟิลด์ทั้งหมดที่มีค่า ArrayBuffer ซึ่งมีไบนารีดิบ ข้อมูลจะถูกแปลงจากหรือเป็นค่าที่เข้ารหัส Base64URL โดยอัตโนมัติ API เหล่านี้มีอยู่ใน Chrome 129

ก่อนสร้างพาสคีย์ ให้ดึงข้อมูล JSON ที่เข้ารหัส ออบเจ็กต์ PublicKeyCredentialCreationOptions รายการจากเซิร์ฟเวอร์และถอดรหัสโดยใช้ PublicKeyCredential.parseCreationOptionsFromJSON()

การรองรับเบราว์เซอร์

  • Chrome: 129
  • ขอบ: 129
  • Firefox: 119
  • Safari: ไม่รองรับ

แหล่งที่มา

export async function registerCredential() {

  // Fetch encoded `PublicKeyCredentialCreationOptions`
  // and JSON decode it.
  const options = await fetch('/auth/registerRequest').json();

  // Decode `PublicKeyCredentialCreationOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseCreationOptionsFromJSON(options);  

  // Invoke the WebAuthn create() function.
  const cred = await navigator.credentials.create({
    publicKey: decodedOptions,
  });
  ...

หลังจากสร้างพาสคีย์แล้ว ให้เข้ารหัสข้อมูลเข้าสู่ระบบที่ได้โดยใช้ toJSON() เพื่อให้ ให้ส่งไปยังเซิร์ฟเวอร์ได้

การรองรับเบราว์เซอร์

  • Chrome: 129
  • ขอบ: 129
  • Firefox: 119
  • Safari: ไม่รองรับ

แหล่งที่มา

  ...
  const cred = await navigator.credentials.create({
    publicKey: options,
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch('/auth/registerResponse', credential);
  ...

ให้ดึงข้อมูลที่เข้ารหัส JSON ก่อนการตรวจสอบสิทธิ์ด้วยพาสคีย์ PublicKeyRequestCreationOptions จากเซิร์ฟเวอร์และถอดรหัสโดยใช้ PublicKeyCredential.parseRequestOptionsFromJSON()

การรองรับเบราว์เซอร์

  • Chrome: 129
  • ขอบ: 129
  • Firefox: 119
  • Safari: ไม่รองรับ

แหล่งที่มา

export async function authenticate() {

  // Fetch encoded `PublicKeyCredentialRequestOptions`
  // and JSON decode it.
  const options = await fetch('/auth/signinRequest').json();

  // Decode `PublicKeyCredentialRequestOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseRequestOptionsFromJSON(options);

  // Invoke the WebAuthn get() function.
  const cred = await navigator.credentials.get({
    publicKey: options
  });
  ...

หลังจากตรวจสอบสิทธิ์ด้วยพาสคีย์แล้ว ให้เข้ารหัสข้อมูลเข้าสู่ระบบที่ได้โดยใช้ toJSON() เพื่อให้ส่งไปยังเซิร์ฟเวอร์ได้

การรองรับเบราว์เซอร์

  • Chrome: 129
  • ขอบ: 129
  • Firefox: 119
  • Safari: ไม่รองรับ

แหล่งที่มา

  ...
  const cred = await navigator.credentials.get({
    publicKey: options
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch(`/auth/signinResponse`, credential);
  ...

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับ WebAuthn และพาสคีย์ได้จากแหล่งข้อมูลต่อไปนี้