Meydan okuma - Güvenli uygulama
XSS-korunmalı render, CSP ve input sanitization ile güvenli bir form uygulaması yazarsın.
XSS-korunmalı uygulama
Bu meydan okumada XSS-korunmalı güvenli bir form uygulaması yazacaksın. XSS, saldırganın sayfaya script enjekte etmesidir; en yaygın kaynak kullanıcı girdisidir.
Kullanıcı metnini her zaman textContent ile yaz, innerHTML ile değil. textContent etiketleri düz metin olarak gösterir; tarayıcı yorumlamaz.
Daha sıkı denetim için bir Content Security Policy (CSP) başlığı eklersin: default-src 'self' dış kaynakları ve inline script'leri engeller. Ayrıca girdiyi ekrana basmadan önce tehlikeli karakterleri escape eden bir sanitize fonksiyonu yazarsın.
Uygulama Güvenli render fonksiyonu
Bir sanitize(text) fonksiyonu yaz: &, < ve > karakterlerini karşılıklarıyla değiştirsin (önce &). Sonra renderSafe(container, text) yaz: container.textContent'e sanitize(text)'in sonucunu atasın. Son olarak bir meta etiketi ekle; http-equiv özniteliği Content-Security-Policy, content özniteliği default-src 'self' olsun.
Örnek çözümü göster
function sanitize(text) { return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); } ile başla. Sonra function renderSafe(container, text) { container.textContent = sanitize(text); } yaz. Son olarak <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> etiketini ekle.
Örnek çözüm:
function sanitize(text) {
return text
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>');
}
function renderSafe(container, text) {
container.textContent = sanitize(text);
}
const cspTag = `<meta http-equiv="Content-Security-Policy" content="default-src 'self'">`;
document.head.insertAdjacentHTML('beforeend', cspTag);Kendini test et
-
Hangisi XSS'e karşı en güvenli?
const el = document.querySelector('#out'); // dört seçenek- el.textContent = userInput
- el.innerHTML = userInput
- el.insertAdjacentHTML('beforeend', userInput)
- document.write(userInput)
Cevabı göster
el.textContent = userInput — Doğru! textContent etiketleri metin olarak yazar; tarayıcı script olarak yorumlamaz.
-
Güvenli metin ataması
const el = document.querySelector('#out'); el.____ = userInput;Cevabı göster
const el = document.querySelector('#out'); el.textContent = userInput; -
Güvenlik kavramlarını eşleştir
- textContent
- Etiket yorumlamaz
- CSP başlığı
- Kaynak kısıtı
- sanitize
- Karakter escape
- innerHTML
- Riskli yazım