React Uygulamalarında XSS Zafiyeti ve Önleme

Pentester

Özel Üye
8 Eyl 2016
1,646
995
Merhaba, React uygulamalarında XSS güvenlik zafiyetinin önüne nasıl geçebiliriz bundan bahsedeceğim. React, Javascript ile kullanıcı arayüzleri oluşturmak için kullanılan bir kütüphanedir. Biz React’ı web uygulamalarında genellikle backend API’dan gelen verileri web arayüzünde sunmak için kullanıyoruz. Bu uygulamada da bu tarz basit bir işleyişi değerlendirip XSS zafiyeti üzerine konuşacağım. DOM XSS Saldırısı ve Önleme aslında bu konumda bahsetmiş olduğum durumun birebir aynısını yapacağız. Ancak genellikle web geliştiricilerinin gözünden bu DOM XSS zafiyeti sıklıkla kaçmaktadır. Günümüzde React gibi popüler frontend kütüphaneleri varsayılanda bu zafiyetin önüne geçse de yerine göre maruz kalabiliyoruz şimdi bunu örnekleyeceğim.

dkyofb2.png


Ekranda gördüğünüz gibi bir backend adresinde JSON olarak veri bize sunuluyor bizde bu verideki “text” metnini uygulamamızda kullanalım.

ax9srij.png


Yazdığımız kodu inceleyelim. Bir adet App componentimiz var. Text adında bir state tanımım var başlangıçta da boş bir obje alıyor. State nedir dersek de componentimizin durumunu kontrol ettiğimiz yapılar diyebiliriz kısacası. Şimdi useEffect hook’u ile component lifecycle’da componentimin ilk yüklendiği anı kontrol ederek axios ile ilgili backend adresine get isteği yaparak json datasını alıyorum. setText ile de datayı text state değerimin içerisine aktarıyorum. Daha sonra text adlı state’in içindeki text değerini ekrana yazdırıyorum.

ltyzvuu.png


Sonuç olarak web sayfamda bu görüntüyü elde ediyorum. Şimdi burada ne oldu? React, JSX adlı söz dizim uzantısını kullanır. React dökümanından alıntılayalım.

aididg0.png


Şimdi bu sebepten bize backendden gelen datanın içindeki <i></i> işlenmedi ve biz XSS açığından korunmuş olduk. Ancak burada bu istediğimiz bir durum değil. Kullanıcı deneyimi açısından berbat. Yani etiketlerin bu şekilde görünmesi doğru değil. İstediğimiz şey html etiketlerinin çalışmasıdır. Bunun için React, bize şunu söylüyor.


e729pa0.png


Bunu kullan HTML değerleri aynen işlensin ancak isminden de anlaşılacağı üzere bu tehlikeli çünkü XSS saldırısına maruz kalabiliriz.

f7ckofm.png


Yani kullanımımız bu olmalıydı.

o8sqg65.png


Bakın gördüğünüz gibi italik yazılı olan live yazısı html olarak işlendi. Bu istediğimiz bir görüntü ancak biz XSS saldırısına karşı korunmasız bir durumdayız. Hemen bunu da örnekleyelim.

5uf0km5.png


Şimdi bir html metnini değişkende saklayıp paragraf etiketinde kullanıyorum. İlkinde dangerouslySetInnerHTML ile kullanırken ikincisinde ise süslü parantezler ile kullanıyorum.

a5ttnes.png


Sonuç olarak beklediğimde buydu. İlk durum htmli işliyor. O zaman böyle bir data gelir ise

amks95h.png

irzk0xm.png


XSS saldırısını maruz kalıyoruz. Ancak biz yine dangerouslySetInnerHTML kullanalım ancak XSS saldırısından da kurtulalım istiyoruz. Çünkü HTML’in tamamen işlenmemesi bizim işimize yaramayacak HTML olarak işlensin ancak zararlı kodu önlesin istiyoruz. Bunun için dompurify paketini kullanıyorum.

olpi7y9.png


Kullanımım bu olacak. Bu şekilde hem html içeriklerini görüntüleyeceğim hem de HTML içinde domu zararlı kodlardan koruyacağım.

Bu konuda XSS zafiyetini React ile front-end geliştiren geliştiricilerin nasıl değerlendirebileceğini anlattım. Okuduğunuz için teşekkürler.

VİDEOLU EĞİTİM

 
Son düzenleme:

MuhammedTr768

Kıdemli Üye
7 Kas 2021
2,933
1,812
31
MyKrallife
Merhaba, React uygulamalarında XSS güvenlik zafiyetinin önüne nasıl geçebiliriz bundan bahsedeceğim. React, Javascript ile kullanıcı arayüzleri oluşturmak için kullanılan bir kütüphanedir. Biz React’ı web uygulamalarında genellikle backend API’dan gelen verileri web arayüzünde sunmak için kullanıyoruz. Bu uygulamada da bu tarz basit bir işleyişi değerlendirip XSS zafiyeti üzerine konuşacağım. DOM XSS Saldırısı ve Önleme aslında bu konumda bahsetmiş olduğum durumun birebir aynısını yapacağız. Ancak genellikle web geliştiricilerinin gözünden bu DOM XSS zafiyeti sıklıkla kaçmaktadır. Günümüzde React gibi popüler frontend kütüphaneleri varsayılanda bu zafiyetin önüne geçse de yerine göre maruz kalabiliyoruz şimdi bunu örnekleyeceğim.

dkyofb2.png


Ekranda gördüğünüz gibi bir backend adresinde JSON olarak veri bize sunuluyor bizde bu verideki “text” metnini uygulamamızda kullanalım.

ax9srij.png


Yazdığımız kodu inceleyelim. Bir adet App componentimiz var. Text adında bir state tanımım var başlangıçta da boş bir obje alıyor. State nedir dersek de componentimizin durumunu kontrol ettiğimiz yapılar diyebiliriz kısacası. Şimdi useEffect hook’u ile component lifecycle’da componentimin ilk yüklendiği anı kontrol ederek axios ile ilgili backend adresine get isteği yaparak json datasını alıyorum. setText ile de datayı text state değerimin içerisine aktarıyorum. Daha sonra text adlı state’in içindeki text değerini ekrana yazdırıyorum.

ltyzvuu.png


Sonuç olarak web sayfamda bu görüntüyü elde ediyorum. Şimdi burada ne oldu? React, JSX adlı söz dizim uzantısını kullanır. React dökümanından alıntılayalım.

aididg0.png


Şimdi bu sebepten bize backendden gelen datanın içindeki <i></i> işlenmedi ve biz XSS açığından korunmuş olduk. Ancak burada bu istediğimiz bir durum değil. Kullanıcı deneyimi açısından berbat. Yani etiketlerin bu şekilde görünmesi doğru değil. İstediğimiz şey html etiketlerinin çalışmasıdır. Bunun için React, bize şunu söylüyor.


e729pa0.png


Bunu kullan HTML değerleri aynen işlensin ancak isminden de anlaşılacağı üzere bu tehlikeli çünkü XSS saldırısına maruz kalabiliriz.

f7ckofm.png


Yani kullanımımız bu olmalıydı.

o8sqg65.png


Bakın gördüğünüz gibi italik yazılı olan live yazısı html olarak işlendi. Bu istediğimiz bir görüntü ancak biz XSS saldırısına karşı korunmasız bir durumdayız. Hemen bunu da örnekleyelim.

5uf0km5.png


Şimdi bir html metnini değişkende saklayıp paragraf etiketinde kullanıyorum. İlkinde dangerouslySetInnerHTML ile kullanırken ikincisinde ise süslü parantezler ile kullanıyorum.

a5ttnes.png


Sonuç olarak beklediğimde buydu. İlk durum htmli işliyor. O zaman böyle bir data gelir ise

amks95h.png

irzk0xm.png


XSS saldırısını maruz kalıyoruz. Ancak biz yine dangerouslySetInnerHTML kullanalım ancak XSS saldırısından da kurtulalım istiyoruz. Çünkü HTML’in tamamen işlenmemesi bizim işimize yaramayacak HTML olarak işlensin ancak zararlı kodu önlesin istiyoruz. Bunun için dompurify paketini kullanıyorum.

olpi7y9.png


Kullanımım bu olacak. Bu şekilde hem html içeriklerini görüntüleyeceğim hem de HTML içinde domu zararlı kodlardan koruyacağım.

Bu konuda XSS zafiyetini React ile front-end geliştiren geliştiricilerin nasıl değerlendirebileceğini anlattım. Okuduğunuz için teşekkürler.
Eline sağlık
 

white shade

Uzman üye
24 Eki 2014
1,832
13
Mars
Konu için teşekkür ederiz.

Genel bir perspektif ile XSS zafiyetini ele alırsak; çözüm için odaklanılan nokta girdi filtreleme veya bahsettiğiniz gibi kodların işlenmemesi üzerine.

Burada güvenli kod yazmanın öneminden bahsetmek istiyorum. Yazılımlar belirli yaşam döngülerine sahiptir ve yine belirli periyotlarda sızma testleri uygulanarak olası zafiyetler tespit edilir. Ancak gerçek hayatta bu kadar basit olmuyor işler; yöneticiler ticari kaygılar ile bu testleri ya hiç yaptırmıyor veya olması gerektiği kadar sık ve doğru şekilde yapmıyor. Aynı şekilde çalışan konumundaki yazılımcılar da iş kaybetme korkusuyla sonradan fark ettikleri zafiyetleri bildirmeye çekiniyor veya sözünü bile etmiyor.

Uzun lafın kısası arkadaşlar; güvenlik, bir yazılım projesinin en başında yani fikir aşamasında başlayıp devam eden bir süreçtir. Doğru kod yazmanın gerekliliklerinden biri de güvenli kod yazmanın ne olduğunu bilmektir.

Bu tarz konuların devamını bekliyoruz. Ayrıca React konusunda makaleleriniz olacaksa katkımın olmasını isterim. Konu için tekrardan teşekkürler :)
 

EmirhanVR

Yeni üye
19 May 2021
29
7
Python:
while True:
    vulns = ['sql', 'xss', 'csrf']
    
    for vuln in vulns:
        tht.createTopic(vuln + ' zaafiyeti önleme')
 

Pentester

Özel Üye
8 Eyl 2016
1,646
995
Konu için teşekkür ederiz.

Genel bir perspektif ile XSS zafiyetini ele alırsak; çözüm için odaklanılan nokta girdi filtreleme veya bahsettiğiniz gibi kodların işlenmemesi üzerine.

Burada güvenli kod yazmanın öneminden bahsetmek istiyorum. Yazılımlar belirli yaşam döngülerine sahiptir ve yine belirli periyotlarda sızma testleri uygulanarak olası zafiyetler tespit edilir. Ancak gerçek hayatta bu kadar basit olmuyor işler; yöneticiler ticari kaygılar ile bu testleri ya hiç yaptırmıyor veya olması gerektiği kadar sık ve doğru şekilde yapmıyor. Aynı şekilde çalışan konumundaki yazılımcılar da iş kaybetme korkusuyla sonradan fark ettikleri zafiyetleri bildirmeye çekiniyor veya sözünü bile etmiyor.

Uzun lafın kısası arkadaşlar; güvenlik, bir yazılım projesinin en başında yani fikir aşamasında başlayıp devam eden bir süreçtir. Doğru kod yazmanın gerekliliklerinden biri de güvenli kod yazmanın ne olduğunu bilmektir.

Bu tarz konuların devamını bekliyoruz. Ayrıca React konusunda makaleleriniz olacaksa katkımın olmasını isterim. Konu için tekrardan teşekkürler :)
Ben teşekkür ederim bilgilendirmeler için. React konusunda neler gelebilir zaman gösterecek. Makale gelirse ekstra bu tarz bilgi mesajlarını beklerim :)
Python:
while True:
    vulns = ['sql', 'xss', 'csrf']
   
    for vuln in vulns:
        tht.createTopic(vuln + ' zaafiyeti önleme')
Yani Emirhan Bey şair burada ne anlatmak istiyor :)
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.