Izinkan penggunaan ulang kunci sandi di seluruh situs Anda dengan Permintaan Asal Terkait

Maud Nalpas

Masalah yang diselesaikan oleh Permintaan Asal Terkait

Kunci sandi terikat dengan situs tertentu dan hanya dapat digunakan untuk login di situs tempatnya dibuat.

Hal ini ditentukan dalam ID pihak tepercaya (ID RP), yang untuk kunci sandi yang dibuat untuk domain example.com dapat berupa www.example.com atau example.com.

Meskipun ID RP mencegah kunci sandi digunakan sebagai kredensial tunggal untuk autentikasi di mana saja, ID RP akan menimbulkan masalah untuk:

• Situs dengan beberapa domain: Pengguna tidak dapat menggunakan kunci sandi yang sama untuk login di berbagai domain khusus negara (misalnya, example.com dan example.co.uk) yang dikelola oleh perusahaan yang sama.
• Domain bermerek: Pengguna tidak dapat menggunakan kredensial yang sama di berbagai domain yang digunakan oleh satu merek (misalnya acme.com dan acmerewards.com).
• Aplikasi seluler: Aplikasi seluler sering kali tidak memiliki domainnya sendiri, sehingga pengelolaan kredensial menjadi sulit.

Ada solusi berdasarkan federasi identitas, dan solusi lainnya berdasarkan iframe, tetapi solusi tersebut tidak praktis dalam beberapa kasus. Permintaan Asal Terkait menawarkan solusi.

Catatan: ID RP memang memisahkan kredensial di antara situs yang berbeda—tetapi perlindungan phising sebenarnya berasal dari verifikasi asal situs di kolom CollectedClientData.

Solusi

Dengan Permintaan Asal Terkait, situs dapat menentukan asal yang diizinkan untuk menggunakan ID RP-nya.

Hal ini membuka kemungkinan bagi pengguna untuk menggunakan kembali kunci sandi yang sama di beberapa situs yang Anda operasikan.

Untuk menggunakan Permintaan Origin Terkait, Anda harus menayangkan file JSON khusus di URL tertentu https://{RP ID}/.well-known/webauthn. Jika example.com ingin mengizinkan origin tambahan menggunakannya sebagai ID RP, origin tersebut harus menayangkan file berikut di https://example.com/.well-known/webauthn:

{
    "origins": [
        "https://example.co.uk",
        "https://example.de",
        "https://example-rewards.com"
    ]
}

Saat berikutnya salah satu situs ini melakukan panggilan untuk pembuatan kunci sandi (navigator.credentials.create) atau autentikasi (navigator.credentials.get) yang menggunakan example.com sebagai ID RP, browser akan melihat ID RP yang tidak cocok dengan origin yang meminta. Jika mendukung Permintaan Origen Related, browser akan terlebih dahulu mencari file webauthn di https://{RP ID}/.well-known/webauthn. Jika file ada, browser akan memeriksa apakah origin yang membuat permintaan diizinkan dalam file tersebut. Jika ya, Anda akan melanjutkan ke langkah-langkah pembuatan kunci sandi atau autentikasi. Jika tidak mendukung Permintaan Origin Terkait, browser akan menampilkan SecurityError.

Dukungan browser

• Chrome: Didukung mulai dari Chrome 128.
• Safari: Didukung mulai dari macOS 15 beta 3, dan di perangkat seluler iOS 18 beta 3.
• Firefox: Menunggu posisi.

Peringatan: Mulai Agustus 2024, Permintaan Origin Terkait tidak didukung di Firefox, dan getClientCapabilities belum tersedia bagi Anda untuk mendeteksi fitur yang tidak ada dan mengimplementasikan penggantian. Jika Anda menerapkan Permintaan Asal Terkait, pengguna Firefox tidak akan dapat membuat kunci sandi (atau login dengan kunci sandi tersebut) di domain yang ingin menggunakan situs lain sebagai ID RP dan SecurityError akan ditampilkan.

Cara menyiapkan Permintaan Asal Terkait

Demo berikut menggunakan contoh dua situs, https://ror-1.glitch.me dan https://ror-2.glitch.me.
Untuk memungkinkan pengguna login dengan kunci sandi yang sama di kedua situs tersebut, situs ini menggunakan Permintaan Asal Terkait untuk mengizinkan ror-2.glitch.me menggunakan ror-1.glitch.me sebagai ID RP-nya.

Demo

Catatan: Buka demo di salah satu browser yang didukung.

https://ror-2.glitch.me menerapkan Permintaan Asal Terkait untuk menggunakan ror-1.glitch.me sebagai ID RP, sehingga ror-1 dan ror-2 menggunakan ror-1.glitch.me sebagai ID RP setelah membuat kunci sandi atau mengautentikasi dengan kunci sandi tersebut.
Kami juga telah mengimplementasikan database kunci sandi bersama di seluruh situs ini.

Amati pengalaman pengguna berikut:

• Anda berhasil membuat kunci sandi, dan mengautentikasi dengan kunci sandi tersebut, di ror-2—meskipun ID RP-nya adalah ror-1 (dan bukan ror-2).
• Setelah membuat kunci sandi di ror-1 atau ror-2, Anda dapat melakukan autentikasi dengan kunci sandi tersebut di ror-1 dan ror-2. Karena ror-2 menentukan ror-1 sebagai ID RP, membuat pembuatan kunci sandi atau permintaan autentikasi dari salah satu situs tersebut sama dengan membuat permintaan di ror-1. ID RP adalah satu-satunya hal yang mengaitkan permintaan ke origin.
• Setelah Anda membuat kunci sandi di ror-1 atau ror-2, kunci sandi tersebut dapat diisi otomatis oleh Chrome di ror-1 dan ror-2.
• Kredensial yang dibuat di salah satu situs ini akan memiliki ID RP ror-1.

Berkat Permintaan Origin Terkait, pengguna dapat menggunakan kredensial kunci sandi yang sama di ror-1 dan ror-2. Chrome juga akan mengisi otomatis kredensial.

Lihat kode:

• Lihat file ./well-known/webauthn yang disiapkan di codebase ror-1.
• Lihat kemunculan RP_ID_ROR di codebase ror-2.

Catatan: Dalam demo ini, agar lebih mudah, tidak ada pemeriksaan sandi yang sebenarnya. Demo ini berfokus pada kunci sandi.

Langkah 1: Terapkan database akun bersama

Jika Anda ingin pengguna dapat login dengan kunci sandi yang sama di site-1 dan site-2, terapkan database akun yang dibagikan di kedua situs ini.

Langkah 2: Siapkan file JSON .well-known/webauthn di site-1

Pertama, konfigurasikan site-1.com sehingga memungkinkan site-2.com menggunakannya sebagai ID RP. Untuk melakukannya, buat file JSON webauthn:

{
    "origins": [
        "https://site-2.com"
    ]
}

Objek JSON harus berisi origin bernama kunci yang nilainya adalah array dari satu atau beberapa string yang berisi origin web.

Batasan penting: Maksimum 5 label

Setiap elemen dalam daftar ini akan diproses untuk mengekstrak label eTLD + 1. Misalnya, label eTLD + 1 dari example.co.uk dan example.de adalah example. Namun, label eTLD + 1 dari example-rewards.com adalah example-rewards. Di Chrome, jumlah label maksimum adalah 5.

Peringatan: Jika daftar Anda menyertakan terlalu banyak label (lebih dari 5), elemen yang berlebih akan diabaikan.

Langkah 3: Tayangkan JSON .well-known/webauthn di site-1

Kemudian, tayangkan file JSON Anda di site-1.com/.well-known/webauthn.

Perhatian: File harus ditayangkan dengan jenis konten application/json dan berisi satu objek JSON yang mencantumkan origin yang diizinkan. Format yang benar untuk file adalah: /.well-known/webauthn (jangan sertakan ekstensi .json).

Misalnya, secara ekspres:

app.get("/.well-known/webauthn", (req, res) => {
  const origins = {
    origins: ["https://site-2.com"],
  };
  return res.json(origins);
});

Di sini, kita menggunakan res.json ekspres, yang telah menetapkan content-type yang benar ('application/json');

Langkah 4: Tentukan ID RP yang diinginkan di situs-2

Di codebase site-2, tetapkan site-1.com sebagai ID RP di mana pun diperlukan:

• Setelah pembuatan kredensial:
  • Tetapkan site-1.com sebagai ID RP dalam pembuatan kredensial options yang diteruskan ke panggilan frontend navigator.credentials.create, dan biasanya dihasilkan di sisi server.
  • Tetapkan site-1.com sebagai ID RP yang diharapkan, saat Anda menjalankan verifikasi kredensial sebelum menyimpannya ke database Anda.
• Setelah autentikasi:
  • Tetapkan site-1.com sebagai ID RP dalam autentikasi options yang diteruskan ke panggilan frontend navigator.credentials.get, dan biasanya dibuat sisi server.
  • Tetapkan site-1.com sebagai ID RP yang diharapkan untuk diverifikasi di server, saat Anda menjalankan verifikasi kredensial sebelum mengautentikasi pengguna.

Catatan: Bagaimana dengan origin? Bagaimana dengan RP name? Di codebase situs-2, origin yang diharapkan tidak akan berubah (https://site-2.com), karena kode ini menentukan tempat asal permintaan yang diharapkan. Sesuai dengan nama RP (rp.name), nama ini tidak digunakan dalam praktik. Anda dapat membiarkannya kosong.

Pemecahan masalah

Pesan error di Chrome saat membuat kredensial. Error ini ditampilkan jika file `.well-known/webauthn` tidak dapat ditemukan di `https://{RP ID}/.well-known/webauthn`.

Pesan error di Chrome saat pembuatan kredensial. Error ini ditampilkan jika file `.well-known/webauthn` dapat ditemukan, tetapi tidak mencantumkan asal yang Anda coba buat kredensialnya.

Pertimbangan lainnya

Membagikan kunci sandi di seluruh situs dan aplikasi seluler

Permintaan Origin Terkait memungkinkan pengguna Anda menggunakan kembali kunci sandi di beberapa situs. Untuk mengizinkan pengguna menggunakan kembali kunci sandi di seluruh situs dan aplikasi seluler, gunakan teknik berikut:

• Di Chrome: Digital Asset Links. Pelajari lebih lanjut di Menambahkan dukungan untuk Digital Asset Links.
• Di Safari: Domain terkait.

Berbagi sandi di seluruh situs

Permintaan Origin Terkait memungkinkan pengguna Anda menggunakan kembali kunci sandi di seluruh situs. Solusi untuk membagikan sandi di berbagai situs berbeda-beda untuk setiap pengelola sandi. Untuk Pengelola Sandi Google, gunakan Digital Asset Links . Safari memiliki sistem yang berbeda.

Peran pengelola kredensial dan agen pengguna

Hal ini melampaui cakupan Anda sebagai developer situs, tetapi perhatikan bahwa dalam jangka panjang, ID RP tidak boleh menjadi konsep yang terlihat oleh pengguna di agen pengguna atau pengelola kredensial yang digunakan pengguna Anda. Sebagai gantinya, agen pengguna dan pengelola kredensial harus menunjukkan kepada pengguna tempat kredensial mereka telah digunakan. Perubahan ini akan memerlukan waktu untuk diterapkan. Solusi sementaranya adalah menampilkan situs saat ini dan situs pendaftaran asli.