Javascript Security Checklist
Tags: security, javascript, codereview
Published: 2021-09-29 17:38:18

# Summary

- [Introduction](#introduction)
- [1. Code Linting & SAST](#1-code-linting---sast)
- [2. Running a security audit with npm audit](#2-running-a-security-audit-with-npm-audit)
- [3. Integrity checking for JavaScript (SRI)](#3-integrity-checking-for-javascript--sri-)
  * [How does it work?](#how-does-it-work-)
- [4. Validations, Validations, Validations!](#4-validations--validations--validations-)
- [5. Minify and obfuscate your Javascript](#5-minify-and-obfuscate-your-javascript)
- [Conclusion](#conclusion)

## Introduction

Javascript is everywhere, It runs inside your browser, [astronaut spacesuit](https://openjsf.org/wp-content/uploads/sites/84/2020/02/Case_Study-Node.js-NASA.pdf), and most developers use it as a client-side and server-side programming language to allow them to create interactive web pages.

Javascript is a lightweight, interpreted programming language with first-class functions.

In addition, the Javascript ecosystem relies heavily on [third-party libraries](https://npm.anvaka.com/); 
![Visualization of npm shows dependency graph of an npm package.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5og8qisjk67p9er2kl4.png)
Therefore, ensuring the security of JavaScript requires following security best practices to reduce attack surfaces. But how do we keep JavaScript applications safe?

I will be sharing with you in this article some helpful tips I use every day as a security engineer so you can start thinking more about security before deploying your code to production.

## 1. Code Linting & SAST

Seeing real-time feedback through linting while you're coding inside your IDE can help you accelerate development and reduce costs by finding errors and security issues earlier.

You can use: 
* [JSLint](https://www.jslint.com/).
* [JSHint](https://jshint.com/).
* [Standard JS](https://standardjs.com/).
* [ESLint﻿](https://eslint.org/)

Most SAST tools like [SonarQube](https://www.sonarlint.org/) provide more features to identify code smells and known security vulnerabilities.
![SonarQube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvs53105myrcfvaas7m2.png)


## 2. Running a security audit with npm audit

Most of the developers are using [NPM(_node package manager_)](https://docs.npmjs.com/), which is a tool that helps you to install other people's code packages into your Javascript project.

When it comes to security, the first thing we will consider is [NPM audit tool](https://docs.npmjs.com/packages-and-modules/securing-your-code). This tool will help you detect vulnerabilities in all your installed dependencies and help you fix them.

![npm audit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b48wjp5mo23p1lo8wgj5.png)

Suppose you are using [Github](https://github.com/) as a source control management system. In that case, they have a tool called [Dependabot](https://github.com/dependabot), which automatically scans the dependencies of [NPM](https://docs.npmjs.com/) and informs you via email to clarify the risks.

![Dependabot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07imwj9p7x0puokzo3nr.png)

---

If you're working on a big project, you should consider automating this job instead of doing it manually each time by yourself. Thus, we can create a Cron Jobs to set recurring tasks (Choose your preferable CI tool).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdm7f3jm70hrtsv0huy9.png)


---


## 3. Integrity checking for JavaScript (SRI)

If you're a developer, I'm sure you used before the `<script>` tag to import third-party libraries inside your code, but did you ever think about the possibility of manipulating the source code of those imported scripts?

Yes, It can happen, especially when you render external resources on your website. Therefore, your website may face a security breach.

You can use the _SRI_ feature to enable browsers to verify the resources they fetch as a security measure.
```
<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>
```
### How does it work?

Let's say we'd like to add JQuery to our code.

* Download the minimized version of [JQuery](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js).
* Calculate the SHA256 hash of JQuery version 3.5.1 hosted by Cloudflare
* Run it twice through OpenSSL to generate the checksum.
* Encode the result in base64 format.
```
curl -s https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js | openssl dgst -sha256 -binary | openssl enc -base64 -A

9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=
```

Now that we have the hash, we can add the `integrity` attribute to the script tag and the prefix `sha256-` to the hash to indicate the hashing algorithm used. Starting from now, any browser that supports _SRI_ will require that the provided hash matches the calculated hash of the downloaded file.
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
```
Browser compatibility (SRI)
![Browser compatibility SRI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pg6oyn54jy00wphuxvet.png)

## 4. Validations, Validations, Validations!

Client-side validation is not enough, and you should never rely on it when you write your code.

* Don't trust user inputs.
* Use proper methodologies for encoding/escaping
* Sanitize and clean your user inputs
* Set secure cookies
* Establish a [secure content security policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
* Encrypt data transmissions between client-side and server-side
* Use updated libraries and frameworks
* Perform regular scans on your underlying databases and codebases

Read: 
* https://portswigger.net/web-security
* https://snyk.io/blog/5-ways-to-prevent-code-injection-in-javascript-and-node-js/

## 5. Minify and obfuscate your Javascript

As an attacker, I will try my best to understand the business logic behind the application, and if I do so, I can find my way through.

It's crucial to minify & obfuscate your Javascript to make it more difficult for the attacker to understand your code and decrease the attack surface.

--- 

## Conclusion

Great job if you followed this far!

Hopefully, you’re now more aware of the problems you may face while developing your javascript application. Keep in mind that this article covered only a few things you should check while securing your application.

You may also need to read about: 

* Configuration Management.
* Authentication.
* Session Management.
* Secure Transmission.
* Denial of Service.
* Error Handling.

You can reach me out on LinkedIn if you have questions [@Bour Abdelhadi](https://www.linkedin.com/in/in/bohr)

Do you want to support me? > [💲](https://www.paypal.com/paypalme/bohrhadi) Thanks :D