Web Nasıl Çalışır?

Omer Gunesacar
13 min readJun 19, 2023

--

Merhaba, bu yazıda web’in temel çalışma mantığından bahsedeceğim. Ağa bağlanan cihazın ilk IP adresini almasından DNS’in çalışmasına, TCP ve TLS el sıkışmasından HTTP Request — Response döngüsüne ve son olarak Tarayıcıların çalışmasına değineceğiz.

Öncelikle birkaç terime göz atalım.

Internet: Cihazlar arasındaki bağlantıyı sağlayarak veri iletişimini sağlayan en büyük ağdır.
Web: Internet üzerindeki verilerin paylaşıldığı, birbiriyle bağlantılı web sayfalarından oluşan bir sistemdir.

IP Adresi: Ağlara bağlı cihazların, ağ üzerinden birbiri ile iletişim kurmalarını sağlayan unique (benzersiz) bir adrestir. IPv4 adresi 4 oktetten oluşur. (A.A.A.A: Her bir A bir oktettir)
DHCP: Dynamic Host Configuration Protocol, ağdaki cihazlara otomatik olarak IP adresi, ağ geçidi ve alt ağ maskesi bilgilerini atayan bir iletişim protokolüdür.
Ağ Geçidi (Gateway): Bir cihazın bri ağdan diğerine iletişim kurmasını sağlayan bir ağ donanımıdır. Genellikle bilgisayarlar ağ geçidini kullanarak internete erişirler. Gateway, local network ile diğer ağlar arasında bir nevi köprü görevi görür. Genellikle evlerimizdeki ağ geçidi, ISP tarafından bizlere verilen modemdir.
Alt Ağ Maskesi (Subnet Mask): Bir IP adresinin network bölümünü ve host bölümünü ayırmak için kullanılır. Subnet Mask, IP adresnin hangi kısımlarını ağ kimlik bilgilerini temsil ettiğini belirtir. Subnet Mask, bir cihazın yerel ağ içerisinde diğer cihazlarla doğru bir iletişim kurmasını sağlar.

DHCP Nasıl Çalışır?

Bilgisayar ağa ilk bağlandığında kendine bir IP adresi ister ve elde etmek için broadcast mesaj yayınlar. Bu mesaj “DHCP Discover” paketidir ve bu mesaj broadcast olarak yani ağdaki tüm cihazlara gönderilir.

DHCP serveri, DHCP Discover mesajını alır ve DHCP Offer (Teklif) mesajıyla yanıt verir. DHCP serveri, IP adresi havuzundan kullanılmayan boş bir IP adresi seçer ve bu IP adresini discover yapan cihaza önerir. DHCP Offer mesajı MAC adresi ile birlikte yine broadcast olarak gönderir.

Bilgisayar, Offer mesajını alır ve önerilen IP adresini kabul eder. Kabul ettikten sonra DHCP sunucusuna DHCP Request (istek) mesajı gönderir. Bu mesajda da kabul ettiği IP adresini belirtir.

DHCP sunucusu, bu istek mesajını alır ve IP adresininin kullanılabilir olduğunu doğrular. Daha sonra isteği yapan bilgisayara bir DHCP Acknowledgement (ACK, Kabul) mrsajını gönderir. Bu mesaj ağ yapılandırma bilgilerini içerir. Bilgisayar ise bu DHCP ACK mesajını alır ve mesajdaki ağ yapılandırmasını uygular.

Artık bilgisayarımızın bir IP Adresi var. Browserimizi açtık ve www.google.com yazdık. Bundan sonra neler olacak? Peki ya browserimiz www.google.com'un neresi olduğunu nasıl biliyor?

Öncelikle, URL’nin ne olduğuna bakalım. URL (Uniform Resource Locator), Tekdüzen Kaynak Bulucu, internetteki kaynakların konumu belirlemek için kullanılan bir adresleme sistemidir, bir nevi websitelerin nicknameleri diyebiliriz.

Internetteki kaynaklar? Web sayfaları, dokümanlar (pdfler, wordler etc.), resimler, videolar…
Uniform anlamı ne? Internetteki kaynakların tutarlı ve standart br biçimde bulunması.

  1. Protokol: Kaynağa nasıl erişileceğini belirten protokoldür. Browserimiz ile WebServeri arasındaki iletişimi sağlarlar. Üstteki resimde kullanılan protokol HTTPs (Hyper-Text Transfer Protocol)’dir. Bu protokolü daha sonra yakından inceleyeceğiz.
  2. Subdomain (Alt Alan Adı): Domainlerin (Ana Alan Adı) altında oluşturulan daha spesifik bir alt alan adıdır. Domainlerin önüne eklenir. Websitelerini daha iyi organize etmek veya erişimş kolaylaştırmak için kullanılabilirler.
  3. Domain Name (Sunucu adı): Kaynağın bulunduğu sunucunun adını belirtir.
  4. Port: Serverdaki kaynaklara erişim için kullanılan belirli bir ağ bağlantı noktasıdır. Yukarıdaki resimde de görelebileceği üzere, HTTP protokolü genellikle port 80 üzerinden çalışır. Port belirtilmezse default port numarası kullanılır.
  5. Path (Yol): Sunucu üzerindeki belirli bir kaynağın yerini belirtir. (/products/page.html gibi)
  6. Query parameter (Sorgu Paramtersi): URL’deki ‘?’ karakterinden sonra belirtilr ve browserimiz tarafından sunucuya veri iletmek için kullanılır. Query parametreleri, URL’ye ek veri eklemek ve sunucuya istemci tarafından bilgileri iletmek için kullanılır.
  7. Fragment: URL’nin sonunda ‘#’ karakterinden sonra kullanılır ve HTML’lerde belirli bir bölüme atofta bulunur. Genellikle web sayfaları içinde belirli bir bölüme doğrudan gitmek için kullanılır.

Şimdi ise gelelim DNS’e.

Domain Name System

Alan Adı Sistemi, basitçe, internetteki domainlerin (alan adlarının) IP adreslerine çeviren sistemdir. DNS, insanlar tarafından kolay hatırlanabilen domain adlarının bilgisayarlar tarafından anlaşıan IP adresleriyle ilişkilendirilmesini sağlar. Aslında DNS için internetin telefon rehberi diyebiliriz. Telefonla birini arayacaksak numarasını ezberleyip aramak yerine rehbere adını yazarak ararız. Browserimizda da bir websitesine gideceksek IP adresini değil, domain adını yazarız.
DNS’in çalışma mantığını anlamak için öncelikle DNS’in temel bileşenlerine bakalım.

DNS Sunucuları

DNS sunucuları, domainlerin IP adreslerine çözümlenmesini hiyerarşik bir yapıda sağlayan sistemdir.

DNS Recursor: Recursive Resolver veya Recursive DNS olarak da adlandırılan bu sistem, DNS sorgularını çözmek ve sonuçları istemciye iletmek için kullanılan bir DNS sunucusudur. DNS Recursor, DNS sorgusu aldığında gerekli bilgileri hiyerarşik olarak ilgili DNS sunucularından alır ve sonuçları istemciye iletir. DNS Recursoru aslında kütüphaneci olarak düşünebiliriz. Kütüphanede belirli bir kitabı bulmak için kütüphaneciden yardım alırız.
Root Nameserver (Kök DNS sunucuları): Internetin en üst düzeyindeki DNS sunucularıdır. Bu sunucular tüm alan adı sistemlerine (TLD) ait bilgilerin bulunduğu sunuculardır. Diğer bütün DNS sunucuları, bağlı oldukları Root DNS serverlerine domain hangi sunucuda ve hangi IP adresinde olduğu bilgisini verir. Kütüphanelerdeki dizinler gibi düşünülebilir yani aslında kitapların spesifik konumlarına referans olarak hizmet eder.
Top-Level Domain Servers (Üst Düzey DNS sunucuları): TLD, alan adlarının sonunda bulunan uzantılarına (.com, .org, .net, .edu gibi) verilen isimdir. Bu sunucular, belirli bir TLD’ye ait alan adlarıyla ilgili IP bilgilerini verir. Kütüphane örneklerimizde olduğu gibi, TLD kütüphanelerdeki belirli bir kitap rafı gibi düşünülebilir.
Authorative Nameserver (Yetkilendirilmiş DNS sunucuları): Belirli bir domainin IP adresine çözülmesi için yetkilendirilmiş DNS sunucularıdır. Bu sunucular domanin hangi IP adresinde bulunduğunun kaydını tutan asıl sunuculardır. Her alan adı, alan adının kaydını tutan bir Auth. DNS sunucularına sahiptir.

https://www.hostinger.in/tutorials/what-is-dns

Örneğimiz için “www.example.com” adresine gitmek istediğimizi düşünelim.

  1. Tarayıcımızı açtık ve arama kutusuna istediğimiz adresi yazdık ve bir istekte bulunduk.
  2. Bu istek sonrasına DNS Resolver’a gelir ve genellikle DNS Resolver, ISS (Internet Servis Sağlayıcı) tarafından kontrol edilir. Diyelim ki gitmek istediğimiz sitenin bilgileri önbelleğimizde (cache) yok. O zaman Resolver bu isteği bir sonraki DNS sunucusuna yani Root nameserverine iletir.
  3. Root DNS sunucusu istediğimiz bilgiyi tutmaz ama nerede bulacağımıza dair ipucu veriri. Resolver’dan aldığı isteği inceler ve top-level alan adını belirler. Sonra Resolver’a gitmesi gereken TLD nameserverini söyler. Bu durumda gitmesi gereken yer “.com” TLD nameserveridir.
  4. Bu TLD nameserverine gelen Resolver, TLD tarafından eşleşen IP adresinin hangi Authoritative Nameserverinde bulunduğu bilgisini alacak.
  5. Authoritative DNS’de ise artık domain ile ilgili bütün bilgilerin bulunduğu sunucudur. Domainin IP adresi ve DNS kayıtlarının tutulduğu yerdir. Ayrıca Resolver DNS caching yaparak bu bilgileri tutar ve bütün bu adımları tekrardan yapm zahmetinden bizi kurtarır.

DNS Kayıtları

DNS, alan adlarını IP adreslerine çevirmek için kullanılan kayıtları barındırır. DNS kayıtları (veya zone kayıtları) Authoritative DNS sunucularında tutulur ve domain hakkında bilgiler (IP adresi nedir veya o domain için gelen requesti nasıl yöneticiği bilgisi) yer alır. Bu kayıtlar aslında DNS syntax ile yazılmış birer text dosyasıdır. Ayrıca her DNS kaydının sunucunun ne kadar sıklıkla bir kaydı yenilediğini belirten bir TTL (Time-to-Live) değeri vardır.

  1. A Kaydı: Bir domainin IPv4 Adresinin tutulduğu kayıttır.

2. AAAA Kaydı: Bir domainin IPv6 Adresinin tutulduğu kayıttır.

3. CNAME Kaydı (Canonical Name): Bir alan adının başka bir alan adına yönlendirilmesini sağlar. Bu kayıt IP adresi saklamaz. Örneğin “www.example.com” adresini “example.com” adresine yönlendirebiliri.

4. MX Kaydı (Mail Exchanger): Bir alan adına bağlı e-posta sunucularını belirtir. MX kaydı, gelen e-postaların doğru sunucuya yönlendirilmesini sağlar. Örneğin, eğer ki bir MX kaydı “alanadi.com” için oluşturulmuşsa, maiileri “@alanadi.com” üzerinden alabiliriz.

5. TXT kaydı (Text): Metin tabanlı verileri depolayan kayıttır. Amacı genellikle, SPF (Sender Policy Framework) kaydı olarak kullanılır ve e-posta alışverişinde yetkili e-posta sunucularının IP adreslerini tanımlamak için kullanılır.

6. NS kaydı (nameserver): Bir alan adı için yetkilendirilmiş yanı authoritative DNS sunucularını belirtir.

Peki eğer büyük bir şirketin bir websitesi için birden fazla IP adresine sahipse DNS bunu nasıl belirliyor?
Bu gibi problemler için genellikle Load Balancing veya DNS Round Robin gibi yöntemler kullanılıyor.

Load Balancing, trafik yükünün farklı IP adreslerine dengeli bir şekilde dağıtılmasını sağlar. Bunun için, şirketin sunucuları genellikle bir Yük Dengeleyici (Load Balancer) kullanarak bir araya gelir. LB, gelen istekleri farklı IP adreslerine yönlendirerek yükü dengeler.

DNS Round Robin yöntemi ise DNS sunucusunun, aynı alan adı için birden fazla IP adresini döndürerek yükü dengeler. DNS sunucusu her sorguda IP adreslerini sırayla döndürür, böylece her client farklı IP adresine yönlendirilir.

Artık “www.example.com" adresine gidebiliriz. Peki bundan sonra neler oluyor?

Şimdi ise TCP Handshake, TLS handshake, HTTPs request-response döngüsünü inceleyelim.

TCP Handshake

TCP three-way handshake, iki cihaz arasında (genellikle client/server arasında) güvenilir bir iletişim kanalı kurulması ve veri iletiminin başlatılması için kullanılır. Aslında bu el sıkışma, kimin kim olduğunu belirlemede kullanılır. Zaten biz insanlar da birbirimizi tanımak için el sıkışırız. Bu olay şöyle oluyor:

Öncelikle Client, işletim sistemi tarafından rastgele oluşturulan bir sequence number ile sunucuya SYN flagi = 1 olan (Flags: 0x002 (SYN)) bir paket gönderir. Buradaki sequence numarasına kısaca 12 diyelim. Bu sayı sayesinde işlemler sırasıyla gerçekleşecek. Buradaki 0x002 hexadecimal bir sayıdır ve decimal sayılarda 2'ye eşittir zaten resimde de görüleceği üzere SYN flagi binary(10) yani 2'dir.

Bir sonraki adımda sunucu, clientin gönderdiği paketi alır ve göndereceği paketi hazırlar. Paketi SYN ve ACK flaglari “1” olacak şekilde hazırlar. Ayrıca, clientten gelen paketin sequence numarasına 1 ekleyerek göndereceği paketin ACK Number’ına yazar. Bu durumda gidecek paketin ACK numarası 13 olur ve ayrıca, sunucunun OS’i rastgele bir sequence number üretir. SYN + ACK paketi resimdeki gibidir.

Son adımda ise sunucudan gelen paketi alan istemci, sunucuya gidecek paketi hazırlar. Bu paketin yalnızca ACK flagini “1” olarak ayarlar. Ayrıca, sunucudan gelen paketin sequence numarasına bakar ve 1 ekleyerek göndereceği paketin ACK numarasına ayarlar. Üstteki resimde görüldüğü üzere sequence numarasına (…56) 1 ekler ve ACK numarasını …57 olarak ayarlar ve göndereceği paketin sequence numarasını ise sunucudan gelen paketin ACK numarası olarak ayarlar. Yani, istemciden sunucuya gidecek olan ACK Paketinin Sequence Number’i 13, ACK Numberi ise 57 olur.

TCP Handshake, veri iletimi öncesinde karşılıklı doğrulama ve senkronizasyon sağlar. Bu sayede istemci ve sunucu arasında güvenilir bir bağlantı kurulur.

Bağlantıyı da kurduk. Peki bundan sonra ne var? Şimdi, sıra bağlantıyı şifrelemede!

TLS (Transport Layer Security) Handshake

TLS, güvenli bir iletişim kanalı sağlamak için kullanılan bir şifreleme protokolüdür. Temel olarak client (browser) ve server (website) arasında şifreli bir iletişim kanalı kurarak güvenli iletişimi sağlar. TLS, websiteleri, e-posta sunucuları, anlık mesajlaşma uygulamaları gibi vb. iletişim protokolleri arasındaki iletişimi korumak için kullanılır.

TLS el sıkışması ise bir sitemci ve sunucu arasında güvenli iletişim kanalının kurulması için gerçekleştirilen adımlar bütünüdür. TLS handshake, hem istemcinin hem de sunucunun kimlik doğrulanmasını sağlar, iletişimde kullanılacak şifreleme algoritmasını belirler ve güvenli bir anahtar değişmi yapar.

https://www.cloudflare.com/learning/ssl/what-happens-in-a-tls-handshake/
  1. Istemci sunucuya ‘Client Hello’ mesajı göndererek el sıkışmasını başlatır. Bu mesaj, kullanılacak TLS versiyonunu, desteklenen şifreleme algoritmaları ve rastgele bir stringten oluşan ‘client random’u içerir.
  2. Istemciye yanıt olarak sunucu, ‘server hello’ mesajını gönderir. Bu mesaj, sunucunun sertifikasını, sunucunun seçtiği şifreleme algoritmasını ve ‘server random’ sayısını içerir.
  3. Istemci, sunucunun sertifikasının Certificate Authority tarafından verildiğini doğrular. Bu, sunucunun domainin gerçek sahibi olduğunu kanıtlar.
  4. The premaster key, istemci tarafından rastgele oluşturulan bir stringtir. The premaster key, public key ile encrypt edilmiştir ve sadece sunucu tarafından private key kullanılarak kırılabilir. Istemci bu public key’i sunucunun sertifikasından alır.
  5. Sunucu premaster secret’i, private key’i kullanarak decrypt eder.
  6. Hem istemci hem de sunucu ‘client random, ’server random’ ve premaster secret’i kullanarak session key elde ederler. Istemci de sunucu da aynı çıktıyı alırlar.
  7. Istemci, session key ile encrypt edilmiş ‘finished’ mesajını sunucuya, sunucu ise yine session key ile encrpyt edilmiş ‘finished’ mesajını istemciye göndererek el sıkışmayı tamamlamış olurlar.

Üstte anlatılan TLS el sıkışması asimetrik şifreleme (public ve private key kullanımı) kullanılarak kurulmuştur.

Certificate Authority: Sertifika Yetkilisi, dijital sertifikaları oluşturma, dağıtma ve yönetme yetkisine sahip bir kurumdur.
Cipher suite, TLS veya Secure Socket Layer (SSL) protokollerinde kullanılan şifreleme, kimlik doğrulama ve anahtar değişimi algoritmalarının kombinasyonunu ifade eder. Bir cipher suite, istemci ve sunucu arasındaki güvenli iletişimde hangi algoritmaların kullanılacağını belirler.

Bağlantımız artık şifrelendi. Ama, veri akışı için bize bir protokole daha ihtiyacımız var.

HTTP Request — Respone Cycle

Hypertext transfer protocol (Hiper Metin Transfer Protokolü), web sunucuları ile istemciler arasındaki iletişimden sorumlu olan bir uygulama katmanı protokolüdür. HTTP, basitçe, websitelerini yüklemek için kullanılır. HTTP, bir alt katmandaki TCP üzerine kurulmuş olup request — response döngüsüne göre çalışır. Default olarak HTTP port 80'de, HTTPs ise port 443'de çalışır.

HTTP request — response döngüsü, client’in server’dan bir kaynağı (HTML sayfası, resim, pdf vb.) request eder (yani talep eder) ve sunucu bu isteğe bir ‘response’ döner. Bu döngü aslında HTTP’nin temel mimarisidir. Buradaki client, yani isteği atan, kısacası tarayıcımız, server ise cevabı, responseyi veren yerdir.

HTTP mesajları, clientler ve sunucular arasındaki iletişimde veri alışverişini sağlar. Request mesajları, clientten sunucuya belirli bir kaynağı talep etmesibni sağlarken response mesajları yanıt olarak istenilen veriyi ve durum kodunu (status code) verir.

HTTP Request

GET /path/ HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.5735.110 Safari/537.36
Accept: text/html, application/json
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/json
Cache-Control: no-cache
Connection: keep-alive
Referer: https://www.google.com/
  1. HTTP Method, clientin sunucu üzerinde nasıl bir işlem yapmak istediğini belirttiği bir komuttur. Client, sunucuya emir verir, sunucu buna bayılır. Burada GET methodu kullanılmıştır yani client, sunucudan bir kaynak almak istemektedir.
  2. Path, clientin sunucudan istediği kaynağın yerini belirtir.
  3. Version of the protocol, kullanılan HTTP protokolünün sürümünü belirtir.
  4. Host: Sunucunun adını belirtir.
  5. User-Agent: Isteği yapan istemcinin bilgilerini verir. (Tarayıcı adı, tarayıcı sürümü vs.)
  6. Accept: Istemcinin hangi medya tipini kabul edeceğini belirtir. (HTML ve Json)
  7. Accept-Language: Response için tercih edilen dili belirtir
  8. Accept-Encoding: Hangi encoding yönteminin kabul edildiğini belirtir. Bu durumda, gzip ve deflate yöntemiyle sıkıştırma işlemi yapılır.
  9. Content-type: Requst body’sinde taşınan verinin türünü belirtir.
  10. Cache-Control: Isteğin önbellekte ne olacağını belirten başlıktır. (Önbellekte tutulsun mu veya tutulacaksa ne kadar süreyle tutulacak bilgisi.)
  11. Connection: Istemci ve sunucu arasındaki bağlantının kontrolunu sağlar. Üstteki örnekte bağlantı sürekli olarak sürdürülür fakat close ise bağlantı her istek sonrası kapanır.
  12. Referer: Isteğin kaynak URL’sini belirtir.

HTTP Methods
GET: Sunucudan veri için kullanıılır.
POST: Sunucuya veri göndermek için kullanılır.
PUT: Sunucudaki veriyi tamamen değiştirmek için kullanılır.
DELETE: Sunucudaki veriyi silmek için kullanılır.
TRACE: Isteği geriye doğru izlemek için kullanılır.

HTTP Response

HTTP response, sunucuların istemciden aldığı isteğe karşılık olarak verdiği yanıttır. Sunucu, genellikle web sayfası, resim veya dosya vb. kaynakları istemciye gönderir.

  1. Status Line, HTTP response’nin statüsünü ve HTTP protokolünün versiyonunu belirtir.
  2. Date: Responsun oluşturulduğu tarihi belirtir.
  3. Server: Sunucunun adını ve versiyonunu belirtir.
  4. Content-Length: Response’un body kısmının byte cinsinden boyutudur.
  5. Content-Type: Response’un body’sinin türünü belirtir. Örnekte görüldüğü gibi body HTML formatındadır.
  6. Connection: Istemci ve sunucu arasındaki bağlantının kontrolunu sağlar. Üstteki örnekte bağlantıı her istek sonrası kapatılır.

HTTP Status Codes:
1XX — Informational (Bilgilendirici)
2XX — Success (Başarılı)
3XX — Redirection (Yönlendirme)
4XX — Client Error (Istemci Hatası)
5XX — Server Error (Sunucu Hatası)

HTTP vs HTTPS

Ikisi de client ve sunucu arasındaki bağlantıyı sağlayan protokollerdir fakat aralarındaki fark HTTPS’in TLS protokolünü kullanarak (Üstte anlatılan) bağlantıyı şifrelemesidir. Zaten HTTPS’deki S, Secure demektir.

E her şey iyi, güzel de bir siteye girdikten sonra ekranımızda gördüklerimizi aslında nasıl görüyoruz? Şimdi sahne sırası browserda (tarayıcı).

Browser (Tarayıcı)

Tarayıcılar, serverdan istediği kaynakların, ki bunlar genellikle HTML, foto veya PDF olabilir, görüntülenmesini sağlayan yazılımlardır. Bu kaynağın lokasyonu ise, üstte anlattığımız gibi, kullanıcı tarafından URL kullanarak belirtilir.

Tarayıcının High-Level Structure’i

Aşağıdaki fotoğraf tarayıcının ana bileşenlerini gösterir.

User Interface (Kullanıcı Arayüzü): Kullanıcının etkileşime girdiği, Geri ve İleri tuşu, Adres Barı, Refresh tuşu veya Bookmarklar gibi, yerlerdir. Yani ekranda gördüğümüz websitesi veya istediğimiz başka bir kaynaktan geriye kalan kısımdır.

Browser Engine (Tarayıcı Motoru): User Interface ile Rendering Engine arasında bir köprü hizmeti görer. Aslında bu hizmete ‘marshal’ deniyor. Marshal, farklı bileşenler arasındaki iletişimi, veri taşımayı ifade eder.

Rendering Engine (İşleme Motor): Istek yapılan kaynağın ekranda görüntülenmesinden sorumludur. Örneğin, Rendering Engine, HTML ve CSS kodlarını parse ederek, parse edilen içeriği ekran gösterir.

Parsing: Bir veri yapısını işleyen, analiz eden ve anlam çıkarmak için kullanılan bir işlemdir.

Networking: Tarayıcıların sunucularla iletişim protokollerini kullarak iletişim kurmasını sağlar. Örneğin, HTTP kullanarak web kaynaklarının transferini sağlar.

Javascript Interpreter: Javascript kodlarını parse eden ve çalıştıran bir bileşendir. Bu kodlar genelde websitelerinde embedded edilmiştir.

Embedded: Bir şeyi başka bir şeyin içine yerleştirme.

UI Backend: Kullanıcı arayüzünün (UI) arka planındaki bileşenlerdir.

Data Persistence / Storage: Verileri depolamaya yarayan katmandır. Tarayıcı, bilgisayarda kurulduğu klasöre database oluşturur ve cache, cookie ve yer imleri vb. bilgileri depolar.

Cache: Önbellek, daha önce gittiğimiz siteleri yerel olarak depolayan ve bu sayede sitelerin daha hızlı yüklenmesini sağlayan bilgilerdir. Browser’ın sunucuya yeniden bir request göndermesine gerek kalmadan sitelerin daha hızlı açılmalarını sağlar.
Cookie: Tarayıcıların kullanıcılar hakkında bilgi depolaması ve websiteleriyle olan etkileşimlerinin kişiselleştirmelerini sağlayan metin dosyalarıdır. Çerezler, oturum bilgisi, kişiselleştirilmiş reklamlar, sepete eklenen ürünler gibi kişisel bilgileri tutar.

Rendering Engine:

Temel amacı, istenilen kaynağı ekranda göstermektir. Default olarak rendering engine, HTML ve XML dokümanlarını ve resimleri gösterebilir fakat extension (uzantı) veya plug-inler kullanarak PDF gibi dokümanları da gösterebilirler. Bu yazıda sadece CSS kullanarak biçimlendirilen HTML ve resimlerin görüntülenmesini işleyeceğiz.

Farklı tarayıcılar farklı rendering engineleri kullanırlar: Firefox Gecko, Chrome ve Opera Blink ve Safari Webkit kullanır.

Main Flow (Ana Akışı)

Ana akışı gösteren şema:

Rendering Engine, HTML’i parse ederek Content Tree veya DOM Tree dediğimiz yapıyı oluşturur. DOM (Document Object Model), HTML dokümanının içerisindeki nesnelere erişmek ve üzerinde işlemler yapabilmemizi sağlayan modeldir. DOM tree (DOM ağacı) ise dokümanın içeriğindeki nesnelerin ilişkilerini hiyerarşik ve ayrıntılı şekilde modellememize yarayan bir nevi soy ağacıdır.

Rendering engine aynı zamanda CSS dokümanlarını da parse ederek “Render Tree”yi oluşturur. Bu tree, DOM nesnelerinin nasıl görüneceğini belirler. CSS’i parse ederek oluşturulan Style Rules ve HTML kullanılarak bu tree elde edilir. Render tree, renk ve boyut gibi görsel nitelikler taşıyan dikdörtgenler içerir. Bu dikdörtgenşer ekran görüntülenmek için doğru bir sırada olmalıdır..Firefox, render tree’deki elementlere frames derken webkit renderer veya render object der.

Bu oluşturulan render tree daha sonrasında “layout” (düzen) sürecinden geçer. Frame ya da renderer oluştutulduğunda bir pozisyonu, rengi veya boyutu yoktur. Bu süreç, her node’a belirli koordinatlar vererek ekranın neresinde gözükeceğini belirler. Node (düğüm), veri yapılarında bir nesneyi temsil eden ve diğer düğümlerle bağlantılı olan bir yapı birimidir.

Bir sonraki adım “painting” aşamasıdır ve bu aşamada Render Ağacı gezilir ve her bir node UI Backend katmanı kullanılarak çizilir ve boyanır. Renderir burada içeriği ekranda göstermek için “paint()” fonksiyonunu çağırır.

Rendering engine, daha iyi bir kullanıcı deneyimi sağlamak amacıyla mümkün olacak en kısa sürede içeriği ekrana bastırmaya çalışır. Engine, HTML parsing’in tamamen bitirilmesini beklemeden render tree’yi oluşturmaya başlar.

Safari’nin kullandığı Webkitin ana akışı:

Temel olarak bir browser’in çalışma mantığı bu şekildedir.

References:
https://www.cloudflare.com/learning/dns/what-is-dns/
https://web.dev/howbrowserswork/
https://www.cloudflare.com/learning/ssl/what-happens-in-a-tls-handshake/
https://wiki.wireshark.org/TCP_3_way_handshaking.md
ChatGPT :)
Ve daha birçok kaynak.

Umarım araştırmalarınıza faydası dokunur.

--

--

Omer Gunesacar
Omer Gunesacar

Written by Omer Gunesacar

EE Engineer interested in Cyber Security.

No responses yet