Content Security Policy: nonce ve hash
Satır içi betikler için nonce, bilinen parçacıklar için hash ve üretimde ihlalleri izlemek için report-uri içeren katı bir CSP yazmayı öğrenin.
Content Security Policy: nonce ve hash, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
CSP Özeti
CSP, tarayıcının neleri yüklemesine izin verildiğini — betikleri, stilleri, görselleri, yazı tiplerini, çerçeveleri ve bağlantıları — beyaz listeye alan bir HTTP üstbilgisidir. Derinlemesine savunma sağlar: XSS filtrelerinizi aşsa bile CSP çoğu zaman yükü durdurur.
CSP Üstbilgisinin Yapısı
Her yönerge, izin verilen kaynakları listeler. 'self' aynı kaynak anlamına gelir. Belirli URL'lere de izin verilebilir.
Content-Security-Policy:
default-src 'self';
script-src 'self' https://cdn.example.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
connect-src 'self' https://api.example.com;
font-src 'self' https://fonts.gstatic.com;
frame-ancestors 'none';
base-uri 'self';Yaygın Yönergeler
default-src: her şey için geri dönüş değeri. script-src: JavaScript. style-src: CSS. img-src: görseller. connect-src: fetch/XHR/WebSocket. font-src: yazı tipleri. frame-ancestors: sizi iframe içine alabilecek kaynaklar (tıklama hırsızlığı koruması).
'unsafe-inline' — Yaygın Açık
Birçok site, satır içi <script> etiketlerine ve onclick özniteliklerine izin vermek için 'unsafe-inline' ekler. Bu, CSP'nin temel amacını boşa çıkarır — XSS yükleri satır içinde çalışabilir. Bunun yerine nonce'lar veya hash'ler kullanın.
Nonce'lar — Tek Kullanımlık İzin Listesi
Her istek için rastgele bir nonce oluşturun. Meşru satır içi betikleri bu nonce ile etiketleyin. Tarayıcı yalnızca eşleşen nonce'lara sahip betiklere izin verir.
// Server (Express middleware):
import crypto from 'crypto';
app.use((req, res, next) => {
res.locals.nonce = crypto.randomBytes(16).toString('base64');
res.setHeader('Content-Security-Policy',
`script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`
);
next();
});
// Template:
<script nonce="<%= nonce %>">window.config = {...};</script>'strict-dynamic'
Nonce'u 'strict-dynamic' ile birleştirin: güvenilir betikler (nonce'a sahip olanlar) ek betikler yükleyebilir. Her betik kaynak URL'sini listeleme gereğini ortadan kaldırır. Güncel CSP en iyi uygulaması budur.
Hash'ler — Sabit İzin Listesi
Önceden bilinen ve değişmeyen satır içi betikler için (ör. derlemeniz her zaman aynı başlangıç kodu parçasını oluşturuyorsa) SHA-256 değerini hesaplayın ve bunu bir hash kaynağı olarak ekleyin. İstek başına nonce gerekmez.
// Hash of: console.log('hi');
Content-Security-Policy: script-src 'sha256-XwCNuB+/RUgPlAACI+yHrUKqUsm4zlpGV/Q8tEUx0Q4='Satır İçi Stil Hash'leri
Aynı yöntemi satır içi <style> etiketleri için de kullanın — hash'lerini hesaplayıp style-src yönergesine ekleyin. CSS için 'unsafe-inline' kullanmaktan daha iyidir.
CSP Raporlama Modu
Bir politikayı zorunlu kılmadan sınamak için Content-Security-Policy-Report-Only kullanın. İhlaller uç noktanıza bildirilir ancak hiçbir şey engellenmez. CSP'yi aşamalı olarak kullanıma sunmak için idealdir.
Content-Security-Policy-Report-Only:
default-src 'self';
report-uri /csp-violations
// /csp-violations receives POSTs like:
{
"csp-report": {
"document-uri": "https://example.com/",
"violated-directive": "script-src 'self'",
"blocked-uri": "https://evil.com/x.js"
}
}report-to (Modern)
report-to + Reporting-Endpoints, report-uri'nin modern karşılığıdır. Aynı veriyi daha yapılandırılmış biçimde sağlar.
Reporting-Endpoints: csp="/csp-reports"
Content-Security-Policy: script-src 'self'; report-to cspÇerçeve Entegrasyonları
Next.js: CSP'yi middleware.ts veya next.config.js üstbilgileriyle ayarlayın. Nuxt: nuxt-security modülü. Vite: geliştirme sunucusu üstbilgilerini yapılandırın; üretimde Vercel veya Netlify üstbilgi yapılandırmasını kullanın.
// next.config.js
module.exports = {
async headers() {
return [{
source: '/(.*)',
headers: [{
key: 'Content-Security-Policy',
value: "default-src 'self'; script-src 'self' 'strict-dynamic'"
}]
}];
}
};CSP'yi Sınama
DevTools → Konsol'u açın: CSP ihlalleri burada günlüğe kaydedilir. Politikanızı değerlendirmek için https://csp-evaluator.withgoogle.com/ kullanın. Önce üretimde yalnızca raporlama modunu kullanın; tüm ihlalleri düzelttikten sonra zorunlu uygulamaya geçin.
Hızlı Kontrol
Bir script-src yönergesinde 'unsafe-inline' bulunması neden CSP zayıflığı olarak kabul edilir?
Özet: CSP En İyi Uygulamaları
Her kaynak türü için yönergeler içeren Content-Security-Policy üstbilgisini ayarlayın. 'unsafe-inline' kullanmaktan kaçının — nonce'lar + 'strict-dynamic' veya SHA hash'leri kullanın. frame-ancestors 'none' (veya 'self') ayarlayın. Önce yalnızca raporlama modunda sınayın. İhlalleri /csp-violations adresine gönderin (veya modern report-to kullanın). Çerçeveler, CSP'yi ara katman yazılımı veya yapılandırma üstbilgileri aracılığıyla destekler.
Sıkça Sorulan Sorular
“Content Security Policy: nonce ve hash” dersi ücretsiz mi?
Evet — “Content Security Policy: nonce ve hash” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Content Security Policy: nonce ve hash” dersinde ne öğreneceğim?
Satır içi betikler için nonce, bilinen parçacıklar için hash ve üretimde ihlalleri izlemek için report-uri içeren katı bir CSP yazmayı öğrenin. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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.
“Content Security Policy: nonce ve hash” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- XSS Önleme: Çıktı Kodlama ve CSP
- CSRF: SameSite Çerezleri ve Belirteçleri
- Content Security Policy: nonce ve hash
- Ön Uçtan OAuth Akışları