Hello everyone, this is Nobody. I'm really sorry that I'm late — my semester exams are coming up and I have to prepare for them. I'll be a little busy during this upcoming month and won't be able to write much. But I will try to write one story every 4 to 5 days.

Anyway, I was learning about CSRF and doing labs on it, and I came across a lab called: "Lab: SameSite Strict bypass via sibling domain".

To do this lab, I realized I must understand WebSockets well. I've heard about WebSockets but never really knew what they are or how they work. So I started understanding WebSockets and began writing notes. Here they are.

Before WebSockets — Let's Understand Synchronous vs Asynchronous

Synchronous (Blocking)

One thing at a time. Everything waits until the current task finishes.

Analogy: Calling customer service and staying on hold. You can't do anything else until the call ends.

Asynchronous (Non-Blocking)

Start the task, do other things, handle the result when ready.

Analogy: Sending a text message. You continue scrolling Instagram. When a reply comes, you check it whenever convenient.

Quick Comparison Table

None

What is a WebSocket?

  • Bi-directional, full-duplex communication protocol
  • Initiated over HTTP, then upgrades the connection
  • Connection stays open until closed by either side
  • Either client or server can send data at any time
None

Why WebSockets Are Asynchronous

WebSocket = Two-way radio that stays ON

Browser ←—————→ Server (persistent connection)
   ↑                  ↑
   └── Data anytime ──┘

Before WebSockets (Synchronous Polling)

setInterval(() => {
    askServer("Any new messages?")  // Wastes bandwidth
}, 2000)

With WebSockets (Async Push)

webSocket.onmessage = (event) => {
    displayMessage(event.data)  // Server pushes when ready
}
// No polling. No waiting. No waste.

Streaming Data Examples

"Commonly used in modern web apps for streaming data and asynchronous traffic"

None

Asynchronous = Start it, forget it, handle result when ready

WebSockets enable true async by keeping the connection open for bidirectional, real-time communication

None

Handshake Request (Browser → Server)

GET /chat HTTP/1.1
Host: normal-website.com
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: wDqumtseNBJdhkihL6PW7w==
Connection: keep-alive, Upgrade
Cookie: session=KOsEJNuflw4Rd9BDNrVmvwBF9rEijeE2
Upgrade: websocket

Handshake Response (Server → Browser) — If Accepted

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: 0FFP+2nmNIf/h+4BP36k9uzrYGk=

After this handshake: Connection stays OPEN. Messages flow freely both ways.

WebSocket Messages (After Connection)

Sending a Message (Client → Server)

ws.send("Peter Wiener");

Message Content

  • Can be any content or data format
  • Modern apps often use JSON

JSON Message Example

{"user":"Hal Pline","content":"I wanted to be a Playstation growing up"}

Key Takeaway

WebSocket = persistent, bidirectional channel established via HTTP upgrade. Handshake uses Upgrade: websocket and Connection: Upgrade. Messages flow anytime, often as JSON. Attack surface: Handshake security + message content + origin validation + session handling.

That's all for now. Back to studying CSRF and that SameSite bypass lab. See you in the next one.