Cara menggunakan JS-COOKIE pada JavaScript

Question

Ikhtisar

Express.js menggunakan cookie untuk menyimpan id sesi (dengan tanda tangan enkripsi) di browser pengguna dan kemudian, atas permintaan berikutnya, menggunakan nilai cookie itu untuk mengambil informasi sesi yang disimpan di server. Penyimpanan sisi server ini dapat berupa penyimpanan memori (default) atau toko lain yang mengimplementasikan metode yang diperlukan (seperti connect-redis ).

Table of Contents Show

Sisi server
Mengaktifkan JavaScript di Google Chrome
Mengaktifkan JavaScript di browser lain
Menangani ITP di Safari dan browser lain tempat cookie pihak ketiga diblokir
Dalam artikel ini
Apa itu Intelligent Tracking Protection (ITP)?
Gambaran umum solusi
Implikasi kinerja dan UX
Menggunakan iframe
Pelajari lebih lanjut tentang implikasi keamanan token refresh di browser
Langkah berikutnya

Table of Contents

Sisi server
Mengaktifkan JavaScript di Google Chrome
Mengaktifkan JavaScript di browser lain
Menangani ITP di Safari dan browser lain tempat cookie pihak ketiga diblokir
Dalam artikel ini
Apa itu Intelligent Tracking Protection (ITP)?
Gambaran umum solusi
Implikasi kinerja dan UX
Menggunakan iframe
Pelajari lebih lanjut tentang implikasi keamanan token refresh di browser
Langkah berikutnya

Detail

Express.js/Connect membuat string 24-karakter Base64 menggunakan utils.uid(24) dan menyimpannya dalam req.sessionID. String ini kemudian digunakan sebagai nilai dalam cookie.

Sisi klien

Cookie yang ditandatangani selalu digunakan untuk sesi, sehingga nilai cookie akan memiliki format berikut.

[sid].[signature]

Di mana [sid] adalah sessionID dan [tanda tangan] dihasilkan dengan menandatangani [sid] menggunakan kunci rahasia yang disediakan saat menginisialisasi middleware sesi. Langkah penandatanganan dilakukan untuk mencegah gangguan. Seharusnya tidak dapat dihitung secara komputasional untuk memodifikasi [sid] dan kemudian membuat ulang [signature] tanpa sepengetahuan kunci rahasia yang digunakan. Cookie sesi masih rentan terhadap pencurian dan penggunaan kembali, jika tidak diperlukan modifikasi [sid].

Nama untuk cookie ini adalah

connect.sid

Sisi server

Jika handler muncul setelah cookieParser dan session middleware, itu akan memiliki akses ke variabel req.cookies. Ini berisi objek JSON yang kuncinya adalah kunci cookie dan nilainya adalah nilai cookie. Ini akan berisi kunci bernama connect.sid dan nilainya akan menjadi pengidentifikasi sesi yang ditandatangani.

Berikut adalah contoh cara mengatur rute yang akan memeriksa keberadaan cookie sesi pada setiap permintaan dan mencetak nilainya ke konsol.

app.get("/*", function(req, res, next) {

    if(typeof req.cookies['connect.sid'] !== 'undefined') {
        console.log(req.cookies['connect.sid']);
    }

    next(); // Call the next middleware
});

Anda juga harus memastikan router (app.use(app.router)) disertakan setelah cookieParser dan session di bagian configure Anda.

Berikut ini adalah contoh data yang disimpan secara internal oleh Express.js/Connect.

{
  "lastAccess": 1343846924959,
  "cookie": {
    "originalMaxAge": 172800000,
    "expires": "2012-08-03T18:48:45.144Z",
    "httpOnly": true,
    "path": "/"
  },
  "user": { 
    "name":"waylon",
    "status":"pro"
  }
}

Bidang user adalah khusus. Yang lainnya adalah bagian dari manajemen sesi.

Contohnya adalah dari Express 2.5.

Untuk melihat iklan Google di situs, aktifkan JavaScript di browser Anda.

Mengaktifkan JavaScript di Google Chrome

Buka Chrome di komputer Anda.
Klik
Setelan.
Klik Keamanan dan Privasi.
Klik Setelan situs.
Klik JavaScript.
Pilih Situs dapat menggunakan JavaScript.

Mengaktifkan JavaScript di browser lain

Ikuti petunjuk yang diberikan oleh browser Anda:

Microsoft Edge
Mozilla Firefox
Apple Safari

Upgrade browser, software keamanan, atau patch dapat mengubah setelan JavaScript browser Anda. Jika mengalami masalah saat melihat iklan Google, pastikan JavaScript diaktifkan di browser Anda.

Jika setelan JavaScript ditetapkan ke "Prompt", situs yang menayangkan iklan Google dapat menampilkan peringatan.

Apakah ini membantu?

Bagaimana cara meningkatkannya?

Lompati ke konten utama

Browser ini sudah tidak didukung.

Mutakhirkan ke Microsoft Edge untuk memanfaatkan fitur, pembaruan keamanan, dan dukungan teknis terkini.

Artikel
08/06/2022
4 menit untuk membaca

Dalam artikel ini

Banyak browser memblokir cookie pihak ketiga, cookie berdasarkan permintaan ke domain selain domain yang ditampilkan di bilah alamat browser. Hal ini memutus alur implisit dan memerlukan pola autentikasi baru agar berhasil memasukkan pengguna. Di platform identitas Microsoft, kami menggunakan alur otorisasi dengan Proof Key for Code Exchange (PKCE) dan refresh token untuk memastikan pengguna tetap masuk saat cookie pihak ketiga diblokir.

Apa itu Intelligent Tracking Protection (ITP)?

Apple Safari memiliki fitur perlindungan privasi yang secara default aktif bernama Intelligent Tracking Protection atau ITP. ITP memblokir cookie "pihak ketiga", cookie berdasarkan permintaan yang melintasi domain.

Bentuk umum pelacakan pengguna dilakukan dengan memuat iframe ke situs pihak ketiga di latar belakang dan menggunakan cookie untuk menghubungkan pengguna di seluruh Internet. Sayangnya, pola ini juga merupakan cara standar untuk menerapkan alur implisit dalam aplikasi halaman tunggal (SPAs). Ketika browser memblokir cookie pihak ketiga untuk mencegah pelacakan pengguna, SPAs juga rusak.

Safari tidak sendirian dalam memblokir cookie pihak ketiga untuk meningkatkan privasi pengguna. Brave telah memblokir cookie pihak ketiga secara default, dan Chromium (platform di balik Google Chrome dan Microsoft Edge) telah mengumumkan bahwa mereka juga akan berhenti mendukung cookie pihak ketiga di masa mendatang.

Solusi yang diuraikan dalam artikel ini berfungsi di semua browser ini, atau di mana saja cookie pihak ketiga diblokir.

Gambaran umum solusi

Untuk terus mengautentikasi pengguna di SPAs, pengembang aplikasi harus menggunakan alur kode otorisasi. Dalam alur kode auth, penyedia identitas mengeluarkan kode, dan SPA menukar kode untuk token akses dan token refresh. Ketika aplikasi memerlukan token tambahan, aplikasi dapat menggunakan alur token refresh untuk mendapatkan token baru. Microsoft Authentication Library (MSAL) untuk JavaScript v2.0, mengimplementasikan alur kode otorisasi untuk SPA dan, dengan pembaruan kecil, adalah pengganti drop-in untuk MSAL.js 1.x.

Untuk platform identitas Microsoft, SPAs dan klien asli mengikuti panduan protokol serupa:

Penggunaan tantangan kode PKCE
- PKCE diperlukan untuk SPAs pada platform identitas Microsoft. PKCE direkomendasikan untuk klien asli dan rahasia.
Tidak ada penggunaan rahasia klien

SPAs memiliki dua batasan tambahan:

URI pengalihan harus ditandai sebagai jenisspauntuk mengaktifkan CORS pada titik akhir log masuk.
Token refresh yang dikeluarkan melalui alur kode otorisasi ke spa URI pengalihan memiliki masa pakai 24 jam daripada masa pakai 90 hari.

Implikasi kinerja dan UX

Beberapa aplikasi menggunakan upaya masuk alur implisit tanpa mengalihkan dengan membuka iframe login menggunakan prompt=none. Di sebagian besar browser, permintaan ini akan merespons dengan token untuk pengguna yang saat ini masuk (dengan asumsi persetujuan telah diberikan). Pola ini berarti aplikasi tidak memerlukan pengalihan halaman penuh untuk mengizinkan pengguna masuk, meningkatkan performa dan pengalaman pengguna - pengguna mengunjungi halaman web dan sudah masuk. Karena prompt=none dalam iframe tidak lagi menjadi pilihan ketika cookie pihak ketiga diblokir, aplikasi harus mengunjungi halaman login dalam bingkai tingkat atas untuk mengeluarkan kode otorisasi.

Ada dua cara untuk menyelesaikan proses masuk:

Pengalihan halaman penuh
- Pada beban pertama SPA, alihkan pengguna ke halaman masuk jika tidak ada sesi (atau jika sesi kedaluwarsa). Browser pengguna akan mengunjungi halaman login, menyajikan cookie yang berisi sesi pengguna, dan kemudian mengarahkan kembali ke aplikasi dengan kode dan token dalam fragmen.
- Pengalihan memang mengakibatkan SPA dimuat dua kali. Ikuti praktik terbaik untuk penembolokan SPA sehingga aplikasi tidak diunduh secara penuh dua kali.
- Pertimbangkan untuk memiliki urutan pramuat di aplikasi yang memeriksa sesi log masuk dan mengalihkan ke halaman log masuk sebelum aplikasi sepenuhnya membongkar dan menjalankan payload JavaScript.
Popup
- Jika pengalaman pengguna (UX) terhadap pengalihan halaman penuh tidak berfungsi untuk aplikasi, pertimbangkan untuk menggunakan popup untuk menangani autentikasi.
- Ketika popup selesai dialihkan ke aplikasi setelah autentikasi, kode di handler pengalihan akan menyimpan kode dan token di penyimpanan lokal untuk digunakan aplikasi. MSAL.js mendukung popup untuk autentikasi, seperti halnya sebagian besar pustaka.
- Browser mengurangi dukungan untuk popup, sehingga mungkin bukan opsi yang paling dapat diandalkan. Interaksi pengguna dengan SPA sebelum membuat popup mungkin diperlukan untuk memenuhi persyaratan browser.
  Apple menjelaskan metode popup sebagai perbaikan kompatibilitas sementara untuk memberi akses jendela asli ke cookie pihak ketiga. Meskipun Apple dapat menghapus transfer izin ini di masa depan, itu tidak akan berdampak pada panduan di sini.
  Di sini, popup digunakan sebagai navigasi pihak pertama ke halaman login sehingga sesi ditemukan dan kode auth dapat disediakan. Ini harus terus bekerja ke masa depan.

Menggunakan iframe

Pola umum di aplikasi web adalah menggunakan iframe untuk menyematkan satu aplikasi di dalam aplikasi lain: bingkai tingkat atas yang menangani autentikasi pengguna dan aplikasi yang dihosting di iframe dapat mempercayai bahwa pengguna telah masuk, mengambil token secara diam-diam menggunakan alur implisit.

Akuisisi token senyap tidak lagi berfungsi ketika cookie pihak ketiga diblokir - aplikasi yang disematkan di iframe harus beralih menggunakan popup untuk mengakses sesi pengguna karena tidak dapat bernavigasi ke halaman login.

Anda dapat mencapai akses menyeluruh antara aplikasi iframe dan aplikasi induk dengan akses API skrip JavaScript asal yang sama dan lintas asal dengan meneruskan petunjuk pengguna (akun) dari aplikasi induk ke aplikasi iframe. Untuk informasi selengkapnya, lihat Menggunakan MSAL.js di aplikasi iframed di repositori MSAL.js di GitHub.

Pelajari lebih lanjut tentang implikasi keamanan token refresh di browser

Menerbitkan token refresh ke browser dianggap sebagai masalah keamanan. Serangan skrip lintas situs (XSS) atau paket JS yang disusupi dapat mencuri token refresh dan menggunakannya dari jarak jauh sampai kedaluwarsa atau dicabut. Untuk meminimalkan risiko token refresh yang dicuri, SPAs akan diberi token yang berlaku hanya selama 24 jam. Setelah 24 jam, aplikasi harus memperoleh kode otorisasi baru melalui kunjungan bingkai tingkat atas ke halaman log masuk.

Pola token refresh seumur hidup terbatas ini dipilih sebagai keseimbangan antara keamanan dan UX yang terdegradasi. Tanpa token refresh atau cookie pihak ketiga, alur kode otorisasi (seperti yang direkomendasikan oleh draf praktik terbaik saat ini keamanan OAuth)menjadi berat ketika token baru atau tambahan diperlukan. Pengalihan halaman penuh atau popup diperlukan untuk setiap token, setiap kali token kedaluwarsa (biasanya setiap jam, untuk token platform identitas Microsoft).