CSP ve nonce
CSP başlıkları ve script nonce ile inline script çalışmasını sınırlarsın.
CSP temelleri
Content Security Policy (CSP) tarayıcıya hangi kaynaklardan script çalışabileceğini söyler. script-src 'self' yalnızca aynı kaynaktan scriptlere izin verir; inline scriptleri engeller.
Bu ders CSP'yi bir meta etiketi ile sayfaya ekleyeceğiz. Meta etiketi http-equiv özniteliği ile HTTP başlığı gibi davranır.
Inline script gerekiyorsa her scripte benzersiz bir nonce değeri koyar ve CSP'de 'nonce-...' ile izin veririz.
CSP meta etiketi
CSP'yi HTML meta etiketi ile sayfaya ekleyebiliriz. Etiket document.createElement("meta") ile oluşturulur, setAttribute ile öznitelikleri ayarlanır ve document.head.appendChild ile head bölümüne eklenir.
http-equiv özniteliği Content-Security-Policy olarak ayarlanır; content özniteliği ise izin verilen kaynakları listeleyen direktifleri içerir.
Örnek content: default-src 'self'; script-src 'self' 'nonce-abc123' — bu satır varsayılan olarak aynı kaynağa izin verir ve script için nonce şart koşar.
Uygulama CSP meta etiketi ekle
Bir CSP meta etiketi oluştur: document.createElement("meta") ile. setAttribute("http-equiv", "Content-Security-Policy") ve setAttribute("content", "default-src 'self'; script-src 'self' 'nonce-abc123'") ile öznitelikleri ayarla. Sonra document.head.appendChild(cspMeta) ile head'e ekle.
Örnek çözümü göster
const cspMeta = document.createElement("meta");
cspMeta.setAttribute("http-equiv", "Content-Security-Policy");
cspMeta.setAttribute("content", "default-src 'self'; script-src 'self' 'nonce-abc123'");
document.head.appendChild(cspMeta);Kendini test et
-
script-src 'self' ne yapar?
script-src 'self'- Tüm scriptleri engeller
- Yalnızca aynı kaynaktan scriptlere izin verir
- Sadece inline scriptlere izin verir
- Dış scriptleri izin verir
Cevabı göster
Yalnızca aynı kaynaktan scriptlere izin verir — Doğru! 'self' yalnızca aynı kaynaktan scriptlere izin verir.
-
Nonce değerini ekle
script.src = '...'; script.nonce = '____';Cevabı göster
script.src = '...'; script.nonce = 'abc123'; -
CSP direktiflerini eşleştir
- script-src
- Script kaynakları
- default-src
- Varsayılan kaynak
- nonce
- Tek kullanımlık değer
- self
- Aynı kaynak