Web Programlama Eğitimi: CSP strict-dynamic ile XSS Savunması

Web Programlama Eğitimi ile nonce tabanlı CSP tasarımı

CSP'yi sadece script-src 'self' olarak kurmak, aynı origin altında barınan ele geçirilmiş bir dosyanın veya JSONP benzeri eski bir endpoint'in script olarak yüklenmesini engellemez. Uygulama katmanında her HTML yanıtı için kriptografik olarak rastgele nonce üretin, yalnızca o yanıttaki başlangıç script etiketine verin ve strict-dynamic ile bu scriptin güvenle eklediği bağımlılıkları yetkilendirin. Nonce tekrar kullanılmamalıdır: CDN'nin HTML yanıtını herkese açık cache'lemesi aynı nonce'u birden fazla kullanıcıya dağıtır ve saldırganın nonce'u başka bir yanıtta kullanabilmesine yol açar.

import crypto from 'node:crypto';

app.use((req, res, next) => {
  const nonce = crypto.randomBytes(16).toString('base64');
  res.locals.cspNonce = nonce;

  res.setHeader(
    'Content-Security-Policy',
    [
      "default-src 'self'",
      `script-src 'nonce-${nonce}' 'strict-dynamic' https:`,
      "object-src 'none'",
      "base-uri 'none'",
      "frame-ancestors 'none'"
    ].join('; ')
  );
  next();
});

// SSR template
// <script nonce="${res.locals.cspNonce}" src="/assets/app.js" defer></script>

Bu yapıdaki https: kaynağı, strict-dynamic destekleyen tarayıcılarda nonce taşıyan script bulunduğunda kaynak listesi yerine güven zinciri uygulanacağı için asıl yetkilendirme mekanizması değildir; eski istemciler için kontrollü geri dönüş görevi görür. Geri dönüş listesini https: kadar geniş bırakmak yerine gerçekten kullanılan origin'lerle sınırlayın: örneğin https://cdn.example.net. Chrome DevTools Network panelinde HTML yanıtının Content-Security-Policy başlığını doğrulayın; ardından Console'a nonce'suz document.body.append(document.createElement('script')) deneyip bloklama olayını gözlemleyin.

JavaScript eğitimi kapsamında Trusted Types ile DOM XSS kapatmak

CSP, izinli bir uygulama scriptindeki element.innerHTML = apiValue atamasını tek başına durdurmaz. Trusted Types, Chromium tabanlı tarayıcılarda script çalıştırabilen DOM sink'lerine string atanmasını reddeder; uygulamanın açıkça ürettiği TrustedHTML nesnesini zorunlu kılar. Bu nedenle CSP'ye require-trusted-types-for 'script' eklemek, gözden kaçan innerHTML, insertAdjacentHTML ve bazı URL sink'lerini çalışma anında görünür hataya çevirir.

import DOMPurify from 'dompurify';

const htmlPolicy = trustedTypes.createPolicy('app-html', {
  createHTML(untrusted) {
    return DOMPurify.sanitize(untrusted, {
      USE_PROFILES: { html: true },
      RETURN_TRUSTED_TYPE: false
    });
  }
});

export function renderComment(node, rawComment) {
  node.innerHTML = htmlPolicy.createHTML(rawComment);
}

Buradaki ince nokta, DOMPurify'nin RETURN_TRUSTED_TYPE: true seçeneğini policy içinde kullanmamaktır. createPolicy(...).createHTML callback'i string üretmelidir; Trusted Types API bunun sonucunu TrustedHTML olarak sarar. Politika adını rastgele seçmeyin ve CSP'ye trusted-types app-html ekleyerek başka scriptlerin yeni politika oluşturmasını sınırlandırın. Geçişte önce Content-Security-Policy-Report-Only ile require-trusted-types-for 'script' yayınlayın; tarayıcı konsol hatalarını ve rapor endpoint'ini sınıflandırmadan enforce moduna geçmek, eski WYSIWYG editörleri üretimde kırabilir.

ReactJS eğitimi, Angular eğitimi ve VueJS eğitimi için CSP farkları

ReactJS eğitimi sırasında dangerouslySetInnerHTML kullanımını Trusted Types policy'sinin arkasına alın; React bunu sizin yerinize sanitize etmez. SSR yapıyorsanız nonce'u request context ile kök render'a taşıyın ve framework'ün ürettiği bootstrap scriptlerine aynı nonce'u verin. Sadece HTML şablonundaki ilk script etiketine nonce koymak yeterli değildir: hydration verisini taşıyan inline script veya framework runtime'ın eklediği inline parça nonce taşımıyorsa CSP tarafından engellenir.

// React SSR girişinde request bazlı nonce aktarımı
const app = renderToString(
  <NonceContext.Provider value={res.locals.cspNonce}>
    <App />
  </NonceContext.Provider>
);

res.send(`<div id="root">${app}</div>
<script nonce="${res.locals.cspNonce}" src="/assets/client.js" defer></script>`);

Angular eğitimi içeriğinde Angular'ın runtime tarafından eklediği stil etiketleri için kök elemana nonce aktarımını test edin: <app-root ngCspNonce="...">. AngularJS eğitimi ise ayrı bir risk taşır: AngularJS 1.x uygulamalarında ng-csp direktifi expression değerlendirmesindeki eval tabanlı optimizasyonu kapatır; bunu ekledikten sonra kritik ekranlarda render maliyetini Chrome Performance paneliyle karşılaştırın. VueJS eğitimi tarafında runtime template compiler, template'i çalışma anında derlediğinde new Function gerektirebilir. CSP'de 'unsafe-eval' açmak yerine SFC template'lerini build aşamasında derleyin ve runtime-only dağıtım kullanın.

Bir frontend framework karşılaştırması yaparken CSP uyumluluğunu sadece bundle boyutuyla değerlendirmeyin. CI aşamasında her framework için Playwright ile CSP enforce başlığı altında rota açın, Console'daki CSP ihlallerini test hatasına çevirin. React Native eğitimi kapsamındaki native bundle'a tarayıcı CSP'si uygulanmaz; ancak React Native WebView içinde uzaktan yüklenen bir sayfa varsa o sayfanın HTTP CSP başlığı yine değerlendirilir. Bu ayrım, mobil uygulamadaki WebView ile web istemcisini aynı tehdit modeli sanma hatasını önler.

CSP ihlallerini raporlama, test etme ve kontrollü enforce geçişi

CSP politikasını ilk gün bloklayıcı modda açmayın. Önce rapor modunda gerçek kullanıcı trafiğinden ihlal örnekleri toplayın. script-src, style-src ve connect-src için hangi kaynakların gerektiğini raporlardan çıkarın; ancak raporda görülen her domain'i allowlist'e eklemeyin. Bir reklam etiketi veya compromised dependency'nin alan adı da rapora düşebilir. Her kaynak için sahibi, yükleyen script zinciri ve iş gereksinimini kayda alın.

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'nonce-{request-nonce}' 'strict-dynamic'; report-to csp-endpoint
Reporting-Endpoints: csp-endpoint="https://reports.example.net/csp"

# Playwright: CSP ihlali console'a düştüğünde test başarısız olsun
page.on('console', msg => {
  if (msg.type() === 'error' && msg.text().includes('Content Security Policy')) {
    throw new Error(msg.text());
  }
});
await page.goto('https://app.example.test/account');

Rapor endpoint'inde ham document-uri değerini doğrudan log arama sistemine yazmayın; URL query parametreleri erişim tokeni veya kişisel veri içerebilir. Origin, violated-directive, blocked-uri origin'i ve user-agent ailesi gibi alanları normalize edin. En az iki dağıtım döngüsünde rapor hacmini izledikten sonra aynı politikayı Content-Security-Policy başlığına taşıyın. Bu geçişte önce-sonra karşılaştırması için deploy öncesi ve sonrası 24 saatlik violated-directive sayısını, Playwright rota başarı oranını ve Sentry'deki frontend exception sayısını aynı dashboard'da izleyin; yalnızca toplam rapor sayısına bakmak, trafik değişimini ihlal değişimi sanmanıza neden olur.

Sık Sorulan Sorular

Web programlama eğitimi için CSP nonce mu hash mi kullanılmalı?

SSR ile request başına üretilen inline bootstrap verisi varsa nonce kullanın. İçeriği build sonrasında byte byte sabit kalan küçük bir inline script varsa SHA-256 hash kullanılabilir. Hash hesabına satır sonu ve boşluklar dahildir; minifier değiştiğinde hash geçersiz olur. Doğrulamak için build çıktısındaki scripti `openssl dgst -sha256 -binary | openssl base64 -A` ile hesaplayıp CSP'deki `sha256-...` değeriyle karşılaştırın.

Frontend development eğitimi projelerinde unsafe-inline neden geçici çözüm olmamalı?

`script-src 'unsafe-inline'`, saldırganın HTML enjeksiyonuyla eklediği inline scriptin çalışmasına izin verir ve nonce korumasını anlamsızlaştırır. Inline event handler'ları `onclick=` yerine `addEventListener` ile taşıyın. Inline stil zorunluysa script politikasından bağımsız olarak `style-src` için nonce veya hash uygulayın; script ve style ihlallerini aynı istisnayla çözmeyin.

AngularJS eğitimi uygulamasında ng-csp eklemek neden ekranı yavaşlatabilir?

AngularJS `ng-csp`, expression evaluator'ın `new Function` kullanan hızlı yolunu kapatır ve yorumlayıcı tabanlı değerlendirmeye düşebilir. Değişiklikten önce ve sonra Chrome Performance kaydında aynı kullanıcı akışını çalıştırın; Angular digest sırasında oluşan scripting sürelerini karşılaştırın. Kritik liste ekranlarında `track by` kullanmak ve watcher sayısını Batarang benzeri eski araçlara güvenmek yerine AngularJS scope enstrümantasyonu veya Performance trace ile ölçmek daha güvenilirdir.

ReactJS eğitimi projesinde Trusted Types DOMPurify yerine tek başına yeterli mi?

Hayır. Trusted Types sink'e string akışını engeller, fakat policy içindeki sanitizer seçimi ve konfigürasyonu hala sizin sorumluluğunuzdadır. DOMPurify ile izin verilen etiket ve attribute listesini daraltın, ayrıca XSS test payload'larını Playwright testine ekleyin. `javascript:` URL, SVG event attribute'ları ve `srcdoc` gibi ayrı sink'ler için test yazmadan sadece `innerHTML` sonucuna bakmak eksik kapsama üretir.