HTTP & HTTPS

sequenceDiagram
    participant Browser as Your Browser
    participant DNS as DNS Server
    participant Server as Web Server

    Browser->>DNS: 1. What is the IP of example.com?
    DNS-->>Browser: 2. It's 93.184.216.34

    Note over Browser,Server: 3-Way TCP Handshake
    Browser->>Server: SYN
    Server-->>Browser: SYN-ACK
    Browser->>Server: ACK

    Note over Browser,Server: TLS Handshake (HTTPS)
    Browser->>Server: 3. ClientHello — supported ciphers
    Server-->>Browser: 4. ServerHello + Certificate
    Browser->>Server: 5. Session key established 🔑

    Note over Browser,Server: Encrypted HTTP Request & Response
    Browser->>Server: 6. GET /index.html HTTP/1.1 (encrypted)<br/>Host: example.com<br/>Accept: text/html
    Server-->>Browser: 7. HTTP/1.1 200 OK (encrypted)<br/>Content-Type: text/html<br/><br/>&lt;html&gt;...&lt;/html&gt;

    Note over Browser: 8. Browser renders the page

flowchart TB
    subgraph CRUD[HTTP Methods - CRUD Operations]
        direction TB
        GET["GET /users<br/>Read data<br/>✅ Safe, no side effects"]
        POST["POST /users<br/>Create new data<br/>📝 Usually creates a resource"]
        PUT["PUT /users/42<br/>Replace entirely<br/>🔄 Full update"]
        PATCH["PATCH /users/42<br/>Partial update<br/>✏️ Change specific fields"]
        DELETE["DELETE /users/42<br/>Remove data<br/>🗑️ Deletes the resource"]
    end

    subgraph Other[Other Common Methods]
        HEAD["HEAD /users<br/>Like GET but no body<br/>📋 Check if resource exists"]
        OPTIONS["OPTIONS /users<br/>What methods are allowed?<br/>🔍 Used by CORS preflight"]
    end

    style CRUD fill:#3b82f6,color:#fff
    style GET fill:#10b981,color:#fff
    style POST fill:#f59e0b,color:#fff
    style PUT fill:#3b82f6,color:#fff
    style PATCH fill:#059669,color:#fff
    style DELETE fill:#ef4444,color:#fff
    style Other fill:#7c3aed,color:#fff

GET /index.html HTTP/1.1
Host: example.com                    # Which website
User-Agent: Chrome/120.0             # What browser
Accept: text/html                    # What content types I accept
Authorization: Bearer abc123          # Authentication token
Cookie: session_id=xyz               # Session data

HTTP/1.1 200 OK
Content-Type: text/html              # Type of content
Content-Length: 1234                 # Size in bytes
Cache-Control: max-age=3600          # Cache for 1 hour
Set-Cookie: theme=dark               # Set a cookie

You type password → [HACKER!] → Server reads it
All data is sent as plain text — anyone on the same WiFi can see it

You type password → 🔒 encrypted → Server decrypts
Even if someone intercepts it, they see only gibberish

flowchart TB
    subgraph CA[Certificate Authority Chain]
        Root[Root CA<br/>🔑 Built into browser/OS<br/>e.g., Let's Encrypt, DigiCert]
        Inter["Intermediate CA<br/>🔑 Signed by Root CA<br/>e.g., R3"]
        ServerCert["Server Certificate<br/>🔑 Signed by Intermediate<br/>e.g., *.google.com"]
    end

    subgraph Validation[Browser Validates]
        V1["Browser has Root CA<br/>pre-installed"]
        V2["Checks signature of Intermediate"]
        V3["Checks signature of Server Cert"]
        V4["✅ All valid! Trust established"]
    end

    Root -->|"Signs"| Inter
    Inter -->|"Signs"| ServerCert
    ServerCert --> V1 --> V2 --> V3 --> V4

    style CA fill:#7c3aed,color:#fff
    style Root fill:#10b981,color:#fff
    style Inter fill:#3b82f6,color:#fff
    style ServerCert fill:#f59e0b,color:#fff
    style Validation fill:#10b981,color:#fff