0Pricing
Vue Academy · Pelajaran

Perlindungan CSRF di SPA Vue

Cookie SameSite, token CSRF dalam Axios, serta pola double-submit cookie.

Perlindungan CSRF di SPA Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Apa Itu CSRF

Pemalsuan Permintaan Lintas Situs mengelabui peramban pengguna yang telah masuk agar membuat permintaan yang tidak diinginkan dan mengubah keadaan ke situs Anda, dengan menggunakan kuki yang dikirim peramban secara otomatis. Penyerang tidak dapat membaca respons, tetapi dapat menyebabkan efek samping seperti transfer atau penghapusan.

Mengapa Kuki Memungkinkannya

Jika autentikasi bergantung pada kuki sesi, peramban melampirkannya ke setiap permintaan ke domain Anda—termasuk permintaan yang dipicu dari situs berbahaya. Tanpa pertahanan tambahan, server tidak dapat membedakan permintaan palsu dari permintaan yang sah.

Atribut Kuki SameSite

Menetapkan SameSite pada kuki memberi tahu peramban kapan kuki tersebut harus dikirim lintas situs. SameSite=Strict menahan kuki pada setiap permintaan lintas situs, sehingga secara langsung memblokir sebagian besar CSRF.

Set-Cookie: session=...; SameSite=Strict; Secure; HttpOnly

Strict dibandingkan Lax

Strict paling aman, tetapi dapat membuat pengguna keluar saat mereka datang melalui tautan eksternal. Lax hanya mengirim kuki pada navigasi GET tingkat teratas, yang merupakan keseimbangan umum.

Pola Token Sinkronisasi

Pertahanan berlapis menambahkan token CSRF yang tidak dapat diketahui penyerang. Server menerbitkan token; klien harus mengirimkannya kembali pada permintaan yang mengubah keadaan.

Kuki Pengiriman Ganda

Pendekatan umum untuk SPA: server menetapkan token CSRF dalam kuki yang dapat dibaca (bukan HttpOnly). Klien membacanya dan mengirimkannya kembali dalam header. Server memverifikasi bahwa keduanya cocok.

Set-Cookie: XSRF-TOKEN=abc123; SameSite=Strict; Secure

Membaca Token dari Kuki

Bacalah nilai kuki CSRF dengan pembantu kecil di aplikasi Vue Anda.

function getCookie(name) {
  const match = document.cookie.match(
    new RegExp("(^| )" + name + "=([^;]+)")
  );
  return match ? decodeURIComponent(match[2]) : null;
}
const token = getCookie("XSRF-TOKEN");

Menetapkan Header pada Permintaan

Kirim token dalam header khusus seperti X-CSRF-Token pada setiap permintaan yang mengubah keadaan (POST, PUT, PATCH, DELETE).

await fetch("/api/transfer", {
  method: "POST",
  headers: { "X-CSRF-Token": token },
  body: JSON.stringify(payload)
});

Header Bawaan Axios

Dengan Axios, Anda menetapkan header tersebut sekali sebagai nilai bawaan agar setiap permintaan menyertakannya secara otomatis.

import axios from "axios";

axios.defaults.headers.common["X-CSRF-Token"] = getCookie("XSRF-TOKEN");

Dukungan xsrf Bawaan Axios

Axios dapat melakukan ini secara otomatis: konfigurasikan nama kuki dan header, lalu Axios akan membaca kuki dan menetapkan header untuk Anda.

const api = axios.create({
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName: "X-CSRF-Token",
  withCredentials: true
});

Mengapa Header Khusus Membantu

Peramban memblokir situs lintas asal agar tidak menetapkan header khusus tanpa prapemeriksaan CORS. Dengan mewajibkan X-CSRF-Token, permintaan lintas situs palsu tidak dapat menyertakannya sehingga server menolaknya.

Pemeriksaan Singkat

Atribut kuki mana yang paling langsung mengurangi CSRF dengan sendirinya?

Ringkasan

CSRF menyalahgunakan kuki yang dikirim otomatis untuk memalsukan permintaan yang mengubah keadaan. Tetapkan SameSite=Strict pada kuki autentikasi sebagai pertahanan utama, lalu tambahkan token CSRF: baca token tersebut dari kuki dan kirimkan pada setiap permintaan perubahan melalui header X-CSRF-Token, yang dikonfigurasi sekali sebagai nilai bawaan Axios atau melalui opsi xsrf bawaan Axios.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Perlindungan CSRF di SPA Vue” gratis?

Ya — teks lengkap “Perlindungan CSRF di SPA Vue” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Perlindungan CSRF di SPA Vue”?

Cookie SameSite, token CSRF dalam Axios, serta pola double-submit cookie. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Perlindungan CSRF di SPA Vue” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Pencegahan XSS di Vue
  2. Content Security Policy (CSP) dengan Vue
  3. Perlindungan CSRF di SPA Vue
  4. Pola Autentikasi Aman
← Kembali ke Vue Academy