Memperkenalkan petunjuk, Permintaan Origin Terkait dan serialisasi JSON untuk WebAuthn di Chrome

Chrome 128 dan 129 memperkenalkan fitur baru yang menarik untuk WebAuthn— dasar untuk membangun sistem otentikasi berbasis kunci sandi.

Eiji Kitamura

• Petunjuk: Petunjuk memberikan kontrol yang lebih baik kepada pihak tepercaya (RP) atas WebAuthn UI di browser. Mereka sangat membantu pengguna perusahaan yang ingin menggunakan kunci keamanan.
• Permintaan origin terkait: Dengan origin terkait yang diminta, RP dapat membuat kunci sandi valid di beberapa domain. Jika Anda memiliki beberapa memungkinkan pengguna menggunakan kembali kunci sandi mereka di seluruh situs Anda, menghilangkan hambatan saat {i>login<i}.
• Serialisasi JSON: API serialisasi JSON memungkinkan Anda menyederhanakan kode frontend RP dengan opsi encoding dan decoding serta kredensial yang diteruskan ke dan dari WebAuthn API.

Petunjuk

Dengan hints, pihak tepercaya (RP) kini dapat menentukan preferensi UI untuk membuat kunci sandi atau melakukan otentikasi dengan sebuah kunci sandi.

Sebelumnya, ketika RP ingin membatasi otentikator yang dapat digunakan pengguna untuk membuat kunci sandi atau untuk mengotentikasi, mereka bisa menggunakan authenticatorSelection.authenticatorAttachment untuk menentukan "platform" atau "cross-platform". Keduanya membatasi pengautentikasi ke suatu platform pengautentikasi atau roaming pengautentikasi. Dengan hints, spesifikasi ini dapat menjadi lebih fleksibel.

RP dapat menggunakan hints opsional di PublicKeyCredentialCreationOptions atau PublicKeyCredentialRequestOptions untuk menentukan "security-key", "client-device" dan "hybrid" dalam urutan preferensi dalam array.

Catatan: Di Chrome, authenticatorAttachment masih dihormati untuk saat ini.

Berikut adalah contoh permintaan pembuatan kredensial yang memilih "cross-platform" pengautentikasi dengan "security-key" sebagai petunjuk. Ini memberitahu Chrome akan menampilkan UI yang berfokus pada kunci keamanan bagi pengguna versi bisnis.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

Dengan menentukan 'security-key' sebagai petunjuk, browser akan menampilkan dialog yang berfokus pada kunci keamanan.

Ketika RP ingin memprioritaskan skenario verifikasi lintas perangkat, mereka dapat mengirim permintaan autentikasi yang memilih pengautentikasi "cross-platform" dengan "hybrid" sebagai petunjuk.

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    residentKey: true,
    hints: ['hybrid']
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

Dengan menentukan 'hibrid' sebagai petunjuk, browser akan menampilkan dialog yang berfokus pada login lintas perangkat.

Catatan: Petunjuk ini mungkin tidak dipatuhi di platform seperti Windows tempat UI tidak dikontrol oleh Chrome.

Permintaan origin terkait

Dengan Asal Terkait Permintaan, RP dapat membuat kunci sandi dapat digunakan dari beberapa domain. Membuat login terpusat dan menggunakan protokol gabungan tetap menjadi solusi yang direkomendasikan untuk di sebagian besar situs. Tetapi jika Anda memiliki beberapa domain dan penggabungan tidak mungkin dilakukan, sumber yang terkait mungkin menjadi solusi.

Semua permintaan WebAuthn harus menentukan ID pihak tepercaya (ID RP), dan semua kunci sandi dikaitkan dengan satu ID RP. Biasanya, origin hanya dapat menentukan ID RP berdasarkan domainnya, sehingga dalam hal ini www.example.co.uk dapat menentukan ID RP example.co.uk, tetapi bukan example.com. Dengan Asal Terkait Permintaan, ID RP yang diklaim dapat divalidasi dengan mengambil file JSON yang dikenal yang terletak di /.well-known/webauthn dari domain target. Jadi example.co.uk (dan example.in, example.de, dan seterusnya) semuanya dapat menggunakan ID RP dari example.com jika example.com menentukannya dalam format berikut:

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"
  ]
}

Pelajari cara menyiapkan Permintaan Origin Terkait di Mengizinkan penggunaan ulang kunci sandi di seluruh situs dengan Asal Terkait Permintaan.

Serialisasi JSON

Objek permintaan dan respons WebAuthn memiliki beberapa kolom yang berisi data mentah data biner dalam ArrayBuffer, seperti ID kredensial, ID pengguna, atau verifikasi login. Jika sebuah situs web ingin menggunakan JSON untuk bertukar data ini dengan servernya, data harus dienkode terlebih dahulu, misalnya dengan Base64URL. Hal ini menambah kompleksitas yang lebih besar bagi developer yang ingin mulai menggunakan kunci sandi di situs mereka.

WebAuthn sekarang menawarkan API untuk diurai PublicKeyCredentialCreationOptions dan PublicKeyCredentialRequestOptions WebAuthn meminta objek langsung dari JSON, dan membuat serial PublicKeyCredential respons secara langsung ke JSON. Semua kolom bernilai ArrayBuffer yang membawa biner mentah data dikonversi secara otomatis dari atau ke nilai berenkode Base64URL-nya. API ini tersedia mulai Chrome 129.

Sebelum membuat kunci sandi, ambil file yang dienkode JSON PublicKeyCredentialCreationOptions dari server dan mendekodenya menggunakan PublicKeyCredential.parseCreationOptionsFromJSON().

Dukungan Browser

• 129
• 129
• 119
• x

Sumber

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,
  });
  ...

Setelah membuat kunci sandi, enkode kredensial yang dihasilkan menggunakan toJSON() agar bahwa data itu dapat dikirim ke server.

Dukungan Browser

• 129
• 129
• 119
• x

Sumber

  ...
  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);
  ...

Sebelum mengautentikasi dengan kunci sandi, ambil file yang dienkode JSON PublicKeyRequestCreationOptions dari server dan mendekodenya menggunakan PublicKeyCredential.parseRequestOptionsFromJSON().

Dukungan Browser

• 129
• 129
• 119
• x

Sumber

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
  });
  ...

Setelah melakukan autentikasi dengan kunci sandi, enkode kredensial yang dihasilkan menggunakan toJSON() agar dapat dikirim ke server.

Dukungan Browser

• 129
• 129
• 119
• x

Sumber

  ...
  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);
  ...

Pelajari lebih lanjut

Untuk mempelajari WebAuthn dan kunci sandi lebih lanjut, lihat referensi berikut:

• Kunci sandi | Chrome untuk Developer
• Pengantar kunci sandi sisi server penerapan
• passkeys.dev