- 8 Eyl 2016
- 1,646
- 998
Herkese merhaba, bu konuda sizlere DOM XSS zafiyetini uygulamalı bir şekilde kendi yazdığımız back end ve front end tarafı üzerinden anlatacağım.
DOM ve XSS Arasındaki İlişki Nedir?
Öncelikle DOM nedir bunu anlamamız gerekiyor. Aslında basitçe HTML elemanlarını birer DOM olarak tanımlayabiliriz. Back-end tarafında bir veri gelir ve biz bunu client tarafına aktarırken domları yaratırız. DOM XSS zafiyeti de aslında server tarafını değil client tarafını ilgilendiriyor. Neden böyle oluyor birazdan net bir şekilde anlayacağız. Şimdi bizim back-end uygulamamız var ve bu uygulama veritabanı üzerindeki verileri json formatında döndüren bir rest api uygulamasıdır. İlgili endpointlere yapılan istekler, gönderilen datalar json olarak geliyor veya iletiliyor.
Node.JS Back-end REST API
Şimdi burada back-end yani rest api tarafımızı inceleyelim. Ben api uygulamamı node.js ile yazdım. Bu php de olur, c# da, java da hiç fark etmez bizi back-end ilgilendirmiyor aslında. Ancak burada back-end bize ne sunuyor bir bakalım.
Bir middleware tanımlamamvar bu da /api şeklinde gelen istekleri ‘yerlerRoutes’ dosyasına gönderiyor.
O da routes klasörü altında yerler adlı javascript dosyasıdır.
O dosya da 2 adet route tanımı içeriyor. İlk tanım da ‘/’ endpointi yani aslında ‘/api’ endpointine gidildiğinde bize json olarak veri tabanı üzerindeki tüm kayıtları dönüyor.
İşte bu şekilde. Aynı /api endpointine post request içerisinde data olarak json nesnesi gönderirsek de bunu veri tabanına kaydedecektir.
Json olarak isim değerine test yazdım ve başarıyla eklendi ve veri tabanı üzerindeki sonucu bize döndü. Şimdi back-end tarafını da kısaca özetlemiş oldum ama ilgileneceğimiz kısım client tarafı olacak. DOM XSS orada patlak veriyor.
Client tarafında yani HTML tarafına geçtik ve html tarafı için yazılmış javascript kodlarına bakalım. Aslında olay şu ilgili backend rotalarına istek atıp gelen json nesnesini uygulamanın arayüzünde kullanacağız ve burada dom xss karşımıza çıkacak.
Bakın bu kodlarda /api rotasına gidiyor json verisini alıp ilgili değişkene aktarıyor ve aynı zamanda bir ekleme işlemi için inputtan girilen değer de alınıp başka fonksiyonları tetikliyor. Burada fasa fisoları geçelim aslında olay şu satırlarda.
yerEkle fonksiyonu ilgili api endpointinden gelen json nesnesi içinde isim alanını alıp bir html nesnesi yaratıyor. Bakın <li> tagları arasında bu isim değerini ekliyor. Daha sonra yerler adında bir class’a append ile bu içeriği ekliyor.
Yani üretilen dinamik liste elemanı ilgili ul etiketinin içine ekleniyor. Burada karşımıza DOM XSS dediğimiz zafiyet çıkıyor. Biz backendden gelen datayı alıp javascript ile bir DOM yani html nesnesi yaratıp içine gönderdik ve bunu append fonksiyonu ile yaptık. Append fonksiyonunun görevi kısaca html nesnesi yaratmaktır. Burada düşüneceğimiz şey de şu peki dinamik olarak backend servisinden gelen isim değeri zararlı bir javascript kodu içeriyorsa aynen işleyecek mi? Evet işleyecek. Bakın biz client side tarafında bir kontrol yapıyor muyuz? Yoo, aynen gelen datayı appendledik. O zaman gönder gelsin.
Ne oldu? Backend tarafına json olarak post request içinde script kodu yazıldı ve gönderildi e bizde dinamik olarak bunu arayüzümüzde kullanıyoruz. İşte bu yüzden patladık, alın size DOM XSS zafiyeti.
Bakın backendden ne geliyorsa gelsin frontend tarafında bu kontrolü biz yapmadığımızdan XSS zafiyetine maruz kaldık. DOM XSS, bizim yarattığımız domdan kaynaklandı. Backendden zararlı kod gelebilir biz domu oluştururken bunu temizlemeliyiz.
Dom javascript kodunu işledi, geçmiş olsun. Gelin şimdi bunu temizleyelim.
dompurify - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
dompurify adını verdiğimiz kütüphane yardımıyla data içindeki zararlı kodları temizleyeceğiz.
Ne yaptık? Dompurify için bir fonksiyon yazdım ve parametre olarak aldığı değeri return ediyor. Bizim dinamik gelen yer.isim datasını ilgili fonksiyondan geçirerek temizliyorum.
Temizledik. Yani DOM XSS için domları oluştururken client side için kontrolü yapmalıyız. Ayrıca biz apiden verileri alıyoruz ancak bir de veri ekleyebiliyoruz.
Bu eklenen veri bizden ilgili backend servisine gidiyor. Tamam biz backend servisinden gelen veriyi kendimiz için temizledik ama bizden giderken de temiz gitsin sadece kendimizi düşünmeyelim. Aynı servisi kullanan başka uygulamaları da düşünelim.
Kısaca bu şekilde. Test edelim.
İlgili post isteğini gönderdim ve hiçbir veri gönderilmedi. Aslında giden tüm kod temizlendi ve ilgili servise boş veri gönderilmiş oldu ve veri tabanı tarafında required şartından dolayı veri tabanı hata üretti yani veriyi kabul etmedi.
Yani boş bir json nesnesi göndermiş olduk bu sayede hiçbir veri sisteme gönderilmedi.
Kısaca DOM XSS için client tarafında javascript ile verileri çekip domları oluştururken append, innerHTML gibi fonksiyonlardan kaçının. Bu şekilde verileri temizleyin.
VİDEOLU EĞİTİM
DOM ve XSS Arasındaki İlişki Nedir?
Öncelikle DOM nedir bunu anlamamız gerekiyor. Aslında basitçe HTML elemanlarını birer DOM olarak tanımlayabiliriz. Back-end tarafında bir veri gelir ve biz bunu client tarafına aktarırken domları yaratırız. DOM XSS zafiyeti de aslında server tarafını değil client tarafını ilgilendiriyor. Neden böyle oluyor birazdan net bir şekilde anlayacağız. Şimdi bizim back-end uygulamamız var ve bu uygulama veritabanı üzerindeki verileri json formatında döndüren bir rest api uygulamasıdır. İlgili endpointlere yapılan istekler, gönderilen datalar json olarak geliyor veya iletiliyor.
Node.JS Back-end REST API
Şimdi burada back-end yani rest api tarafımızı inceleyelim. Ben api uygulamamı node.js ile yazdım. Bu php de olur, c# da, java da hiç fark etmez bizi back-end ilgilendirmiyor aslında. Ancak burada back-end bize ne sunuyor bir bakalım.
Bir middleware tanımlamamvar bu da /api şeklinde gelen istekleri ‘yerlerRoutes’ dosyasına gönderiyor.
O da routes klasörü altında yerler adlı javascript dosyasıdır.
O dosya da 2 adet route tanımı içeriyor. İlk tanım da ‘/’ endpointi yani aslında ‘/api’ endpointine gidildiğinde bize json olarak veri tabanı üzerindeki tüm kayıtları dönüyor.
İşte bu şekilde. Aynı /api endpointine post request içerisinde data olarak json nesnesi gönderirsek de bunu veri tabanına kaydedecektir.
Json olarak isim değerine test yazdım ve başarıyla eklendi ve veri tabanı üzerindeki sonucu bize döndü. Şimdi back-end tarafını da kısaca özetlemiş oldum ama ilgileneceğimiz kısım client tarafı olacak. DOM XSS orada patlak veriyor.
Client tarafında yani HTML tarafına geçtik ve html tarafı için yazılmış javascript kodlarına bakalım. Aslında olay şu ilgili backend rotalarına istek atıp gelen json nesnesini uygulamanın arayüzünde kullanacağız ve burada dom xss karşımıza çıkacak.
Bakın bu kodlarda /api rotasına gidiyor json verisini alıp ilgili değişkene aktarıyor ve aynı zamanda bir ekleme işlemi için inputtan girilen değer de alınıp başka fonksiyonları tetikliyor. Burada fasa fisoları geçelim aslında olay şu satırlarda.
yerEkle fonksiyonu ilgili api endpointinden gelen json nesnesi içinde isim alanını alıp bir html nesnesi yaratıyor. Bakın <li> tagları arasında bu isim değerini ekliyor. Daha sonra yerler adında bir class’a append ile bu içeriği ekliyor.
Yani üretilen dinamik liste elemanı ilgili ul etiketinin içine ekleniyor. Burada karşımıza DOM XSS dediğimiz zafiyet çıkıyor. Biz backendden gelen datayı alıp javascript ile bir DOM yani html nesnesi yaratıp içine gönderdik ve bunu append fonksiyonu ile yaptık. Append fonksiyonunun görevi kısaca html nesnesi yaratmaktır. Burada düşüneceğimiz şey de şu peki dinamik olarak backend servisinden gelen isim değeri zararlı bir javascript kodu içeriyorsa aynen işleyecek mi? Evet işleyecek. Bakın biz client side tarafında bir kontrol yapıyor muyuz? Yoo, aynen gelen datayı appendledik. O zaman gönder gelsin.
Ne oldu? Backend tarafına json olarak post request içinde script kodu yazıldı ve gönderildi e bizde dinamik olarak bunu arayüzümüzde kullanıyoruz. İşte bu yüzden patladık, alın size DOM XSS zafiyeti.
Bakın backendden ne geliyorsa gelsin frontend tarafında bu kontrolü biz yapmadığımızdan XSS zafiyetine maruz kaldık. DOM XSS, bizim yarattığımız domdan kaynaklandı. Backendden zararlı kod gelebilir biz domu oluştururken bunu temizlemeliyiz.
Dom javascript kodunu işledi, geçmiş olsun. Gelin şimdi bunu temizleyelim.
dompurify - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
dompurify adını verdiğimiz kütüphane yardımıyla data içindeki zararlı kodları temizleyeceğiz.
Ne yaptık? Dompurify için bir fonksiyon yazdım ve parametre olarak aldığı değeri return ediyor. Bizim dinamik gelen yer.isim datasını ilgili fonksiyondan geçirerek temizliyorum.
Temizledik. Yani DOM XSS için domları oluştururken client side için kontrolü yapmalıyız. Ayrıca biz apiden verileri alıyoruz ancak bir de veri ekleyebiliyoruz.
Bu eklenen veri bizden ilgili backend servisine gidiyor. Tamam biz backend servisinden gelen veriyi kendimiz için temizledik ama bizden giderken de temiz gitsin sadece kendimizi düşünmeyelim. Aynı servisi kullanan başka uygulamaları da düşünelim.
Kısaca bu şekilde. Test edelim.
İlgili post isteğini gönderdim ve hiçbir veri gönderilmedi. Aslında giden tüm kod temizlendi ve ilgili servise boş veri gönderilmiş oldu ve veri tabanı tarafında required şartından dolayı veri tabanı hata üretti yani veriyi kabul etmedi.
Yani boş bir json nesnesi göndermiş olduk bu sayede hiçbir veri sisteme gönderilmedi.
Kısaca DOM XSS için client tarafında javascript ile verileri çekip domları oluştururken append, innerHTML gibi fonksiyonlardan kaçının. Bu şekilde verileri temizleyin.
VİDEOLU EĞİTİM
Son düzenleme:
