Axios Post Csrf Token Laravel

4 min read Jul 01, 2024

Menerapkan Token CSRF pada Axios POST Request di Laravel

Laravel menyediakan perlindungan CSRF (Cross-Site Request Forgery) untuk mencegah serangan berbahaya. Token CSRF adalah token unik yang dihasilkan oleh server dan digunakan untuk memverifikasi bahwa permintaan yang dikirimkan ke server berasal dari halaman web yang valid. Pada artikel ini, kita akan mempelajari cara mengimplementasikan token CSRF saat mengirim permintaan POST menggunakan Axios di aplikasi Laravel.

1. Memahami CSRF

Serangan CSRF terjadi ketika penyerang mengeksploitasi kepercayaan pengguna terhadap aplikasi web tertentu. Penyerang dapat memaksa pengguna yang telah login untuk mengirimkan permintaan yang tidak diinginkan ke aplikasi web, tanpa sepengetahuan pengguna.

2. Membangkitkan Token CSRF di Laravel

Laravel secara otomatis menyertakan token CSRF dalam setiap formulir HTML. Token ini dapat diakses melalui meta tag <meta name="csrf-token" content="{{ csrf_token() }}"> dalam layout aplikasi Anda.

3. Mengatur Axios untuk Mengirim Token CSRF

Berikut adalah cara untuk mengkonfigurasi Axios agar mengirim token CSRF dengan setiap permintaan POST:

import axios from 'axios';

// Set up Axios dengan token CSRF
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;

// Kirim permintaan POST
axios.post('/your-api-endpoint', {
  // Data permintaan
})
.then(response => {
  // Handle response
})
.catch(error => {
  // Handle error
});

Penjelasan:

axios.defaults.headers.common['X-CSRF-TOKEN']: Menambahkan header X-CSRF-TOKEN ke setiap permintaan yang dibuat oleh Axios.
document.querySelector('meta[name="csrf-token"]').content: Mengambil nilai token CSRF dari meta tag <meta name="csrf-token" ...>.

4. Menangani Token CSRF di Server (Laravel)

Di sisi server (Laravel), Anda harus memvalidasi token CSRF yang dikirimkan oleh klien. Laravel secara otomatis akan memvalidasi token CSRF untuk setiap permintaan POST. Jika token tidak valid, Laravel akan mengembalikan kesalahan 403 (Forbidden).

5. Contoh Kasus

Berikut contoh sederhana untuk menunjukkan bagaimana mengirim permintaan POST menggunakan Axios dan token CSRF:

// HTML Form

  
  


// JavaScript with Axios

Kesimpulan

Dengan mengimplementasikan token CSRF dengan benar, Anda dapat melindungi aplikasi Laravel Anda dari serangan CSRF. Pastikan untuk mengonfigurasi Axios dengan benar untuk menyertakan token CSRF dalam setiap permintaan POST dan memvalidasi token di sisi server.