XSS (Cross-Site Scripting) nedir? React kullanırken XSS'e hâlâ açık olabilir misiniz?

XSS, saldırganın kontrol ettiği verinin sayfada kod olarak çalıştırılmasıdır. Saldırgan kullanıcının oturumunda işlem yapabilir, token çalabilir, sayfayı değiştirebilir.

Türleri

• Stored: Zararlı içerik veritabanına kaydedilir (yorum, profil adı) ve herkese gösterilir.
• Reflected: URL parametresi doğrudan sayfaya basılır.
• DOM-based: Tamamen client'ta, ör. location.hash değerinin innerHTML'e yazılması.

React neyi korur?

JSX içindeki {değer} ifadeleri otomatik olarak escape edilir; <script> metin olarak görünür. Ama şu durumlar hâlâ risklidir:

// 1. Ham HTML basmak
<div dangerouslySetInnerHTML={{ __html: comment.body }} />

// 2. javascript: URL'leri
<a href={user.website}>Site</a>   // website = "javascript:alert(document.cookie)"

// 3. DOM'a doğrudan yazmak
ref.current.innerHTML = userInput;

// 4. SSR'da state'i script içine gömmek
<script>{`window.__STATE__ = ${JSON.stringify(state)}`}</script> // "</script>" kaçışı yapılmazsa

Korunma

• Zengin metin gerekiyorsa sanitize edin: DOMPurify.sanitize(html).
• URL'leri doğrulayın: sadece http:/https: protokolüne izin verin (new URL(value).protocol).
• innerHTML yerine textContent kullanın.
• Defense in depth: Content Security Policy, Trusted Types, oturum cookie'lerinde HttpOnly.
• Bağımlılıkları denetleyin; üçüncü parti script'ler de XSS kaynağıdır.