In the world of JavaScript development, ensuring the security of your applications is important. With cyber threats against applications evolving constantly, developers need to take advantage of robust tools and libraries to fortify their code against vulnerabilities.

In this article, we'll explore some of the open-source libraries that empower developers to build more secure JavaScript applications.

Helmet JS

Helmet JS helps secure Node.js applications by defining HTTP Headers. HTTP security headers are usually sent along with a web page's response to a browser, instructing it to take certain security measures. These headers which include content-security policy, strict-transport security and X-Frame-Options help fortify your web application against common attacks such as click jacking and cross site scripting attacks.

I recently completed the information security course offered on freecodecamp, one of the project assignments is to secure a web application with using Helmet.js. I recommend you take the course to understand how to use this package.

To use Helmet.js in your Node.js applications, first, install Helmet.js as a dependency for your Node.js project. You can do this using Node Package Manager (npm) as follows:

npm install helmet

Once Helmet.js is installed, you can include it in your Node.js application by requiring it at the top of your main application file (e.g, app.js). Below is an example of how to do this:

const express = require('express');
const helmet = require('helmet');
const app = express();
// Use Helmet middleware
app.use(helmet());

Helmet sets several HTTP security headers by default. Moreover, these headers can be configured or disabled depending on your application's needs.

DOMPurify

This is a popular robust JavaScript library that provides secure and reliable HTML sanitization. DOMPurify does a good job filtering out any potentially dangerous elements and attributes from user-generated or dynamic content thereby preventing cross-site scripting attacks. This library is actively maintained and it's latest version is v3.0.10.

Integrating DOMPurify into a web application is pretty straightforward. You can include this library in your project using npm:

npm install dompurify

Then, invoke it to sanitize HTML Input before rendering it in the web browser.

The following is an example of how to use DOMPurify:

import DOMPurify from 'dompurify';
const untrustedHTML = '<script>alert("XSS attack!")</script>';
// Sanitize HTML input
const sanitizedHTML = DOMPurify.sanitize(untrustedHTML);
// Render sanitized HTML
document.getElementById('content').innerHTML = sanitizedHTML;

For a deeper understanding of DOMPurify, check out its official site.

Bcrypt

Bcrypt is a wide known cryptographic library that is used for password hashing. This is made possible through a hashing method called salting. Salting involves appending random strings to passwords before they undergo hashing, thereby enhancing security by introducing additional complexity to the hashed output.

Bcrypt is relatively easy to implement in your JavaScript applications. First, install bcrypt.js using npm package manager.

  npm install bcrypt

Next, in the JavaScript file where you want to use bcrypt, require the bcrypt library at the top. When a user signs up or updates their password, you'll want to hash their password before storing it in your database. You can do this using bcrypt'shash function. Below is an example:

  const bcrypt = require('bcrypt');
  const plaintextPassword = 'password123';

  bcrypt.hash(plaintextPassword, 10, function(err, hash) {
      if (err) {
          // Handle error
      } else {
          // Store hash in your database
          console.log('Hashed password:', hash);
      }
  });

Data-guardian

Data-guardian is a useful npm package designed to provide an additional security later for developers who need to securely handle sensitive data in their applications. By masking sensitive strings and object properties, the package helps protect critical data from unauthorized access or exposure, particularly in scenarios like logging or displaying data in user interfaces where privacy is a concern. Maintaining data immutability is also a valuable feature, that can be customizable based on your application's needs

Using data-guardian is simple. Below is a snippet to get you started:

// Installation
npm install data-guardian

// Usage
import { maskData, maskString, maskArguments } from 'data-guardian';
// Masking a string
console.log(
  maskString('my login data is username: john.doe@acme.com and pass: A1vbcvc.De#3435?r ... that is risky to share'
));
// output: 
// my login data is username: jo*************om and pass: A1***********35?r ... that is risky to share

For a more detailed understanding of data-guardian, including advanced usage and customization options, visit the official npm page.

Express rate limit

The express-rate-limit npm package is a middleware for Express.js, a popular web application framework for Node.js. This middleware is designed to limit repeated requests to your server's endpoints, mitigating the risk of abuse or denial-of-service (DoS) attacks.

Below is a brief overview of how to use the express-rate-limit package:

First, install the package via npm:

npm install express-rate-limit

Next, import the package and use it as middleware in your Express application. You can configure rate limits based on various criteria such as IP address, user agent, or custom attributes.

const express = require('express');
const rateLimit = require('express-rate-limit');

const app = express();

// Apply rate limiting middleware
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // limit each IP to 100 requests per windowMs
});

// Apply the rate limiter to all requests
app.use(limiter);

// Your route handlers
app.get('/api/data', (req, res) => {
  // Handle the request
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Conclusion

Upholding the security of your JavaScript web applications is crucial in today's digital landscape, where threats are constantly evolving. By leveraging the power of these essential JavaScript libraries—Helmet.js, DOMPurify, bcrypt, data guardian, and express-rate-limit—you can significantly enhance your application's defense mechanisms. These tools provide a robust foundation for securing HTTP headers, sanitizing HTML input, hashing passwords, masking sensitive data, and limiting request rates, respectively. Integrating these libraries into your development process not only helps in mitigating vulnerabilities but also instills confidence among your users regarding the safety of their data. Remember, the security of your application is not a one-time effort but a continual process of improvement and adaptation to new threats.

Finally, remember to maintain updated versions of these libraries to take advantage of the latest improvements.