0Pricing
Vue Academy · Ders

Vue SPA'lerinde CSRF Koruması

SameSite çerezleri, Axios'ta CSRF belirteçleri ve çift gönderimli çerez kalıbı.

Vue SPA'lerinde CSRF Koruması, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

CSRF Nedir

Siteler Arası İstek Sahteciliği, oturum açmış bir kullanıcının tarayıcısını, tarayıcının otomatik olarak gönderdiği çerezleri kullanarak sitenize istenmeyen ve durumu değiştiren bir istek göndermeye kandırır. Saldırgan yanıtları okuyamaz, ancak aktarım veya silme gibi yan etkilere neden olabilir.

Çerezler Bunu Neden Mümkün Kılar

Kimlik doğrulama bir oturum çerezine dayanıyorsa tarayıcı, kötü amaçlı bir siteden tetiklenenler de dahil olmak üzere alanınıza gönderilen her isteğe bu çerezi ekler. Ek bir savunma olmadan sunucu, sahte bir isteği meşru bir istekten ayırt edemez.

SameSite Çerez Özniteliği

Çerezde SameSite ayarlamak, tarayıcıya bu çerezi siteler arası ne zaman göndereceğini bildirir. SameSite=Strict, siteler arası herhangi bir istekte çerezi göndermez ve çoğu CSRF saldırısını doğrudan engeller.

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

Strict ve Lax Karşılaştırması

Strict en güvenli seçenektir, ancak harici bağlantılardan gelen kullanıcıların oturumunun kapanmasına neden olabilir. Lax çerezi yalnızca üst düzey GET gezinmelerinde gönderir ve yaygın bir denge sağlar.

Senkronlaştırıcı Belirteç Kalıbı

Derinlemesine savunma, saldırganın bilemeyeceği bir CSRF belirteci ekler. Sunucu bir belirteç verir; istemci, durumu değiştiren isteklerde bu belirteci geri göndermelidir.

Çifte Gönderim Çerezi

Yaygın bir SPA yaklaşımı şöyledir: sunucu, CSRF belirtecini okunabilir (HttpOnly olmayan) bir çerezde ayarlar. İstemci bunu okur ve bir üst bilgide yeniden gönderir. Sunucu, ikisinin eşleştiğini doğrular.

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

Belirteci Çerezden Okuma

CSRF çerezi değerini Vue uygulamanızdaki küçük bir yardımcıyla okuyun.

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

İsteklerde Üst Bilgiyi Ayarlama

Belirteci, durumu değiştiren her istekte (POST, PUT, PATCH, DELETE) X-CSRF-Token gibi özel bir üst bilgide gönderin.

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

Axios Varsayılan Üst Bilgileri

Axios ile üst bilgiyi bir kez varsayılan olarak ayarlayabilirsiniz; böylece her istek bu üst bilgiyi otomatik olarak içerir.

import axios from "axios";

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

Axios'un Yerleşik xsrf Desteği

Axios bunu otomatik olarak da yapabilir: çerez ve üst bilgi adlarını yapılandırdığınızda çerezi okur ve üst bilgiyi sizin için ayarlar.

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

Özel Üst Bilgi Neden Yardımcı Olur

Tarayıcılar, CORS ön denetimi geçilmeden siteler arası kaynakların özel üst bilgiler ayarlamasını engeller. X-CSRF-Token zorunlu tutulduğunda sahte bir siteler arası istek bunu içeremez ve sunucu isteği reddeder.

Hızlı Kontrol

Tek başına CSRF'yi en doğrudan azaltan çerez özniteliği hangisidir?

Özet

CSRF, durumu değiştiren istekleri sahtelemek için otomatik gönderilen çerezleri kötüye kullanır. Birincil savunma olarak kimlik doğrulama çerezlerinde SameSite=Strict ayarlayın ve bir CSRF belirteci ekleyin: belirteci çerezden okuyup her değişiklik isteğinde X-CSRF-Token üst bilgisiyle gönderin; bunu bir Axios varsayılanı olarak veya Axios'un yerleşik xsrf seçenekleri aracılığıyla bir kez yapılandırın.

Sıkça Sorulan Sorular

“Vue SPA'lerinde CSRF Koruması” dersi ücretsiz mi?

Evet — “Vue SPA'lerinde CSRF Koruması” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Vue SPA'lerinde CSRF Koruması” dersinde ne öğreneceğim?

SameSite çerezleri, Axios'ta CSRF belirteçleri ve çift gönderimli çerez kalıbı. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Vue SPA'lerinde CSRF Koruması” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Vue'da XSS Önleme
  2. Vue ile İçerik Güvenlik Politikası (CSP)
  3. Vue SPA'lerinde CSRF Koruması
  4. Güvenli Kimlik Doğrulama Kalıpları
← Vue Academy Sayfasına Dön