- 8 Eyl 2016
- 1,647
- 1,007
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.
Ekranda gördüğünüz gibi bir backend adresinde JSON olarak veri bize sunuluyor bizde bu verideki “text” metnini uygulamamızda kullanalım.
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.
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.
Ş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.
Bunu kullan HTML değerleri aynen işlensin ancak isminden de anlaşılacağı üzere bu tehlikeli çünkü XSS saldırısına maruz kalabiliriz.
Yani kullanımımız bu olmalıydı.
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.
Ş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.
Sonuç olarak beklediğimde buydu. İlk durum htmli işliyor. O zaman böyle bir data gelir ise
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.
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
Ekranda gördüğünüz gibi bir backend adresinde JSON olarak veri bize sunuluyor bizde bu verideki “text” metnini uygulamamızda kullanalım.
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.
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.
Ş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.
Bunu kullan HTML değerleri aynen işlensin ancak isminden de anlaşılacağı üzere bu tehlikeli çünkü XSS saldırısına maruz kalabiliriz.
Yani kullanımımız bu olmalıydı.
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.
Ş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.
Sonuç olarak beklediğimde buydu. İlk durum htmli işliyor. O zaman böyle bir data gelir ise
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.
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: