- Katılım
- 2 Ocak 2026
- Mesajlar
- 106
- Tepkime puanı
- 122
- Puan
- 43
F12’den Derine: JavaScript Kod Analizi ile Sistem Çözümleme
https://zekikayaalp.medium.com/?sou...7635de---------------------------------------
Bir web uygulamasına baktığınızda çoğu kişi sadece arayüzü görür.
Bir pentester ise F12’ye basar.
Ve o anda:
Sistemin nasıl çalıştığını,
Verinin nereden geldiğini,
Ve en önemlisi nerede hata yapıldığını görmeye başlar.
Bu yazıda size F12’nin arkasındaki dünyayı göstereceğim. Yazının sonunda ise sana ufak bir görev verip tüm bu teorik bilgileri pratiğe dökmeni isteyeceğim.
NOT: Bu yazının sonunda f12 ile ilgili artık kafanızda herhangi bir soru olmayacak ve hedefe koyduğunuz bir sitenin pentestini yaparken f12 ile neler yapabileceğinizi kavramış olacaksınız.
Fonksiyon ismi sızmış mı?
js data barındırıyor mu?
Gizlenmiş panel var mı?
Consolda token basıyor mu?
hassas dosya yapıları nerede saklanıyor?
XHR/FETCH Bizim için neden önemlidir?
Session bilgileri ve kullanıcı verisi var mı?
Application bölümünde nasıl bilgiler mevcuttur?
Gibi bit çok kritik soruya cevap bulacaksınız..
Bismillah..
Bu gördüğünüz ekran herhangi bir sitede F12 tuşuna basıldığında karşımıza çıkan ekrandır. Burası frontend’in ürünüdür.
Görselde görmüş olduğunuz başlıkları tek tek ele alıp her birinin bir pentester için ne kadar önemli veriler ve developer hataları barındırabileceğini inceleyeceğiz.
1-ELEMENTS
Burası tarayıcının render ettiği canlı HTML’dir.
Burada:
Server’dan gelen veri,
JS ile değiştirilen yapı,
ve Kullanıcının gördüğü arayüz burada birleşir.
Elements bölümünde neler vardır?
Elements sayfanın HTML yapısını barındırır.
Sayfanın yapısı ve tüm div, input, button elementleri vardır.
Bu kısımda gizlenip gösterilmesi gereken etiketler de barındırıyor
(display:none)
Burası aynı zamanda div etiketi içerisinde veri bağlamlarını da barındırıyor.
Bu bağlam şu şekilde gösterilir:
<div data-role=”admin”>
Developer ELEMENTS Kısmında nasıl bir hata yapabilir?
1- Bir üst kısımda gizli/açık verileri de barındırdığını söyledik
Developer bazen kullanıcının veriyi görmediğini sanarak display içerisinde bazı verileri ele verebilir
örneğin;
<div style=”display:none”>
Admin Panel
</div>
2- Kontrolün frontende bırakıldığı zamanlarda yetki deşifresi olabiliyor.
<button onclick=”if(user.role==’admin’) deleteUser()”>
Burada button etiketi içerisinde admin kullanıcısının kişiyi silme yetkisinin açık bırakıldığı bilgisi mevcut
3- Hassas verileri DOM’a koyma gibi hatalar da olabiliyor.
<div data-user-id=”123" data-email=”test@mail.com”>
4- Hidden inputlara güvenmek
<input type=”hidden” name=”role” value=”user”>
tamam da kanka ne alaka?
Genel itibariyle bu 4 madde bizler için elementin kıymetini ortaya koyuyor. Sen burayı incelerken bu maddelere şu soruları sor:
Tüm bunları filtreleme kısmını kullanarak yapabilirsiniz.
Şimdi geçelim CONSOLE kısmına burada nasıl veriler var ve bizim işimize ne yarayabilir ona bakalım
2-CONSOLE
Burası canlı çalıştırma ortamıdır. Burada LOG’lar bulunur.
CONSOLE bölümünde JSON benzeri veri yapıları bulunuyor.
user = {
id: 1,
role: “admin”
}
gibi nesneler canlı olarak burada işlenir.
Fonksiyonlar burada işlenir
function getUser() {}
getUser()
LOG KAYITLARI
console.log (kayıt yazdırma)
console.error (hata)
console.warn (uyarı)
ERRORS(HATALAR):.
Syntax error (yazım hatası)
Type error (tip hatası)
Reference error (tanımsız değişken)
CONSOLE kısacası Sistemin elle kontrol edildiği yerdir ama sadece log okunan bir yer değildir.
Aynı zamanda sistemin aktif olarak manipüle edilebildiği bir alandır.
Örneğin:
Global değişkenler burada çağrılabilir,
Fonksiyonlar manuel olarak tetiklenebilir,
ve tarayıcıda saklanan veriler okunabilir.
Bu nedenle Console, bir pentester için pasif değil aktif bir analiz alanıdır.
3-SOURCES(Kaynaklar)
Source: Uygulamanın tüm JavaScript mantığı
Bu kısımda JavaScript dosyaları bulunur:
Belirli değişkenler burada takip edilir.
4-Network
Network, İstemci ile Sunucu arasındaki tüm iletişimi barındırır.
Network bölümü sadece istekleri görmek için değil,
sistemin gerçekten nasıl davrandığını anlamak için kullanılır.
Frontend size bir hikaye anlatır,
ancak Network size gerçeği gösterir.
Bu yüzden bir pentester için en güvenilir kaynak Network panelidir.
İletişim derken akla ilk gelen HTTP istekleri oluyor.
İstek başlıkları( headers) barındırır
Request headers:
Response headers
Initiator
Hangi js’nin isteği başlattığını gösterir
XHR/FETCH
API çağrılarını barındırır.
Network sistemin gerçekte ne yaptığını gösterir ve en önemli işlemlerin döndüğü yerdir.
F12'de biraz daha derine inelim
ulaann veeyyysss
Appliaciton Bölümü
Tarayıcının veri hafızası (client-side storage — istemci tarafı depolama)
LocalStorage (Yerel Depolama)
localStorage.setItem(“token”, “abc123”)
Burada:
SessionStorage (Oturum Depolama)
Burada geçici veriler bulunur. Geçici olmasından kaynaklı tarayıcı kapanınca silinir ve sadece o tab için geçerlidir.!!! Cookies (Çerezler)
En kritik alanlardan biridir çünkü kullanıcıya ait özel kimlik bilgilerini auth tokeb ve traking data yani izleme verisi barındırırIndexedDB
Gelişmiş veri tabanınıdır. Burada büyük veriler bulunur ve nesne deposudur.içerisinde cache verileri ve büyük JSON yapıları bulunur
Service Workers (Servis Çalışanları)
arka planda çalışan scriptlerdir.cache yönetimi ve request yakalama burdan yapılır.
Cache Storage (Önbellek Deposu)
Request/response cacheFrames (Çerçeveler)
iframe verileriÖzetleyecek olursak ; bu bölüm Sistemin kullanıcı hakkında neyi hatırladığını gösterir
Burada pentester’ın sorması gereken sorular şunlardır:Bir pentester F12'yi tek tek paneller olarak kullanmaz.
Asıl güç bu panelleri birlikte kullanmaktan gelir.
ÖNEMLİ !!!
Network’te bir endpoint bulunur,
Sources bölümünde bu isteği tetikleyen kod analiz edilir,
Console üzerinden bu fonksiyon test edilir.
Bu üçlü birlikte kullanıldığında,
sistem sadece gözlemlenmez, çözülür.
Artık tüm yazılarımda şöyle yazı sonu görevi vereceğim. Pratiğe geçmeyen teori unutulur ve anlamsızlaşır.
ÖDEV:
Herhangi bir site açın ve sadece F12 kullanarak aşağıdaki sorulara cevap bulun:- Hangi API endpoint’leri kullanılıyor?
- Kullanıcıya ait veriler nerede tutuluyor?
- Gizlenmiş bir panel veya element var mı?
- Console üzerinden erişilebilen bir fonksiyon bulunabiliyor mu?
- Network’te yetki kontrolü zayıf bir istek var mı?
artık sadece kullanıcı değil, sistemi analiz eden bir pentester gibi düşünüyorsunuz demektir.
Ödevi yaptıktan sonra yorumlarda belirtirsen çok motive olurum dostum
