Axios Csrf Token Laravel

4 min read Jul 01, 2024

Mengatur CSRF Token dengan Axios di Laravel

CSRF (Cross-Site Request Forgery) merupakan ancaman keamanan yang memungkinkan penyerang untuk mengeksekusi tindakan tidak sah atas nama pengguna yang diautentikasi. Laravel menyediakan mekanisme perlindungan CSRF yang kuat untuk mencegah serangan ini. Di sini kita akan membahas cara mengintegrasikan token CSRF Laravel dengan Axios, sebuah library JavaScript populer untuk melakukan request HTTP.

1. Konfigurasi CSRF Token di Laravel

Pastikan Anda telah mengaktifkan middleware VerifyCsrfToken di app/Http/Kernel.php. Middleware ini bertanggung jawab untuk memeriksa token CSRF pada setiap request.
Laravel secara default akan menambahkan token CSRF ke setiap view yang Anda render. Anda dapat mengakses token ini melalui variabel global csrf_token().

2. Mengatur Axios untuk Mengirim Token CSRF

Membuat Interseptor: Buat sebuah file JavaScript (misalnya axios.js) untuk menyimpan konfigurasi Axios Anda.
Mengirim Token: Di dalam file tersebut, tambahkan kode berikut:

import axios from 'axios';

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

export default axios;

Kode ini melakukan hal berikut:

Mengimpor library Axios.
Mengatur header X-CSRF-TOKEN pada semua request Axios dengan nilai yang diperoleh dari tag meta csrf-token di view.

3. Menggunakan Axios dengan Token CSRF

Sekarang, Anda dapat menggunakan Axios untuk melakukan request HTTP seperti biasa. Token CSRF akan secara otomatis disertakan pada setiap request.

import axios from './axios';

axios.post('/your-endpoint', { data: 'some data' })
  .then(response => {
    // Proses respons
  })
  .catch(error => {
    // Tangani error
  });

Contoh Implementasi

Berikut adalah contoh implementasi lengkap:

File axios.js:

import axios from 'axios';

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

export default axios;

File JavaScript lain:

import axios from './axios';

// Kirim request POST ke endpoint '/your-endpoint'
axios.post('/your-endpoint', { data: 'some data' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

View Laravel (misalnya index.blade.php):

Kesimpulan

Dengan mengikuti langkah-langkah ini, Anda telah mengintegrasikan token CSRF Laravel dengan Axios, sehingga melindungi aplikasi Anda dari serangan CSRF. Pastikan Anda memahami pentingnya keamanan dan selalu menguji kode Anda secara menyeluruh.