API Security

The API Security Academy: Under the Hood

Gautier Ben Aïm

• 3 min read
The API Security Academy: Under the Hood

The API Security Academy is built upon a technology that comes straight from the future—and by that, we mean the brilliant minds at StackBlitz—WebContainers. You may already know regular containers, the ones you can run with Docker and Kubernetes, which are lightweight virtualization units that allow developers to package and run applications in isolated containers. WebContainers are containers that run directly in the browser, pre-charged with a shell and Node.js. You may run anything in the Node.js ecosystem!

Run anything?

A WebContainer contains all the usual computer stuff, like a file system and a network stack, sand-boxed and airtight from the rest of the system. It's shipped with an API allowing you to perform operations within the system, like updating files or starting a program.

In Escape's API Security Academy, a lesson is a directory containing a filesystem to be copied at the root of the WebContainer. This directory contains a usual Node.js projects: a readme that explains what to do, a package.json that defines the dependencies, and a few .js files containing a vulnerable code waiting to be fixed. Creating a lesson is as easy as creating a Node.js project—we could not make it simpler. If you want to give it a try, keep reading; we welcome all contributions!

💡
Here is the link to our GitHub repository.

Anatomy of a lesson

Writing a lesson starts with writing its instructions. They are written as Svelte-powered Markdown, but don't worry, we'll use regular Markdown in this article.

Clone the repository, run yarn install && yarn dev and create a new directory first-lesson under packages/lessons. In this directory, create a file named README.md:

---
title: 'Your First lesson'
description: 'A dozen of words describing what to learn here.'
difficulty: 'Easy'
category: 'Injection'
---

No need to repeat the title, it'll stand just above these words.

**Hello World!**

You should now see your lesson on the front page, but if you open it, it'll be empty. All the files you add to the directory will be made available to end users. For instance, you can add a package.json file:

{
  "name": "first-lesson",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

The start script references an index.js file, let's add it too:

import express from 'express';

const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000);

That's all we need to create a functional lesson! You can try that everything works by opening a new terminal and running npm && npm start and you'll be greeted by a warm message:

A browser window that reads Hello World
Our first lesson, in all its glory

We can't wait to see what the community can do with these tools, whether it's complex lessons or highly creative ones, we'd love to hear from you!

Contribution ideas

  • Writing new lessons or updating existing ones.
  • Enhancing the UI/UX of the app component.
  • Reporting bugs and suggesting new features.


Feel free to submit a pull request or create an issue to discuss any changes you have in mind.

And now, go directly to our API Security Academy GitHub repo!

Want to discover how we built other Escape's open-source projects? Check out the following articles: