Hacker DirectoryHacker Directory
Öğrenmeye devam et
ENHTML kaydet ↓

WEB / PROTOCOL LAB

HTTP ve state’in sınırlarını aç.

HTTP sonucunu browser state’iyle karıştırmadan izle. Ardından Cookie ve Set-Cookie alanlarını ayrı ayrı incele.

Mesaj ile state değişimini ayrı izle.

HTTP response’un browser sonucuna nasıl bağlandığını, cookie jar ile session store’un neden ayrı kaldığını incele.

  1. Request akışını adımla

    İlk sahnede İleri ile request ve response adımlarını takip et. Aktif rolün state’ini oku; response receipt ile browser’ın sonraki işini birbirine karıştırma.

  2. Response ve cookie alanlarını karşılaştır

    Senaryo ve adımlar bölümünden diğer sonucu seç. Artifact okuyucusunda HTTP response, Cookie ve Set-Cookie örneklerini aç; status, body ve attribute’ların nerede bulunduğunu karşılaştır.

  3. State’in sahibini bul

    İkinci sahnede cookie jar ve server session store adımlarını izle. Başka bir rolü incele ile iki tarafın state’ini karşılaştır; ayrıntı gerekiyorsa bağlantılı cookie veya session dersine geç.

Bir HTTP sonucunu, browser’ın yerel adımını ve server’daki session kararını ayrı ayrı açıklayabilirsin; mesajın gelmesini bütün işin tamamlanması saymazsın.

Hareket olmadan bütün senaryoları oku

Kayıt bulundu

  1. Önce browser’da niyet var

    Kitap kartını açma niyeti henüz server’a ulaşmadı. Diğer actors bu isteği bilmiyor.

    Browser
    Kart bekliyor
    Application
    Request yok
    Local data source
    Query yok
  2. HTTP request ulaştı

    Method ve resource seçimi application’a ulaştı. Henüz kayıt okunmadı.

    Browser
    Response bekliyor
    Application
    GET /api/book alındı
    Local data source
    Query yok
  3. Handler yerel olarak çalışır

    Application route’u seçer, girdiyi yorumlar ve okuma işlemini hazırlar. Bu aşama yeni bir ağ mesajı değildir.

    Browser
    Response bekliyor
    Application
    Handler → readBook
    Local data source
    Query yok
  4. Okuma persistence sınırına ulaştı

    Bu örnekte data access aynı process içindeki local çağrıdır. Ayrı kart mantıksal sorumluluğu gösterir; ayrı database host veya ağ paketi değildir.

    Browser
    Response bekliyor
    Application
    Okuma sonucu bekliyor
    Local data source
    readBook isteği alındı
  5. Veri katmanı sonucu belirler

    Atlas Notları kaydı bulundu. Bir row bulunması henüz browser’ın bir şey öğrendiğini göstermez.

    Browser
    Response bekliyor
    Application
    Okuma sonucu bekliyor
    Local data source
    Sonuç: Atlas Notları
  6. Okuma sonucu application’da

    Application sonucu aldı; serialization ve HTTP status seçimi kendi sorumluluğunda.

    Browser
    Response bekliyor
    Application
    Sonuç: book row
    Local data source
    Okuma tamamlandı
  7. HTTP response hazırlandı

    Application JSON representation ve 200 status hazırlar. Browser henüz bu response’u almadı.

    Browser
    Response bekliyor
    Application
    200 + JSON hazır
    Local data source
    Okuma tamamlandı
  8. Response headers browser’a ulaştı

    fetch() status ve headers elde edildiğinde resolve olabilir. Body tamamlanmış veya DOM güncellenmiş olmak zorunda değildir.

    Browser
    200 headers; body bekliyor
    Application
    Response gönderildi
    Local data source
    Okuma tamamlandı
  9. Body okundu ve yorumlandı

    Application code response.json() gibi ayrı async body okumasını bekler. JSON verisinin hazır olması kartın otomatik değişmesi değildir.

    Browser
    200 JSON hazır; UI değişmedi
    Application
    Response gönderildi
    Local data source
    Okuma tamamlandı
  10. Application code UI’ı güncelledi

    Kod body’yi okur ve DOM’u günceller. HTTP receipt ile UI güncellemesi ayrı aşamalardır.

    Browser
    UI: Atlas Notları
    Application
    Request tamamlandı
    Local data source
    Okuma tamamlandı

Kayıt bulunamadı

  1. Önce browser’da niyet var

    Kitap kartını açma niyeti henüz server’a ulaşmadı. Diğer actors bu isteği bilmiyor.

    Browser
    Kart bekliyor
    Application
    Request yok
    Local data source
    Query yok
  2. HTTP request ulaştı

    Method ve resource seçimi application’a ulaştı. Henüz kayıt okunmadı.

    Browser
    Response bekliyor
    Application
    GET /api/book alındı
    Local data source
    Query yok
  3. Handler yerel olarak çalışır

    Application route’u seçer, girdiyi yorumlar ve okuma işlemini hazırlar. Bu aşama yeni bir ağ mesajı değildir.

    Browser
    Response bekliyor
    Application
    Handler → readBook
    Local data source
    Query yok
  4. Okuma persistence sınırına ulaştı

    Bu örnekte data access aynı process içindeki local çağrıdır. Ayrı kart mantıksal sorumluluğu gösterir; ayrı database host veya ağ paketi değildir.

    Browser
    Response bekliyor
    Application
    Okuma sonucu bekliyor
    Local data source
    readBook isteği alındı
  5. Veri katmanı sonucu belirler

    Bu kontrollü senaryoda kayıt yok. HTTP status code kararını daha sonra application verecek.

    Browser
    Response bekliyor
    Application
    Okuma sonucu bekliyor
    Local data source
    Sonuç: kayıt yok
  6. Okuma sonucu application’da

    Application sonucu aldı; serialization ve HTTP status seçimi kendi sorumluluğunda.

    Browser
    Response bekliyor
    Application
    Sonuç: null
    Local data source
    Okuma tamamlandı
  7. HTTP response hazırlandı

    Application JSON representation ve 404 status hazırlar. Browser henüz bu response’u almadı.

    Browser
    Response bekliyor
    Application
    404 + JSON hazır
    Local data source
    Okuma tamamlandı
  8. Response headers browser’a ulaştı

    fetch() status ve headers elde edildiğinde resolve olabilir. Body tamamlanmış veya DOM güncellenmiş olmak zorunda değildir.

    Browser
    404 headers; body bekliyor
    Application
    Response gönderildi
    Local data source
    Okuma tamamlandı
  9. Body okundu ve yorumlandı

    Application code response.json() gibi ayrı async body okumasını bekler. JSON verisinin hazır olması kartın otomatik değişmesi değildir.

    Browser
    404 JSON hazır; UI değişmedi
    Application
    Response gönderildi
    Local data source
    Okuma tamamlandı
  10. Application code UI’ı güncelledi

    Kod response status’u kontrol edip bulunamadı mesajını gösterir. 404, fetch Promise’ının zorunlu olarak reject olması demek değildir.

    Browser
    UI: kitap bulunamadı
    Application
    Request tamamlandı
    Local data source
    Okuma tamamlandı

ÖRNEĞİ BİRLİKTE OKUYALIM

İki HTTP sonucu ve local işlem izi

Bir alan seç; hangi sonucu desteklediğini ve nerede yetersiz kaldığını incele.

Ham kaydı ve alan açıklamalarını oku
{
  "representation": "HTTP/1.1 teaching text, CRLF-delimited; selected headers only",
  "storageTransport": "in-process-call, seeded memory",
  "exchanges": [
    {
      "case": "found",
      "requestId": "demo-book-found",
      "request": "GET /api/book?case=found HTTP/1.1\r\nHost: 127.0.0.1:4175\r\nAccept: application/json\r\n\r\n",
      "response": "HTTP/1.1 200 OK\r\nContent-Type: application/json\r\nContent-Length: 53\r\nCache-Control: no-store\r\nX-Lab-Request-Id: demo-book-found\r\n\r\n{\"book\":{\"id\":\"book-atlas\",\"title\":\"Atlas Notları\"}}",
      "bodyUtf8Bytes": 53,
      "trace": [
        {
          "seq": 1,
          "actor": "handler",
          "event": "request-received",
          "requestId": "demo-book-found"
        },
        {
          "seq": 2,
          "actor": "handler",
          "event": "route-selected",
          "route": "/api/book"
        },
        {
          "seq": 3,
          "actor": "storage-adapter",
          "event": "local-lookup",
          "transport": "in-process-call"
        },
        {
          "seq": 4,
          "actor": "storage-adapter",
          "event": "record-found"
        },
        {
          "seq": 5,
          "actor": "handler",
          "event": "response-created",
          "status": 200
        }
      ],
      "browserExpected": {
        "fetch": "fulfilled-with-Response",
        "status": 200,
        "ok": true,
        "body": "await response.json()",
        "view": "book-title"
      }
    },
    {
      "case": "missing",
      "requestId": "demo-book-missing",
      "request": "GET /api/book?case=missing HTTP/1.1\r\nHost: 127.0.0.1:4175\r\nAccept: application/json\r\n\r\n",
      "response": "HTTP/1.1 404 Not Found\r\nContent-Type: application/json\r\nContent-Length: 26\r\nCache-Control: no-store\r\nX-Lab-Request-Id: demo-book-missing\r\n\r\n{\"error\":\"BOOK_NOT_FOUND\"}",
      "bodyUtf8Bytes": 26,
      "trace": [
        {
          "seq": 1,
          "actor": "handler",
          "event": "request-received",
          "requestId": "demo-book-missing"
        },
        {
          "seq": 2,
          "actor": "handler",
          "event": "route-selected",
          "route": "/api/book"
        },
        {
          "seq": 3,
          "actor": "storage-adapter",
          "event": "local-lookup",
          "transport": "in-process-call"
        },
        {
          "seq": 4,
          "actor": "storage-adapter",
          "event": "record-missing"
        },
        {
          "seq": 5,
          "actor": "handler",
          "event": "response-created",
          "status": 404
        }
      ],
      "browserExpected": {
        "fetch": "fulfilled-with-Response",
        "status": 404,
        "ok": false,
        "body": "await response.json()",
        "view": "not-found-message"
      }
    }
  ]
}
request / response
HTTP/1.1 öğretim gösterimi; DevTools raw capture değil. Headers/body boş CRLF satırıyla ayrılır.
Content-Length / bodyUtf8Bytes
Body octet sayısı; compression uygulanmaz. Unicode karakter sayısından farklı olabilir.
X-Lab-Request-Id / requestId
Bu örneğin özel correlation alanı; HTTP standardı değil.
trace[].actor / event / transport
Server-side processing ve local storage adapter çağrısı; network protocol kaydı değil.
browserExpected
HTTP Response, body read ve view için beklenen ayrı sonuçlar.

Sentetik selected-header gösterimi; tam RFC-compliant server transcript veya lab output iddiası yok. Tarih/diğer browser headers’ı atlanır. HTTP/2–3 framing, streaming packetization, DNS/TLS ve real persistence modellenmez. Header’ın adı gerçek lab uygulamasında farklıysa o uygulamanın sözleşmesi esas alınır.

URL · path, query ve fragment

https://books.example:8443/catalog/atlas?lang=tr&tag=network&tag=web#summary
host
Host, açık port ile books.example:8443 olur. Hostname ise books.example olarak kalır.
origin
HTTP(S) origin scheme, hostname ve etkin port’tan oluşur; path veya query bu sınırı değiştirmez.
tag
Query aynı tag adını iki kez içerir. İki alan da korunur; tek bir get sonucu bütün değerleri temsil etmez.
hash
Fragment #summary URL’de bulunur; HTTP request target’ına eklenmez.
httpOriginForm
Path ve query birlikte gösterilir. Fragment’in bu değerde bulunmamasını karşılaştır.

Sentetik öğretim metni. Ayrıştırma URL alanlarını veya cookie çiftlerini gösterir; browser policy, storage ya da server session sonucunu üretmez.

Cookie · request’te gönderilen çiftler

hd_language=tr; hd_view=compact
hd_language
Gönderilen dil tercihi. Bu name/value çifti kimlik veya kitap erişim izni değildir.
hd_view
İkinci preference çifti. Request Cookie metni Path, HttpOnly veya SameSite attribute’larını geri taşımaz.

Sentetik öğretim metni. Ayrıştırma URL alanlarını veya cookie çiftlerini gösterir; browser policy, storage ya da server session sonucunu üretmez.

Set-Cookie · response’taki tercih ve scope

hd_language=tr; Path=/
hd_language
Response yeni bir dil tercihi önerir. Metni okumak browser’ın bunu kabul edip sakladığını kanıtlamaz.
Path
Request path eşleşmesi için scope attribute’ı. Request Cookie çiftlerine dahil edilmez; güvenlik izolasyonu sağlamaz.

Sentetik öğretim metni. Ayrıştırma URL alanlarını veya cookie çiftlerini gösterir; browser policy, storage ya da server session sonucunu üretmez.