Allah’ın Rahmeti Ve Bereketi Üzerinize Olsun
Selamun aleyküm dostlarım. Bu makalemizde Bir web sitesinin insanlar tarafından okunabilir kaynak kodunu görüntülemek için tarayıcınızı kullanmayı, Sayfa öğelerini incelemek ve normalde erişimi engellenmiş içerikleri görüntülemek için değişiklikler yapmayı, Bir sayfanın JavaScript akışını incelemek ve kontrol etmeyi, Bir sayfanın yaptığı ağ (network) isteklerini tespit etmeyi ve son olarak Bir web sitesi tarafından yerel olarak depolanan verileri belirlemek ve incelemek
Web Sitesini keşfetmek
Bir sızma test uzmanı (penetration tester) olarak, bir web sitesi veya web uygulamasını incelerken göreviniz, güvenlik açığı barındırabilecek özellikleri tespit etmek ve gerçekten savunmasız olup olmadıklarını değerlendirmek amacıyla bu özellikleri istismar etmeye çalışmaktır. Bu özellikler genellikle kullanıcı etkileşimi gerektiren bölümlerdir.
Web sitesinin etkileşimli kısımlarını bulmak; bir giriş formunu fark etmek kadar basit olabileceği gibi, sitenin JavaScript kodlarını manuel olarak incelemeyi de içerebilir. Başlamak için en iyi araçlardan biri doğrudan tarayıcınızdır. Web sitesini keşfedin, ziyaret ettiğiniz sayfaları, bölümleri ve özellikleri not alın ve her biri için kısa bir özet hazırlayın.
Acme IT Support web sitesini ziyaret ettikten sonra aşağıdaki sayfayı göreceksiniz: (devamında sayfa görüntüsü veya açıklaması yer alacaktır).
Acme IT Support web sitesi için örnek bir site incelemesi aşağıdakine benzer şekilde olabilir:
Sayfa Kaynağını Görüntüleme
Sayfa Kaynağı (Page Source)
Sayfa kaynağı, bir web sunucusuna yaptığımız her istekte sunucudan tarayıcımıza/istemcimize gönderilen, insanlar tarafından okunabilir koddur.
Bu kod; HTML (HyperText Markup Language - Hiper Metin İşaretleme Dili), CSS (Cascading Style Sheets - Basamaklı Stil Şablonları) ve JavaScript bileşenlerinden oluşur. Bu bileşenler tarayıcımıza hangi içeriğin görüntüleneceğini, içeriğin nasıl gösterileceğini bildirir ve JavaScript aracılığıyla sayfaya etkileşim özellikleri kazandırır.
Bizim açımızdan, sayfa kaynağını görüntülemek web uygulaması hakkında daha fazla bilgi keşfetmemize yardımcı olabilir.
Çoğu tarayıcı, URL'nin başına view-source: eklenmesini de destekler.
Bu yöntem kullanıldığında tarayıcı, web sayfasını normal şekilde görüntülemek yerine sayfanın kaynak kodunu (HTML, CSS ve JavaScript kodlarını) gösterir. Böylece sayfanın tarayıcıya gönderilen ham içeriğini inceleyebilir ve web uygulaması hakkında daha fazla bilgi edinebilirsiniz.
Haydi Biraz Sayfa Kaynağı İnceleyelim
Sayfanın üst kısmında <!-- ile başlayıp --> ile biten bazı kodlar göreceksiniz. Bunlara yorumlar (comments) denir. Yorumlar, web geliştiricilerinin diğer programcılara bir şeyi açıklamak veya kendilerine not/hatırlatma bırakmak amacıyla koda ekledikleri mesajlardır. Bu yorumlar gerçek web sayfasında görüntülenmez.
Bu örnekteki yorum, yeni bir ana sayfa geliştirilirken mevcut ana sayfanın geçici olarak kullanıldığını açıklamaktadır.
HTML'de farklı sayfalara verilen bağlantılar, anchor tag (bağlantı etiketi) adı verilen ve <a ile başlayan HTML öğeleri kullanılarak oluşturulur. Kullanıcının yönlendirileceği bağlantı adresi ise href niteliği (attribute) içerisinde saklanır.
Örneğin, 31. satırda iletişim sayfasına ait bağlantıyı görebilirsiniz:
sayfa kaynağını incelerken genellikle serc komutlarının içerisinde CSS, Javascript ve görseller gibi harici dosyalar HTML kodu aracılığıyla sayfaya dahil edilebilir. bu tür gizli bağlantılar sayesinde şirketin, personelin veya müşterilerin bilgilerini saklamak için kullandığı özel bir alanı keşfedebilirsiniz.
Developer Araçları- Denetleyici
Geliştirici Araçları (Developer Tools)
Tüm modern tarayıcılar geliştirici araçlarını içerir. Bu araçlar, web geliştiricilerinin web uygulamalarında hata ayıklamasına (debugging) yardımcı olan bir araç setidir ve bir web sitesinin “kaputun altına” bakarak neler olduğunu görmenizi sağlar.
Sızma testi uzmanları (pentester) olarak bu araçları kullanarak web uygulamasını çok daha iyi anlayabiliriz. Bu bölümde özellikle geliştirici araçlarının üç özelliğine odaklanıyoruz: Inspector (Denetleyici), Debugger (Hata Ayıklayıcı) ve Network (Ağ).
Inspector (Denetleyici)
Sayfa kaynağı her zaman bir web sayfasında gösterilenleri birebir yansıtmaz; CSS, JavaScript ve kullanıcı etkileşimi sayfanın içeriğini ve görünümünü değiştirebilir. Bu yüzden tarayıcı penceresinde o anda gerçekten ne görüntülendiğini görebilmek için bir yönteme ihtiyaç duyarız. Inspector (Denetleyici) sekmesi, web sitesinin şu anda ekranda görünen canlı (gerçek zamanlı) halini gösterir. Bu canlı görünümü görüntülemenin yanı sıra, sayfa öğelerini düzenleyebilir ve onlarla etkileşime girebiliriz; bu özellik web geliştiricilerinin hataları tespit etmesi (debug) için oldukça faydalıdır.
Acme IT Support web sitesinde News (Haberler) bölümüne tıklayın; burada üç haber makalesi göreceksiniz. İlk iki makale okunabilir durumdadır, ancak üçüncü makale içerik üzerinde yer alan ve erişimi engelleyen bir bildirim (floating notice) nedeniyle kapatılmıştır. Bu bildirim, içeriğin üzerine sabitlenmiş şekilde görünür ve premium abonelik gerektiğini söyler.
Sayfa içeriğini engelleyen bu tür yüzen kutular genellikle “paywall” (ödeme duvarı) olarak adlandırılır; çünkü kullanıcı içerik için ödeme yapana kadar, istenen içeriğin önüne mecazi bir “duvar” koyarlar.
Premium bildirimine (paywall) sağ tıklayın ve ardından menüden “Inspect” (İncele) seçeneğini seçin. Bu işlem, kullandığınız tarayıcıya veya tercihlerine bağlı olarak geliştirici araçlarını ekranın alt kısmında veya sağ tarafında açacaktır.
Inspector (Denetleyici) sekmesinde, artık web sitesini oluşturan öğeleri / HTML kodlarını görebilirsiniz.
Inspector (Denetleyici)
.premium-customer-blocker sınıfına sahip DIV öğesini bulun ve üzerine tıklayın. Bunu yaptığınızda, bu öğeye uygulanan tüm CSS stillerini styles (stilller) kutusunda göreceksiniz. Örneğin margin-top: 60px ve text-align: center gibi.
Burada ilgilendiğimiz stil display: block değeridir. Eğer “block” kelimesine tıklarsanız, yerine istediğiniz başka bir değer yazabilirsiniz. Örneğin none yazmayı deneyin; bu, kutunun kaybolmasını sağlar Eğer öğede bir display alanı yoksa, en alttaki stilin sonuna tıklayarak kendi stilinizi de ekleyebilirsiniz.
Element inspector ile deney yaparsanız, web sitesindeki hemen hemen her bilgiyi değiştirebileceğinizi göreceksiniz; buna içerik de dahildir. Ancak unutmayın, bu değişiklikler sadece sizin tarayıcı pencerenizde geçerlidir ve sayfayı yenilediğinizde her şey eski haline döner.
Developer Araçları- Hata Ayıklayıcı
Geliştirici Araçları – Debugger (Hata Ayıklayıcı)
Bu panel, JavaScript kodlarını hata ayıklamak için kullanılır ve web geliştiricilerinin bir şeyin neden düzgün çalışmadığını anlamasına yardımcı olur. Ancak sızma testi uzmanları (pentester) olarak biz de JavaScript kodunun derinliklerine inmek için bu aracı kullanabiliriz. Firefox ve Safari tarayıcılarında bu özellik Debugger, Google Chrome’da ise Sources (Kaynaklar) olarak adlandırılır.
Acme IT Support web sitesinde Contact (İletişim) sayfasına tıklayın. Sayfa her yüklendiğinde ekranda hızlı bir şekilde kırmızı bir flaş göründüğünü fark edebilirsiniz. Bu kırmızı flaşın ne olduğunu ve içinde ilginç bir şey olup olmadığını anlamak için Debugger sekmesini kullanacağız. Bir “kırmızı nokta”yı debug etmek gerçek dünyada bir sızma testi uzmanının yapacağı bir şey değildir; ancak bu örnek, bu özelliği kullanmayı öğrenmemizi ve Debugger aracına aşina olmamızı sağlar.
Debugger sekmesinde, sol tarafta mevcut web sayfasının kullandığı tüm kaynakların bir listesini görürsünüz. assets (varlıklar) klasörüne tıklarsanız, flash.min.js adlı bir dosya göreceksiniz. Bu dosyaya tıkladığınızda içeriği görüntülenir.
JavaScript dosyalarını görüntülerken genellikle her şeyin tek bir satıra sıkıştırılmış olduğunu fark edersiniz. Bunun nedeni dosyanın minify (küçültülmüş) olmasıdır; yani dosya boyutunu azaltmak için tüm biçimlendirme (tablar, boşluklar ve satır sonları) kaldırılmıştır. Bu dosya da bir istisna değildir; ayrıca obfuscate (kasıtlı olarak okunması zor hale getirme) edilmiştir, bu da kodun diğer geliştiriciler tarafından anlaşılmasını ve kopyalanmasını zorlaştırır.
Kodu biraz daha okunabilir hale getirmek için Pretty Print (Güzel Yazdırma) seçeneğini kullanabiliriz. Bu seçenek genellikle { } şeklinde görünür ve kodu daha düzenli hale getirir. Ancak obfuscation nedeniyle kod hâlâ tamamen anlaşılır olmayabilir.
Dosyanın en altına doğru kaydırdığınızda şu satırı göreceksiniz:
Bu küçük JavaScript parçası, sayfadaki kırmızı açılır bildirimi (pop-up) kaldıran koddur. Debugger içinde kullanabileceğimiz bir başka özellik de breakpoint (kesme noktası) özelliğidir. Breakpoint’ler, tarayıcının JavaScript kodunu çalıştırmasını zorla durdurmamıza ve mevcut yürütmeyi (execution) geçici olarak duraklatmamıza olanak tanır.
Eğer yukarıdaki kodun bulunduğu 110. satıra tıklarsanız, o satırın maviye döndüğünü göreceksiniz.
Developer Araçları- Ağ
Geliştirici Araçları – Network (Ağ)
Developer Tools içindeki Network (Ağ) sekmesi, bir web sayfasının yaptığı tüm harici istekleri takip etmek için kullanılabilir. Network sekmesine tıklayıp sayfayı yenilerseniz, sayfanın talep ettiği tüm dosyaları görebilirsiniz.
Bunu Contact (İletişim) sayfasında deneyin; liste çok fazla dolarsa, sağ üstte bulunan çöp kutusu (trash can) simgesine basarak listeyi temizleyebilirsiniz.
Network (Ağ) sekmesi açıkken iletişim formunu doldurup Send Message (Mesaj Gönder) butonuna basmayı deneyin. Network sekmesinde bir olay (event) oluştuğunu göreceksiniz; bu, formun arka planda AJAX aracılığıyla gönderilmesidir.
AJAX, bir web uygulamasında sayfanın mevcut durumunu bozmadan, arka planda ağ verisi gönderip almayı sağlayan bir yöntemdir.
İsteği incelediğinizde, istek başlıklarını (request headers), çerez (cookie) bilgilerini ve HTML yanıtını (response) görebileceksiniz. Bunlar, daha fazla keşif (enumeration) ve istismar (exploitation) sürecinde size yardımcı olur.
Developer Araçları- Depolama
Storage (Depolama) Sekmesi
Developer Tools içindeki Storage (Depolama) sekmesi, bir web sitesinin tarayıcınızda sakladığı verileri görüntülemenize ve yönetmenize olanak tanır. Bu veriler istemci tarafında (client-side) saklanır ve manuel bir sızma testi sırasında yararlı olabilecek hassas veya ilginç bilgiler içerebilir. Sızma testi uzmanları olarak tarayıcı depolamasını kontrol etmek, uygulamanın kimlik doğrulama (authentication), oturum (session) verileri, kullanıcı tercihleri ve diğer saklanan değerleri nasıl işlediğini anlamamıza yardımcı olur.
Storage (Depolama) sekmesi aşağıdaki önemli seçenekleri içerir:
Bu genellikle oturum kimlikleri (session identifiers), kullanıcı tercihleri ve bazen de kimlik doğrulamayla ilgili token’ları içerir. Çerezler ayrıca önemli güvenlik bayraklarına (security flags) sahiptir. HttpOnly bayrağı, JavaScript’in çereze erişmesini engeller ve bu sayede XSS saldırılarına karşı koruma sağlar.
Secure bayrağı, çerezin yalnızca HTTPS üzerinden gönderilmesini garanti eder. SameSite özniteliği ise saldırıları azaltmaya yardımcı olur.
Çerezleri dikkatlice incelemek, uygulamanın oturumları nasıl yönettiğini ve herhangi bir güvenlik en iyi uygulamasının eksik olup olmadığını ortaya çıkarabilir.
Okuduğunuz için teşekkür ederim
Selamun aleyküm dostlarım. Bu makalemizde Bir web sitesinin insanlar tarafından okunabilir kaynak kodunu görüntülemek için tarayıcınızı kullanmayı, Sayfa öğelerini incelemek ve normalde erişimi engellenmiş içerikleri görüntülemek için değişiklikler yapmayı, Bir sayfanın JavaScript akışını incelemek ve kontrol etmeyi, Bir sayfanın yaptığı ağ (network) isteklerini tespit etmeyi ve son olarak Bir web sitesi tarafından yerel olarak depolanan verileri belirlemek ve incelemek
Web Sitesini keşfetmek
Bir sızma test uzmanı (penetration tester) olarak, bir web sitesi veya web uygulamasını incelerken göreviniz, güvenlik açığı barındırabilecek özellikleri tespit etmek ve gerçekten savunmasız olup olmadıklarını değerlendirmek amacıyla bu özellikleri istismar etmeye çalışmaktır. Bu özellikler genellikle kullanıcı etkileşimi gerektiren bölümlerdir.
Web sitesinin etkileşimli kısımlarını bulmak; bir giriş formunu fark etmek kadar basit olabileceği gibi, sitenin JavaScript kodlarını manuel olarak incelemeyi de içerebilir. Başlamak için en iyi araçlardan biri doğrudan tarayıcınızdır. Web sitesini keşfedin, ziyaret ettiğiniz sayfaları, bölümleri ve özellikleri not alın ve her biri için kısa bir özet hazırlayın.
Acme IT Support web sitesini ziyaret ettikten sonra aşağıdaki sayfayı göreceksiniz: (devamında sayfa görüntüsü veya açıklaması yer alacaktır).
Acme IT Support web sitesi için örnek bir site incelemesi aşağıdakine benzer şekilde olabilir:
| Özellik | Uç Nokta (Endpoint) | Özet |
|---|---|---|
| Ana Sayfa | / | Bu sayfa, Acme IT Support şirketinin ne iş yaptığına dair bir özet ve çalışanlarının yer aldığı bir şirket fotoğrafı içerir. |
| Son Haberler | /news | Bu sayfa, şirket tarafından yakın zamanda yayımlanan haber makalelerinin bir listesini içerir. Her haber makalesinin, örneğin /news/article?id=1 şeklinde bir kimlik (ID) numarası içeren bağlantısı bulunmaktadır. |
| Haber Makalesi | /news/article?id=1 | Seçilen haber makalesini görüntüler. Bazı makalelerin erişimi kısıtlanmış olup yalnızca premium müşterilere ayrılmış gibi görünmektedir. |
| İletişim Sayfası | /contact | Bu sayfa, müşterilerin şirketle iletişime geçebilmesi için bir form içerir. Formda ad, e-posta ve mesaj alanları ile birlikte bir gönder düğmesi bulunmaktadır. |
| Müşteriler | /customers | Bu bağlantı kullanıcıyı /customers/login adresine yönlendirir. |
| Müşteri Girişi | /customers/login | Bu sayfa, kullanıcı adı ve parola alanlarından oluşan bir giriş formu içerir. |
| Müşteri Kaydı | /customers/signup | Bu sayfa, kullanıcı adı, e-posta, parola ve parola doğrulama alanlarını içeren bir kullanıcı kayıt formu barındırır. |
| Müşteri Parola Sıfırlama | /customers/reset | E-posta adresi giriş alanı bulunan bir parola sıfırlama formudur. |
| Müşteri Kontrol Paneli | /customers | Bu sayfa, kullanıcının BT destek şirketine göndermiş olduğu destek taleplerini (ticket) listeler ve yeni bir talep oluşturmak için Talep Oluştur (Create Ticket) düğmesini içerir. |
| Destek Talebi Oluştur | /customers/ticket/new | Bu sayfa, BT sorununu açıklamak için bir metin kutusu ve dosya yükleme seçeneği içeren bir form sunar. Kullanıcı bu form aracılığıyla bir destek talebi oluşturabilir. |
| Müşteri Hesabı | /customers/account | Bu sayfa, kullanıcının kullanıcı adını, e-posta adresini ve parolasını düzenlemesine olanak tanır. |
| Müşteri Çıkışı | /customers/logout | Bu bağlantı, kullanıcıyı müşteri alanındaki oturumundan çıkarır. |
Sayfa Kaynağını Görüntüleme
Sayfa Kaynağı (Page Source)
Sayfa kaynağı, bir web sunucusuna yaptığımız her istekte sunucudan tarayıcımıza/istemcimize gönderilen, insanlar tarafından okunabilir koddur.
Bu kod; HTML (HyperText Markup Language - Hiper Metin İşaretleme Dili), CSS (Cascading Style Sheets - Basamaklı Stil Şablonları) ve JavaScript bileşenlerinden oluşur. Bu bileşenler tarayıcımıza hangi içeriğin görüntüleneceğini, içeriğin nasıl gösterileceğini bildirir ve JavaScript aracılığıyla sayfaya etkileşim özellikleri kazandırır.
Bizim açımızdan, sayfa kaynağını görüntülemek web uygulaması hakkında daha fazla bilgi keşfetmemize yardımcı olabilir.
Sayfa Kaynağını Nasıl Görüntüleyebilirim?
Bir web sitesini görüntülerken sayfanın herhangi bir yerine sağ tıklayabilir ve açılan menüden “Sayfa Kaynağını Görüntüle” (View Page Source) seçeneğini seçebilirsiniz.Çoğu tarayıcı, URL'nin başına view-source: eklenmesini de destekler.
Kod:
view-source:https://www.google.com/
Haydi Biraz Sayfa Kaynağı İnceleyelim
Sayfanın üst kısmında <!-- ile başlayıp --> ile biten bazı kodlar göreceksiniz. Bunlara yorumlar (comments) denir. Yorumlar, web geliştiricilerinin diğer programcılara bir şeyi açıklamak veya kendilerine not/hatırlatma bırakmak amacıyla koda ekledikleri mesajlardır. Bu yorumlar gerçek web sayfasında görüntülenmez.
Bu örnekteki yorum, yeni bir ana sayfa geliştirilirken mevcut ana sayfanın geçici olarak kullanıldığını açıklamaktadır.
HTML'de farklı sayfalara verilen bağlantılar, anchor tag (bağlantı etiketi) adı verilen ve <a ile başlayan HTML öğeleri kullanılarak oluşturulur. Kullanıcının yönlendirileceği bağlantı adresi ise href niteliği (attribute) içerisinde saklanır.
Örneğin, 31. satırda iletişim sayfasına ait bağlantıyı görebilirsiniz:
sayfa kaynağını incelerken genellikle serc komutlarının içerisinde CSS, Javascript ve görseller gibi harici dosyalar HTML kodu aracılığıyla sayfaya dahil edilebilir. bu tür gizli bağlantılar sayesinde şirketin, personelin veya müşterilerin bilgilerini saklamak için kullandığı özel bir alanı keşfedebilirsiniz.
Developer Araçları- Denetleyici
Geliştirici Araçları (Developer Tools)
Tüm modern tarayıcılar geliştirici araçlarını içerir. Bu araçlar, web geliştiricilerinin web uygulamalarında hata ayıklamasına (debugging) yardımcı olan bir araç setidir ve bir web sitesinin “kaputun altına” bakarak neler olduğunu görmenizi sağlar.
Sızma testi uzmanları (pentester) olarak bu araçları kullanarak web uygulamasını çok daha iyi anlayabiliriz. Bu bölümde özellikle geliştirici araçlarının üç özelliğine odaklanıyoruz: Inspector (Denetleyici), Debugger (Hata Ayıklayıcı) ve Network (Ağ).
Inspector (Denetleyici)
Sayfa kaynağı her zaman bir web sayfasında gösterilenleri birebir yansıtmaz; CSS, JavaScript ve kullanıcı etkileşimi sayfanın içeriğini ve görünümünü değiştirebilir. Bu yüzden tarayıcı penceresinde o anda gerçekten ne görüntülendiğini görebilmek için bir yönteme ihtiyaç duyarız. Inspector (Denetleyici) sekmesi, web sitesinin şu anda ekranda görünen canlı (gerçek zamanlı) halini gösterir. Bu canlı görünümü görüntülemenin yanı sıra, sayfa öğelerini düzenleyebilir ve onlarla etkileşime girebiliriz; bu özellik web geliştiricilerinin hataları tespit etmesi (debug) için oldukça faydalıdır.
Acme IT Support web sitesinde News (Haberler) bölümüne tıklayın; burada üç haber makalesi göreceksiniz. İlk iki makale okunabilir durumdadır, ancak üçüncü makale içerik üzerinde yer alan ve erişimi engelleyen bir bildirim (floating notice) nedeniyle kapatılmıştır. Bu bildirim, içeriğin üzerine sabitlenmiş şekilde görünür ve premium abonelik gerektiğini söyler.
Sayfa içeriğini engelleyen bu tür yüzen kutular genellikle “paywall” (ödeme duvarı) olarak adlandırılır; çünkü kullanıcı içerik için ödeme yapana kadar, istenen içeriğin önüne mecazi bir “duvar” koyarlar.
Premium bildirimine (paywall) sağ tıklayın ve ardından menüden “Inspect” (İncele) seçeneğini seçin. Bu işlem, kullandığınız tarayıcıya veya tercihlerine bağlı olarak geliştirici araçlarını ekranın alt kısmında veya sağ tarafında açacaktır.
Inspector (Denetleyici) sekmesinde, artık web sitesini oluşturan öğeleri / HTML kodlarını görebilirsiniz.
Inspector (Denetleyici)
.premium-customer-blocker sınıfına sahip DIV öğesini bulun ve üzerine tıklayın. Bunu yaptığınızda, bu öğeye uygulanan tüm CSS stillerini styles (stilller) kutusunda göreceksiniz. Örneğin margin-top: 60px ve text-align: center gibi.
Burada ilgilendiğimiz stil display: block değeridir. Eğer “block” kelimesine tıklarsanız, yerine istediğiniz başka bir değer yazabilirsiniz. Örneğin none yazmayı deneyin; bu, kutunun kaybolmasını sağlar Eğer öğede bir display alanı yoksa, en alttaki stilin sonuna tıklayarak kendi stilinizi de ekleyebilirsiniz.
Element inspector ile deney yaparsanız, web sitesindeki hemen hemen her bilgiyi değiştirebileceğinizi göreceksiniz; buna içerik de dahildir. Ancak unutmayın, bu değişiklikler sadece sizin tarayıcı pencerenizde geçerlidir ve sayfayı yenilediğinizde her şey eski haline döner.
Developer Araçları- Hata Ayıklayıcı
Geliştirici Araçları – Debugger (Hata Ayıklayıcı)
Bu panel, JavaScript kodlarını hata ayıklamak için kullanılır ve web geliştiricilerinin bir şeyin neden düzgün çalışmadığını anlamasına yardımcı olur. Ancak sızma testi uzmanları (pentester) olarak biz de JavaScript kodunun derinliklerine inmek için bu aracı kullanabiliriz. Firefox ve Safari tarayıcılarında bu özellik Debugger, Google Chrome’da ise Sources (Kaynaklar) olarak adlandırılır.
Acme IT Support web sitesinde Contact (İletişim) sayfasına tıklayın. Sayfa her yüklendiğinde ekranda hızlı bir şekilde kırmızı bir flaş göründüğünü fark edebilirsiniz. Bu kırmızı flaşın ne olduğunu ve içinde ilginç bir şey olup olmadığını anlamak için Debugger sekmesini kullanacağız. Bir “kırmızı nokta”yı debug etmek gerçek dünyada bir sızma testi uzmanının yapacağı bir şey değildir; ancak bu örnek, bu özelliği kullanmayı öğrenmemizi ve Debugger aracına aşina olmamızı sağlar.
Debugger sekmesinde, sol tarafta mevcut web sayfasının kullandığı tüm kaynakların bir listesini görürsünüz. assets (varlıklar) klasörüne tıklarsanız, flash.min.js adlı bir dosya göreceksiniz. Bu dosyaya tıkladığınızda içeriği görüntülenir.
JavaScript dosyalarını görüntülerken genellikle her şeyin tek bir satıra sıkıştırılmış olduğunu fark edersiniz. Bunun nedeni dosyanın minify (küçültülmüş) olmasıdır; yani dosya boyutunu azaltmak için tüm biçimlendirme (tablar, boşluklar ve satır sonları) kaldırılmıştır. Bu dosya da bir istisna değildir; ayrıca obfuscate (kasıtlı olarak okunması zor hale getirme) edilmiştir, bu da kodun diğer geliştiriciler tarafından anlaşılmasını ve kopyalanmasını zorlaştırır.
Kodu biraz daha okunabilir hale getirmek için Pretty Print (Güzel Yazdırma) seçeneğini kullanabiliriz. Bu seçenek genellikle { } şeklinde görünür ve kodu daha düzenli hale getirir. Ancak obfuscation nedeniyle kod hâlâ tamamen anlaşılır olmayabilir.
Dosyanın en altına doğru kaydırdığınızda şu satırı göreceksiniz:
Kod:
flash['remove']();
Eğer yukarıdaki kodun bulunduğu 110. satıra tıklarsanız, o satırın maviye döndüğünü göreceksiniz.
Developer Araçları- Ağ
Geliştirici Araçları – Network (Ağ)
Developer Tools içindeki Network (Ağ) sekmesi, bir web sayfasının yaptığı tüm harici istekleri takip etmek için kullanılabilir. Network sekmesine tıklayıp sayfayı yenilerseniz, sayfanın talep ettiği tüm dosyaları görebilirsiniz.
Bunu Contact (İletişim) sayfasında deneyin; liste çok fazla dolarsa, sağ üstte bulunan çöp kutusu (trash can) simgesine basarak listeyi temizleyebilirsiniz.
Network (Ağ) sekmesi açıkken iletişim formunu doldurup Send Message (Mesaj Gönder) butonuna basmayı deneyin. Network sekmesinde bir olay (event) oluştuğunu göreceksiniz; bu, formun arka planda AJAX aracılığıyla gönderilmesidir.
AJAX, bir web uygulamasında sayfanın mevcut durumunu bozmadan, arka planda ağ verisi gönderip almayı sağlayan bir yöntemdir.
İsteği incelediğinizde, istek başlıklarını (request headers), çerez (cookie) bilgilerini ve HTML yanıtını (response) görebileceksiniz. Bunlar, daha fazla keşif (enumeration) ve istismar (exploitation) sürecinde size yardımcı olur.
Developer Araçları- Depolama
Storage (Depolama) Sekmesi
Developer Tools içindeki Storage (Depolama) sekmesi, bir web sitesinin tarayıcınızda sakladığı verileri görüntülemenize ve yönetmenize olanak tanır. Bu veriler istemci tarafında (client-side) saklanır ve manuel bir sızma testi sırasında yararlı olabilecek hassas veya ilginç bilgiler içerebilir. Sızma testi uzmanları olarak tarayıcı depolamasını kontrol etmek, uygulamanın kimlik doğrulama (authentication), oturum (session) verileri, kullanıcı tercihleri ve diğer saklanan değerleri nasıl işlediğini anlamamıza yardımcı olur.
Storage (Depolama) sekmesi aşağıdaki önemli seçenekleri içerir:
- Local Storage: Tarayıcı kapatılsa bile kalıcı olarak veriyi tarayıcıda saklar.
- Session Storage: Veriyi geçici olarak, yalnızca tek bir tarayıcı sekmesi/oturumu için saklar.
- Cookies (Çerezler): Sunucu tarafından gönderilen ve tarayıcıda saklanan küçük veri parçalarıdır; genellikle oturum ve kimlik doğrulama (authentication) için kullanılır.
- Cache Storage: Görseller, scriptler ve API yanıtları gibi önbelleğe alınmış kaynakları daha hızlı yükleme için saklar.
Bu genellikle oturum kimlikleri (session identifiers), kullanıcı tercihleri ve bazen de kimlik doğrulamayla ilgili token’ları içerir. Çerezler ayrıca önemli güvenlik bayraklarına (security flags) sahiptir. HttpOnly bayrağı, JavaScript’in çereze erişmesini engeller ve bu sayede XSS saldırılarına karşı koruma sağlar.
Secure bayrağı, çerezin yalnızca HTTPS üzerinden gönderilmesini garanti eder. SameSite özniteliği ise saldırıları azaltmaya yardımcı olur.
Çerezleri dikkatlice incelemek, uygulamanın oturumları nasıl yönettiğini ve herhangi bir güvenlik en iyi uygulamasının eksik olup olmadığını ortaya çıkarabilir.
Okuduğunuz için teşekkür ederim






















