Forem: krishnadaspc

Part 1: Taming Asynchronous JavaScript: How to Build a "Mailbox" Queue

krishnadaspc — Sat, 23 May 2026 10:13:18 +0000

Have you ever tried to catch water from a fire hydrant with a paper cup?

That is exactly what it feels like when you are building a JavaScript app and data starts coming in way faster than your code can process it. Maybe you are handling a flood of incoming webhooks, reading a massive file, or listening to a busy WebSocket.

If your data sender is faster than your data receiver, things break.

What you need is a waiting room. A place where incoming data can chill out until your app is ready to handle it. In computer science, this is called a "Queue" or a "Channel." Today, we are going to build one from scratch. Let's call it our Mailbox.

The Idea Behind the Mailbox
Think of a literal physical mailbox.

The Mail Carrier (The Producer): Drops letters into the box. They don't care if you are home; they just drop the mail and leave.

You (The Consumer): You check the mailbox. If there is mail, you take it. If the box is empty, you just wait until the mail carrier shows up.

We can recreate this exact relationship in JavaScript using Promises. Here is the code. It might look a little magical at first, but we will break it down right after!

export class Mailbox {
  constructor() {
    this.messages = []
    this.waiters = []
    this.closed = false
  }

  push(message) {
    if (this.closed) {
      throw new Error("Mailbox is closed")
    }

    // Deliver directly to waiting consumer
    if (this.waiters.length > 0) {
      const resolve = this.waiters.shift()
      resolve(message)
      return
    }

    this.messages.push(message)
  }

  async pop() {
    // Message already available
    if (this.messages.length > 0) {
      return this.messages.shift()
    }

    // Closed mailbox
    if (this.closed) {
      return null
    }

    // Wait for future message
    return new Promise((resolve) => {
      this.waiters.push(resolve)
    })
  }

  close() {
    this.closed = true

    // Wake all waiting consumers
    while (this.waiters.length > 0) {
      const resolve = this.waiters.shift()
      resolve(null)
    }
  }

  get size() {
    return this.messages.length
  }

  async *[Symbol.asyncIterator]() {
    while (true) {
      const msg = await this.pop()

      if (msg === null) {
        break
      }

      yield msg
    }
  }
}

The "Aha!" Moment: Pausing JavaScript

The coolest part of this code is inside the pop() method.

Usually, when we use a Promise in JavaScript, it's for something like fetch()

You make a request, and eventually, it resolves.

But here, we are doing something sneaky. If the mailbox is empty, we create a new Promise, but we take its resolve function and shove it into our this.waiters array. We are essentially bottling up the ability to finish the Promise for later.

Your code effectively pauses. It just sits there, waiting.

Then, when the push() method gets called, it looks inside this.waiters, pulls out that bottled-up resolve function, and triggers it with the new message. Boom! Your paused code instantly wakes up with the data.

How to Use It

Because we added that weird looking [Symbol.asyncIterator] at the bottom of the class, using our Mailbox is beautifully simple:

const mailbox = new Mailbox();

// 1. You: waiting for mail
async function readMail() {
  // This loop will naturally pause and wait for new messages!
  for await (const msg of mailbox) {
    console.log("Just got:", msg);
  }
  console.log("No more mail coming!");
}
readMail();

// 2. The Mail Carrier: dropping off mail at random times
mailbox.push("Letter 1");
setTimeout(() => mailbox.push("Letter 2"), 1000);
setTimeout(() => mailbox.close(), 2000);

This setup works flawlessly for everyday tasks. But there is a hidden monster in this code.

If you get too popular—say, someone drops 1,000,000 letters into your mailbox at once—this exact code will completely freeze your server for minutes. In Part 2, we are going to find out exactly why JavaScript hates huge arrays, and how to fix our Mailbox to handle millions of messages in a fraction of a second.

The link to the repo of full source code of this: https://github.com/pckrishnadas88/mailbox

How CSRF Token protects your web application

krishnadaspc — Mon, 20 Sep 2021 08:48:54 +0000

We are going to look how CSRF tokens works in a real node express application and how it protects the app from cross site request forgery. If you would like to see the video version of this post you can watch it here.
Watch video here

What is cross site request forgery?

When a web server is receives a request from a client without any mechanism for verifying that it was intentionally sent, then it might be possible for a hacker to send requests to the web server which will be treated as a genuine request. This can be done via a Form submit, URL, image load, XMLHttpRequest, etc. and can result in data breach or unintended code execution. In this post we are going to explain a form submit kind of attack and how CSRF tokens prevents this.

Code set up

There are two fresh express applications running. One is running on port 3000 which is App1 and another is running on port 5000 which is App2. Both of these applications are created using the express generator.

App1 Code snippets

Install the npm csurf

Enable the csrf middleware for the application in app.js

var csrf = require('csurf')
// setup route middlewares
app.use(cookieParser('fsgdesgsdYYFCCXXX'));
app.use(csrf({ cookie: true }))

Setting up the routes for the App1. Code from routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: "App1, CSRF Demo", csrfToken: req.csrfToken() })
});
router.post('/process', function (req, res) {
  res.send('csrf is valid, data is being processed')
})

In the above code we are generating the csrfToken and passing it to the view where we load our form with csrfToken: req.csrfToken()

In the view we use handlebars as our templating engine and csrf token is added as a hidden input field.

<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
<form action="/process" method="POST">
  <input type="hidden" name="_csrf" value="{{csrfToken}}">

  name: <input type="text" name="name">
  <button type="submit">Submit</button>
</form>

When we start the App1 we can see a form loaded with the generated csrf token if you check the html view source of the page.

and submit the form with some data. You can see this result as csrf token is validated and correct.

How token protects the app?

Now let's remove the token generation and see how this CSRF middle-ware protects our application. Change the code in app1/routes/index.js like this. Now we pass csrf as an empty string.

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: "App1, CSRF Demo", csrfToken: '' })
});

Now if you submit the form you will get an error message like this.

Now server rejects the request as it cannot find a valid token in the request and now we are protected from such kind of attacks.

Attack request from App2

Now let's mimic an attack from another domain/application. In this example which is App2

For the time being just disable the csrf middleware in App1. Comment these lines in app1/app.js

// app.use(csrf({ cookie: true }))

In App2 home route we also have the same form but the form submit action is the url of App1

<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>


<form action="http://localhost:3000/process" method="POST">

  name: <input type="text" name="name">
  <button type="submit">Submit</button>
</form>

Start the server App2 which is running on port 5000. You can see the form but now when you submit the form it is accepted as App1 currently do not have CSRF middleware enabled.

Now just re enable our csrf middleware in App1. Un comment this line

app.use(csrf({ cookie: true }))

And now when you submit the form from App2 you will get this error page only. So we are now protected.

That's how a CSRF token protects in a real application. You can find the full source code here Github Code Link

You can follow me on my twitter here KrishnadasPC