Finding security vulnerabilities in JavaScript with Github's CodeQL & Code Scanning
Tags: codeql, github, javascript, sast
Published: 2022-07-14 08:00:57

Identifying code vulnerability is always a growing concern for a software engineer. How to reduce the security vulnerabilities in a growing code base?  To mitigate such problems, I started exploring and got introduced to Github’s CodeQL.

Read [this document](https://resources.github.com/downloads/GitHubAdvanced%20SecurityEbook.pdf) by Github to learn more about application security. It covers various aspects like:

- State of application security today.
- Traditional vs. end-to-end security.
- Developer first application security
  with GitHub.

Through this blog, I will give a step-by-step understanding on how to find security vulnerabilities in JavaScript project using CodeQL. I am planning to cover the following in detail. 
1. Intro to CodeQL & Code Scanning.
2. How to find security vulnerabilities in JavaScript with CodeQL?
3. How to enable Github Code scanning with CodeQL?


##1. Intro to CodeQL & Code Scanning
**CodeQL** is an industry-leading semantic code analysis engine developed by Github designed to identify vulnerabilities in codebase. It treats your code as data by building a database that can be queried for vulnerabilities. You can write queries on data to find patterns, vulnerabilities & bugs.  For more details, [click here](https://codeql.github.com/docs/codeql-overview/about-codeql/).


CodeQL can be used in conjunction with Code scanning capabilities which is GitHub’s native SAST ([Static Application Security Testing](https://www.synopsys.com/glossary/what-is-sast.html)) tool, a developer-first approach to SAST that enables vulnerabilities to be found and remediated effortlessly before they reach production.

##2. How to find security vulnerabilities in JavaScript with CodeQL?
There is a wonderful workshop video on Finding security vulnerabilities in JavaScript with CodeQL.

> <u>Note:</u> If you are in a hurry & just want to enable CodeQL scanner in your javascript codebase without any need of learning CodeQL or willing to explore/learn writing queries using it or if you want to learn it later, please skip this section, this video will take at least 1.5hrs to complete.

<u>Workshop Video</u>
{% embed https://www.youtube.com/watch?v=pYzfGaLTqC0 %}

<u>Video Summary</u>
<u>This workshop video gives a walkthrough on :</u>
- How to install CodeQL Vs code extension?
- How to download a pre-generated bootstrap database by CodeQl CLI?
- How to write queries to identify JQuery Plugin vulnerabilities which are found in a specific version of bootstrap(v3.4.0)?

<u>Helpful links</u>
- [CodeQL for Visual Studio Code](https://codeql.github.com/docs/codeql-for-visual-studio-code/)
- [javascript.md](https://github.com/githubsatelliteworkshops/codeql/blob/master/javascript.md) used in the workshop video.
- [Github workshop repo](https://github.com/githubuniverseworkshops/codeql)

##3. How to enable Github Code scanning with CodeQL?
After following the workshop video you should be able to use CodeQL.

Rather than writing queries manually, code scanning feature will find security vulnerabilities and errors in the code for your project on GitHub. In this section i'll help you setting it up. For this purpose we will use the same javascript open source library which is used in the above workshop video [twbs/bootstrap](https://github.com/twbs/bootstrap).

Code scanning is GitHub’s native SAST tool. More about it can be [found here](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/about-code-scanning).

> Alternatively you can try out Code scanning JavaScript Tutorial [by following this](https://github.com/github/code-scanning-javascript-demo). Rather if you would like to continue with bootstrap plugin vulnerability example please follow the below steps:

**3.1.** **Fork** the [twbs/bootstrap](https://github.com/twbs/bootstrap) public repository in to your github account. 

![Forking the twbs/bootstrap project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdgab597u9ku320jgkbp.png)

**3.2.** Create a new branch(**code-scan-v3.4.0**) from v3.4.0 tag, since the database used in the workshop video is generated from the same version of bootstrap, we will get similar vulnerabilities as the workshop video.

![Searching v3.4.0 tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ku4qf7nq9h5lv9n8rrp.png)

![Creating code-scan-v3.4.0 branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90q1bqqnwh6gy0b3pdeq.png) 

**3.3.** **Enable Code Scanning** : Since Code Scanning is available for all public repositories I have enabled it with the [help of this](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/about-code-scanning).

![Enabling Github Code scanning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z06f9tgjexqms4gavrqt.png)

![Enabling Github Code scanning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56uqxt1187qug0n7x3cc.png)

**3.4.** **Actions Workflow file** : Update the branch name(**code-scan-v3.4.0**) in the CodeQL action Workflow file which we have enabled in the previous step. So that the action is triggered only on this branch(**code-scan-v3.4.0**) push & PR events.

![Editing CodeQL Actions workflow file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rkt9isyokjpzb6lxgyh.png)
 I have removed the cron schedule to avoid running it on periodic basis, Based on your requirements you can add specific workflow trigger events. Check this [for more info](https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows) on Github Actions event triggers for the workflows.

![Changing branch name and removing schedule event trigger in the CodeQL workflow file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vlxs9l5srbdo7k1yxi3.png)

**3.5.** copy the **.github** folder from the main branch to the new branch(**code-scan-v3.4.0**), since it is missing in it. I have copied the folder & committed to the **code-scan-v3.4.0** branch. Since we have mentioned the workflow to be triggered on push & PR in the previous step, this push will also trigger the Code scanning.

> Make sure you have the CodeQL workflow changes in this branch, which we have added in the previous step.

![Pushing .github folder to code-scan-v3.4.0 branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r10m4hza6a028kgrdlwv.png)

![Code scanning workflow progress after code push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1u4tgddo59hpqt7xcs3.png)

![Code scanning workflow progress after code push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fco1xlf5md613kxrm7hm.png)


 
**3.6.** After the scanning is complete, you can find the alerts here:

![Alerts page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7an9s1tuxts1cnqt3xf.png)

Change the branch name in the filters to see the alerts belongs to **code-scan-v3.4.0** branch.

![Alerts page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yzq8vqqeusidmjm1wkt.png)

You can now see the Unsafe jQuery plugin alerts which are similar to the workshop video.

![Alerts page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9olbble7g47x87qkmmp.png)

To trigger the workflow again either you can Re-run the old job or push a new commit in the branch. For Re-running click on Re-run all jobs in the CodeQL workflow summary page:

![Re-running workflows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dcgo1mv296fbjao3sh8.png)

![Re-running workflows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/237di3sr78p5gx1bmx8y.png)

The above Code scanning was done using Github actions using the free minutes available in the public repository quota. 
 Code scanning is also available in private repositories owned by organizations that use GitHub Enterprise Cloud and have a license for GitHub Advanced Security. For more information, please [read this](https://docs.github.com/en/get-started/learning-about-github/about-github-advanced-security). 

[Read this](https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions) to know more about Actions billing.

 Additionally you can also run the code scanning using an external CI system, [read this](https://docs.github.com/en/code-security/code-scanning/using-codeql-code-scanning-with-your-existing-ci-system/about-codeql-code-scanning-in-your-ci-system) for setting up custom runner of CodeQL.

 Please read this GitHub CodeQL Terms and Conditions before using it, use enterprise license for purposes beyond this [**scope**](https://github.com/github/codeql-cli-binaries/blob/main/LICENSE.md#use-rights-scope-of-license) & [**restrictions**](https://github.com/github/codeql-cli-binaries/blob/main/LICENSE.md#license-restrictions).
 
Also [Read this](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/recommended-hardware-resources-for-running-codeql) to know about the hardware resources requirements for running CodeQL.

> FYI, There are other scanners available in the Github 
> marketplace in addition to the [CodeQL Scanner](https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/about-code-scanning-with-codeql). 
> Check the below image to add other workflows

![Github workflow marketplace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7wyxik5nbnx2zzvrpuk.png)

Hope this helps!