Kita perlu menyimpan JWT di komputer klien. Jika kita menyimpannya dalam LocalStorage / SessionStorage maka itu dapat dengan mudah ditangkap oleh serangan XSS. Jika kami menyimpannya dalam cookie, maka peretas dapat menggunakannya (tanpa membacanya) dalam serangan CSRF dan menyamar sebagai pengguna dan menghubungi API kami dan mengirim permintaan untuk melakukan tindakan atau mendapatkan informasi atas nama pengguna.
Tetapi ada beberapa cara untuk mengamankan JWT dalam cookie agar tidak mudah dicuri (tetapi masih ada beberapa teknik canggih untuk mencuri mereka). Tetapi jika Anda ingin mengandalkan LocalStorage / SessionStorage, maka itu dapat diakses dengan serangan XSS sederhana.
Jadi untuk mengatasi masalah CSRF, saya menggunakan Cookie Kirim Ganda dalam aplikasi saya.
Metode Kirim Cookie Ganda
Simpan JWT dalam cookie HttpOnly dan gunakan dalam mode aman untuk mentransfer melalui HTTPS.
Sebagian besar serangan CSRF memiliki header asal atau pengarah yang berbeda dengan host asli Anda dalam permintaan mereka. Jadi, periksa apakah Anda memiliki salah satu dari mereka di header, apakah mereka berasal dari domain Anda atau tidak! Jika tidak tolak mereka. Jika asal dan pengarah tidak tersedia dalam permintaan, maka tidak perlu khawatir. Anda bisa mengandalkan hasil hasil validasi header X-XSRF-TOKEN yang saya jelaskan di langkah berikutnya.
Meskipun browser akan secara otomatis menyediakan cookie Anda untuk domain permintaan, ada satu batasan berguna: kode JavaScript yang berjalan di situs web tidak dapat membaca cookie dari situs web lain. Kami dapat memanfaatkan ini untuk menciptakan solusi CSRF kami. Untuk mencegah serangan CSRF, kita harus membuat cookie Javascript tambahan yang bisa dibaca yang disebut: XSRF-TOKEN. Cookie ini harus dibuat ketika pengguna masuk dan harus berisi string acak yang tidak dapat ditebak. Kami juga menyimpan nomor ini di JWT sendiri sebagai klaim pribadi. Setiap kali aplikasi JavaScript ingin membuat permintaan, ia harus membaca token ini dan mengirimkannya dalam header HTTP khusus. Karena operasi ini (membaca cookie, mengatur header) hanya dapat dilakukan pada domain yang sama dari aplikasi JavaScript,
Angular JS membuat hidup Anda mudah
Untungnya, saya menggunakan Angular JS di platform kami dan mengemas paket pendekatan CSRF token, membuatnya lebih mudah bagi kami untuk diimplementasikan. Untuk setiap permintaan yang dibuat aplikasi Angular kami dari server, $http
layanan Angular akan melakukan hal-hal ini secara otomatis:
- Cari cookie bernama XSRF-TOKEN di domain saat ini.
- Jika cookie itu ditemukan, itu membaca nilai dan menambahkannya ke permintaan sebagai header X-XSRF-TOKEN.
Dengan demikian implementasi sisi klien ditangani untuk Anda, secara otomatis! Kami hanya perlu mengatur cookie yang dinamai XSRF-TOKEN
pada domain saat ini di sisi server dan ketika API kami mendapat panggilan dari klien, ia harus memeriksa X-XSRF-TOKEN
header dan membandingkannya dengan XSRF-TOKEN
di JWT. Jika mereka cocok, maka pengguna itu nyata. Kalau tidak, itu permintaan palsu dan Anda bisa mengabaikannya. Metode ini terinspirasi oleh metode "Kirim Cookie Ganda".
Peringatan
Pada kenyataannya, Anda masih rentan terhadap XSS, hanya saja penyerang tidak dapat mencuri token JWT Anda untuk digunakan nanti, tetapi dia masih bisa membuat permintaan atas nama pengguna Anda menggunakan XSS.
Apakah Anda menyimpan JWT Anda di localStorage
atau Anda menyimpan token XSRF Anda di bukan HttpOnly cookie, keduanya dapat diambil dengan mudah oleh XSS. Bahkan JWT Anda dalam cookie HttpOnly dapat diambil dengan serangan XSS canggih seperti metode XST .
Jadi selain metode Cookie Kirim Ganda, Anda harus selalu mengikuti praktik terbaik terhadap XSS termasuk melarikan diri konten. Ini berarti menghapus kode yang dapat dieksekusi yang akan menyebabkan browser melakukan sesuatu yang tidak Anda inginkan. Biasanya ini berarti menghapus // <![CDATA[
tag dan atribut HTML yang menyebabkan JavaScript dievaluasi.
Baca lebih lanjut di sini: