Static Analysis Using SonarQube in a React Webapp
(Updated on July 2024) Security is one of the most important topics we need to focus on when we are writing code. Having a stable and quality product also means that we should make sure that our code has no vulnerabilities. Depending on the project, it will require us to use more sophisticated software to test our code. In this post, we are going to run a static analysis in a sample React JS project using SonarQube. One advantage of using javascript as the main language is that it has low severity flaws according to this Veracode report.
“Security used to be an inconvenience sometimes, but now it’s a necessity all the time”- Martina Navratilova
What is static analysis?
According to the OWASP: Static Application Security Testing (SAST) is a tool designed to analyze code source or compiled versions of code to help find security flaws.
What is SonarQube?
SonarQube is an automatic code review tool that detects bugs, vulnerabilities, and code smells in a project. It has support for 27 different programming languages.
It has different plans for different needs but for this post, we are going to use the community version which is free and open-source.
Why use SonarQube?
- Its open-source version is free despite its commercial competitors.
- It empowers developers to write cleaner and safer code.
- It helps you to reduce technical debt with clean and maintainable code, to increase developer velocity!
- It allows you to identify possible security flaws before going to production.
- It can be added to CI/DC flows.
- Preventions will always be cheaper than solving a big security issue when it appears.
Setup SonarQube on local pc
This post shows you how to configure SonarQube on a Reactjs project but a similar setup can be also used on React Native or any other Nodejs project.
Step 1: Make sure you have installed docker on your PC. If you have not installed it yet, you can download it from here.
Install the “sonarqube-scanner” package on your React project.
yarn add --dev sonarqube-scannerStep 2: Create a docker-compose.yml file in the root of your project folder and paste the following code. We use sonarqube 8.9.10 because it is the latest LTS version.
Step 3: Create a sonarqube folder on your root project folder and add a sonarscan.js file with the following content.
You can customize projectName and projectKey so they will be used in a future step. Also, the token will be updated then.
Step 4: To start the SonarQube server, run the following command.
docker compose upStep 5: In order to log in to SonarQube, go to http://localhost:9000. You should use these credentials.
Login: admin
Password: admin
After you login into the system, it will require you to change the password and finally, you will be able to see the main dashboard and we are ready to create a new project. Select Manually.
Step 6: Name your project as you prefer. I recommend you use the same name as your React project.
Step 7: Generate a token for the project, you can use any name you want I used my_test_app to make it easier to remember. When the token is generated, save it in a safe place you will need it later.
Select locally
Remember to save this token because it will be used in a future step to run an analysis!
Do not forget to replace this token on sonarscan.js file !!!
Step 8: Starting a new scan.
This previous step is if you are using git. Please add these lines to the .gitignore file.
.scannerwork
sonarqube/extensions
sonarqube/data
sonarqube/logsRun the following command in another terminal.
node ./sonarqube/sonarscan.jsIf everything is correct, wait some minutes and you will get a success message in the console.
Step 9: Finally return to SonarQube Dashboard and check how many bugs, vulnerabilities, Security Hotspots, and code smell have your code.
SonarQube is an awesome tool due to it not only shows you bugs, code vulnerabilities, and code smells, but it also shows you how to solve them.
- Bug: It is a programmer’s fault when a programmer intends to implement a particular behavior, but the code fails to correctly conform to this behavior because of incorrect implementation in coding. This needs to be fixed yesterday. It should be solved as soon as possible.
- Vulnerability: This flaw will allow hackers to take advantage of your code by attaching an endpoint to extract data, tamper your software, or worse, erase everything.
- Security hotspot: Security-sensitive piece of code that the developer needs to review manually. Upon review, you’ll either find there is no threat or you need to apply a fix to secure the code.
- Code smell: A maintainability-related issue in the code. It makes further changes harder and possibly will introduce additional errors with future changes.
Bonus Extra Step: If you need to print a report of the scan. You can download and install this plugin.
Note: This plugin is only compatible with SonarQube's latest LTS version.
It may require you to restart the server and finally export the report.
You can get a sample project from Github here
“The easiest problem to solve is the one you avoid.”
I recommend you to use sonarlint, HCL AppScan CodeSweep, and ESLint. They are really helpful in finding issues in your code while you write it.
Thanks for your time reading this post 😃 !!
Feel free to give me your feedback and comments and if you want me to cover another similar topic let me know in the comments. You can also follow 👍 me on my Linkedin account 😄.
Do you need some help?
We are ready to listen to you. If you need some help for creating the next big thing, you can contact our team on our website or at info@jrtec.io
