Security, Cors and More

Some Context

In my previous blog, I elaborated on one of the topics that I presented to our tech team at Growth School, if you haven't read it yet, here's the article.
Today we will be talking about a few other topics I presented.

In this article, we are going to talk about CORS and how it is related to web security. We'll also look into Helmet, an npm module and how it helps in securing our ExpressJs app.

Let's get started!

1. CORS

High chances that you have encountered this CORS error when working with APIs in your Frontend Application Code.

Let's see how we fix it correctly:

The easiest way to fix it is by installing the cors package and adding the following line of code.

app.use(cors())

But this way may give rise to some security vulnerability.

Let's understand how.

CORS stands for cross-origin resource sharing. For security reasons, browsers restrict other origins(domains) to make HTTP requests to the server.

This means, that if your API and Frontend Application are hosted on different origins(domains), then your Frontend Application would be able to make API requests to your Backend API.

Coming back to the point:
app.use(cors()) allows all the origins to make API requests to your server. Now, any domain can request data from your server. This might result in a potential security flaw.

How do we tackle this?

Specify the origin you want to allow your server to interact with.

Here's how we do it.

const cors = require("cors");

const corsOptions = {
    origin: "https://our-website.com"
};

app.use(cors(corsOptions));

Now only https://our-website.com will be able to make requests to our servers.

Our Express app is a little bit more secure than before, now.

We can also specify more than 1 origin.
Whenever we are developing the app, we would be making requests from localhost. So, here's how we specify multiple origins.

const cors = require("cors");

const corsOptions =[
 "https://our-website.com",  "http:localhost:3000" 
];

app.use(cors(corsOptions));

This works fine, but what if we forgot to remove localhost as an origin in production! Some hacker would probably be able to attack our app via localhost. Also remembering to remove localhost while pushing to production is an extra task. We have a better way of doing it.

We can further abstract the code to:

const { port } = require("./envConfig");

const corsOptions = {
  origin:
    process.env.NODE_ENV === "development"
      ? `http://localhost/${port}`
      : `https://our-website.com`,
};

module.exports = { corsOptions };

Much more robust now.

That's it about CORS. Hope you understood what effects cors have in terms of security.

Talking about security, here's an npm module that we can use to add one more security layer.

2. Helmet

Helmet.js is a Node.js library that helps in securing HTTP headers.
HTTP headers are important as they can leak sensitive information about the application, therefore, it is important to use the headers securely.

Helmet is quite easy and straight-forward to use.
Just install the module by npm install helmet and configure it this way:

const express = require('express');
const helmet = require('helmet');
const app = express();

app.use(helmet());

Helmet sets some important headers like contentSecurityPolicy, crossOriginEmbedderPolicy, dnsPrefetchControl, etc.

That's it about Helmet. It is highly recommended and an easy-to-implement module.

That's all for today. Let me know your thoughts in the comment section.
If you liked the article give it a thumbs up.

Hope you enjoyed it, and if you did, consider supporting me 👇. It will make my day :)

Also, comment below if you would like to know more about the other topics I presented to our tech team.

https://www.buymeacoffee.com/sayurikamble

Sayuri Kamble

Sayuri Kamble

Security, Cors and More

Some Context

1. CORS

2. Helmet