React'te XSS: dangerouslySetInnerHTML ve Üçüncü Taraf Betikleri

React, JSX aracılığıyla oluşturulan tüm değerleri DOM'a eklemeden önce otomatik olarak HTML olarak yorumlanamayacak şekilde dönüştürür. JSX içinde {userInput} yazdığınızda React, textContent atamasına eşdeğer bir işlem gerçekleştirir; değer HTML olarak değil, yalnızca metin olarak ele alınır. Bu, React uygulamalarındaki XSS saldırılarının çoğunu varsayılan olarak önler.

dangerouslySetInnerHTML={{ __html: htmlString }}, otomatik kaçış işlemine izin vermeyen React özelliğidir. Bu adın özellikle endişe verici olması, HTML dizesinin güvenliğinden sizin sorumlu olduğunuzu belirtmek içindir. React, innerHTML özelliğini doğrudan ayarlar ve betikler ile olay işleyicileri de dâhil olmak üzere her türlü HTML'yi çalıştırır.

Zengin metin düzenleyicisinden (TipTap veya Quill gibi), HTML depolayan bir CMS'den ya da Markdown'ı HTML'ye dönüştüren bir dönüştürücüden gelen HTML'yi oluştururken gerçekten dangerouslySetInnerHTML kullanmanız gerekir. Bu kaynaklar, kaçış uygulanmış metin olarak değil HTML olarak oluşturulması gereken gerçek HTML işaretlemeleri üretir.

HTML dizesi <script>stealCookies()</script> veya <img src=x onerror="stealData()"> içeriyorsa, bu dizeyi innerHTML olarak ayarlamak saldırganın kodunu çalıştırır. Arındırma uygulanmadan doğrudan dangerouslySetInnerHTML özelliğine aktarılan kullanıcı kaynaklı tüm içerikler kritik bir XSS güvenlik açığı oluşturur.

DOMPurify, tarayıcılar için sektör standardı HTML arındırıcısıdır. HTML dizesini yalıtılmış bir bağlamda ayrıştırır, tehlikeli öğeleri ve öznitelikleri (betik etiketleri, olay işleyicileri, javascript: URL'leri) kaldırır ve güvenli bir HTML dizesi döndürür. Kullanım: DOMPurify.sanitize(dirtyHtml) sonucunu dangerouslySetInnerHTML özelliğine aktarmadan önce kullanın.

Üçüncü taraf betikleri (analiz araçları, sohbet bileşenleri ve reklam ağları) uygulamanızın JavaScript koduyla aynı izinlerle çalışır. Ele geçirilmiş veya kötü amaçlı bir üçüncü taraf betiği document.cookie değerini okuyabilir, localStorage erişebilir, form girdilerini okuyabilir ve dış sunuculara istek gönderebilir; üstelik kullanıcı bunu fark etmez.

İçerik Güvenlik Politikası, hangi betiklerin çalışmasına izin verildiğini belirten bir HTTP üst bilgisidir. DOM'a bir XSS yükü enjekte edilse bile, uygun şekilde yapılandırılmış bir CSP satır içi betikleri kısıtlayıp yalnızca izin verilen betik kaynaklarına izin vererek bunların çalışmasını engelleyebilir. CSP, girdi arındırmadan sonraki ikinci savunma hattıdır.

npm paketleri gerçek bir XSS saldırı vektörüdür. Bir bağımlılık, ortam değişkenlerini veya kullanıcı verilerini dışarı aktaran kötü amaçlı kod içerebilir. 2022'deki node-ipc olayı ve 2021'deki ua-parser-js ele geçirilmesi, yaygın olarak kullanılan paketlerin ele geçirilip zararlı kodla değiştirilebileceğini gösterdi. Bağımlılıkları npm audit ile denetleyin ve kilit dosyaları kullanın.

Başarılı bir XSS saldırısı, saldırganın kullanıcının sessionStorage JWT belirtecini çalmasını (belirteci saldırganın kontrolündeki bir sunucuya göndermesini), kimliği doğrulanmış kullanıcı olarak işlem yapmasını (kullanıcının oturumunu kullanarak API çağrıları gerçekleştirmesini), kimlik avı içeriği göstermek için DOM'u değiştirmesini veya kullanıcının uygulamada bastığı her tuşu kaydetmesini sağlar.

Trusted Types tarayıcı API'si, tüm DOM veri aktarım noktalarının (innerHTML, eval, script.src) ham dizeler yerine özel türde nesneler almasını zorunlu kılar. Bu, dize tabanlı XSS yüklerinin platform düzeyinde DOM'a ulaşmasını önler. React, Trusted Types uyumluluğu üzerinde çalışmaktadır ve CSP bunu zorunlu kılabilir.

CMS HTML'sini oluşturmak için güvenli yaklaşım şöyledir: HTML'yi alın, güvenli etiket ve özniteliklerden oluşan bir izin verilenler listesiyle DOMPurify.sanitize() üzerinden geçirin, ardından dangerouslySetInnerHTML={{ __html: cleanHtml }} ile oluşturun. CMS'ye güveniyor olsanız bile arındırma adımını asla atlamayın; çünkü CMS veritabanının kendisi ele geçirilebilir.

DOMPurify.sanitize(htmlString) çağrıldığında DOMPurify ne yapar?

React, JSX değerlerine otomatik olarak kaçış uygulayarak XSS saldırılarının çoğunu önler. dangerouslySetInnerHTML, meşru HTML oluşturma işlemleri için bu korumayı devre dışı bırakır; girdiyi önce daima DOMPurify ile arındırın. Üçüncü taraf betikleri ve ele geçirilmiş npm paketleri, tedarik zinciri kaynaklı XSS vektörleridir. İçerik Güvenlik Politikası ikinci bir savunma katmanı sağlar. Başarılı bir XSS saldırısı belirteç hırsızlığına, başka birinin kimliğine bürünmeye ve kimlik avına olanak tanır.