0Pricing
Vue Academy · Ders

Vue'da XSS Önleme

Vue'nun otomatik kaçışlama özelliği, v-html tehlikeleri, temizleme için DOMPurify ve güvenilir türler.

Vue'da XSS Önleme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. 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.

XSS Nedir

Siteler Arası Betik Çalıştırma (XSS), kötü amaçlı bir betiğin bir sayfaya enjekte edilerek başka bir kullanıcının tarayıcısında çalıştırıldığı bir saldırıdır. Çerezleri, belirteçleri ve verileri çalabilir. Vue sizi varsayılan olarak korur, ancak bazı kalıplar bu açığı yeniden oluşturabilir.

Vue Enterpolasyonu Otomatik Olarak Kaçar

Mustache enterpolasyonunun {{ }} içindeki metin otomatik olarak HTML'den kaçar. Etiketler içeren bir kullanıcı dizesi çalıştırılmaz, zararsız metin olarak işlenir.

<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->

Öznitelik Bağlama da Güvenlidir

v-bind / :attr ile bağlama da değerlerden kaçar; böylece enjekte edilen tırnaklar bir öznitelikten çıkıp işleyiciler enjekte edemez.

<div :title="userInput">Hover me</div>

v-html Tehlikesi

v-html, innerHTML değerini doğrudan ayarlar. Kaçış uygulamaz; bu nedenle betikler ve olay işleyicileri de dahil olmak üzere tüm işaretlemeler çalışan HTML olarak işlenir.

<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>

v-html Nasıl Kötüye Kullanılır

Bir betik etiketi olmasa bile saldırgan HTML'si, olay işleyicisi öznitelikleri veya img onerror yükleri üzerinden kod çalıştırabilir.

// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";

Kural: Kullanıcı Girdisinde v-html Kullanmayın

En basit kural, güvenilmeyen içeriği asla v-html değerine aktarmamaktır. Kaynak kullanıcı tarafından denetleniyorsa, kaçış uygulayan düz enterpolasyonu kullanın.

HTML İşlemeniz Gerektiğinde

Bazen gerçekten zengin HTML'yi işlemeniz gerekir (bir CMS gövdesi veya markdown çıktısı gibi). Bu durumda HTML'yi bağlamadan önce temizlemelisiniz.

DOMPurify ile Temizleme

DOMPurify, güvenli biçimlendirmeyi korurken tehlikeli etiketleri ve öznitelikleri kaldırır. Kitaplığı yükleyin ve v-html uygulamadan önce temizleme yapın.

npm install dompurify

Temizle, Sonra Bağla

Değeri bir computed içinde DOMPurify.sanitize üzerinden geçirin, ardından temizlenmiş sonucu bağlayın.

import DOMPurify from "dompurify";
import { computed } from "vue";

const safeHtml = computed(() =>
  DOMPurify.sanitize(props.rawHtml)
);
// template: <div v-html="safeHtml"></div>

İzin Verilen Etiketleri Yapılandırma

Temizleme işleminden sonra yalnızca beklediğiniz etiketlerin kalması için izin listesini kısıtlayabilirsiniz.

DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
  ALLOWED_ATTR: ["href"]
});

Güvenilmemesi Gereken Diğer Kaynaklar

URL'lere de güvenmeyin: bağlanmış bir bağlantıdaki javascript: href'i kod çalıştırabilir. href değerlerini doğrulayın veya temizleyin ve kullanıcı verilerinden hiçbir zaman dinamik <script> kaynakları oluşturmayın.

// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";

Hızlı Kontrol

Kullanıcı tarafından gönderilen HTML'yi işlemeniz gerekiyor. Güvenli yaklaşım nedir?

Özet

Vue, {{ }} enterpolasyonundan ve öznitelik bağlamalarından otomatik olarak kaçarak XSS saldırılarının çoğunu etkisiz hâle getirir. Tehlikeli istisna, ham HTML'yi işleyen v-html değeridir. Kullanıcı girdisini doğrudan buna aktarmayın; zengin HTML gerektiğinde önce DOMPurify ile temizleyin ve kullanıcı tarafından sağlanan URL'lere de güvenmeyin.

Sıkça Sorulan Sorular

“Vue'da XSS Önleme” dersi ücretsiz mi?

Evet — “Vue'da XSS Önleme” 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'da XSS Önleme” dersinde ne öğreneceğim?

Vue'nun otomatik kaçışlama özelliği, v-html tehlikeleri, temizleme için DOMPurify ve güvenilir türler. 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 1. dersidir.

“Vue'da XSS Önleme” 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