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

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

Eiji Kitamura

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

คำแนะนำ

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

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

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

ต่อไปนี้เป็นตัวอย่างคำขอสร้างข้อมูลเข้าสู่ระบบที่แนะนำ"cross-platform"โปรแกรมตรวจสอบสิทธิ์ที่มี "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

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

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

  • Chrome: 129
  • Edge: 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
  • Edge: 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);
  ...

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

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

  • Chrome: 129
  • Edge: 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
  • Edge: 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 และพาสคีย์ได้ที่แหล่งข้อมูลต่อไปนี้