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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); } 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, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

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

Sıradaki ders: Uzman bölüm sınavı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler