Member preview

Set up SonarQube for JavaScript Application

SonarQube is an Open Source Software for static code scanning to discover potential vulnerabilities, bugs and code smells.

Objective:

To set up the SonarQube for a JavaScript project, please follow the instructions below:

Pre-requisites:

  • Have Docker up and running on your machine. For more information on Docker platform, you may want to read this

Step1:

Clone this repository or download the zip file of the project alternatively. This is a very basic demo React application.

git clone https://github.com/deekshasharma/react-app-sonarqube.git

Step2:

Assuming that Docker is already installed on your machine, we need to run SonarQube server inside the Docker container. To run SonarQube server, run the below command on the terminal to start.

$ docker run -d --name SonarQube -p 9000:9000 -p 9092:9092 sonarqube

To verify if the container started without errors, run the commands:

# List running docker containers
$ docker ps
# List all docker containers including the stopped one
$ docker ps
-a

Step3:

Since we are analyzing a Javascript project, we need to verify if SonarQube server has the JavaScript plugin already enabled. To do this, run the following commands:

# Go inside the running docker
$ docker exec
-it SonarQube-server bash
# List all plugins, JS plugin should be inside plugins/ directory
$ ls extensions/plugins/
# Exit the container
$ exit

To view the Admin UI for the SonarQube-server, hit this URL on the browser http://localhost:9000

Step4:

Now we have the JS application code on our machine and SonarQube server is up and running. We need SonarQube scanner, an analyzer to perform static code scans on code base. At the end it sends the analysis to SonarQube server. You can download the SonarQube-Scanner for the appropriate OS from here.

SonarQube Scanner needs a way to communicate with SonarQube-server for publishing and processing the analyzed results. After you have downloaded scanner, provide the information of SonarQube server to this scanner to establish this communication channel.

$ cd sonar-scanner-3.0.1.733
sonar-scanner-3.0.1.733 $ vi
conf/sonar-scanner.properties

Add the address of the SonarQube server. Below is the default address but you want want to change this if server is running on a different host/port.

sonar-scanner.properties

sonar.host.url=http://localhost:9000

For SonarQube-scanner/ analyzer to analyze a project, we need to perform the following configuration steps.

  • Add the sonar-scanner binary to PATH. This would allow SonarQube-Scanner binary to run from any location. To do this run this command:
export PATH=$PATH:$HOME/Downloads/sonar-scanner-3.0.1.733-macosx/bin

Note: Replace the path <$HOME/Downloads/> to the location on your machine where sonar-scanner is installed

  • Add a configuration file inside the React project root directory. This is to ensure that SonarQube-Scanner can find this config file and start analyzing.
# Go inside the React project directory
$ cd
react-app-sonarqube

It has the following content in sonar-project.properties file.

sonar-project.properties

sonar.projectKey=sonar-reactapp
sonar.projectName=sonar-reactapp
sonar.projectVersion=1.0
sonar.sources=src
sonar.sourceEncoding=UTF-8

Step6:

Now we are all set to scan the JS application codebase. Start scanning the code base using the below command from within the project root directory.

$ cd react-app-sonarqube
react-app-sonarqube $ sonar-scanner

You should be able to see the log trace while scanner is analyzing each file. Ensure that you see “EXECUTION SUCCESS” at the end of scanning. The logs should look like below

Deekshas-MacBook-Pro:demo-reactapp deeksha$ sonar-scanner
INFO: Scanner configuration file: /Users/deeksha/Downloads/sonar-scanner-3.0.1.733-macosx/conf/sonar-scanner.properties
INFO: Project root configuration file: /Users/deeksha/WebstormProjects/demo-reactapp/sonar-project.properties
INFO: SonarQube Scanner 3.0.1.733
INFO: Java 1.8.0_121 Oracle Corporation (64-bit)
INFO: Mac OS X 10.11.6 x86_64
INFO: User cache: /Users/deeksha/.sonar/cache
INFO: Load global settings
INFO: Load global settings (done) | time=187ms
INFO: User cache: /Users/deeksha/.sonar/cache
INFO: Load plugins index
INFO: Load plugins index (done) | time=12ms
INFO: SonarQube server 6.3.1
INFO: Default locale: "en_US", source code encoding: "UTF-8"
INFO: Process project properties
INFO: Load project repositories
INFO: Load project repositories (done) | time=20ms
INFO: Load quality profiles
INFO: Load quality profiles (done) | time=117ms
INFO: Load active rules
INFO: Load active rules (done) | time=1330ms
INFO: Load metrics repository
INFO: Load metrics repository (done) | time=169ms
WARN: SCM provider autodetection failed. No SCM provider claims to support this project. Please use sonar.scm.provider to define SCM of your project.
INFO: Publish mode
INFO: Project key: sonar-reactapp
INFO: ------------- Scan sonar-reactapp
INFO: Load server rules
INFO: Load server rules (done) | time=601ms
INFO: Initializer GenericCoverageSensor
INFO: Initializer GenericCoverageSensor (done) | time=0ms
INFO: Base dir: /Users/deeksha/WebstormProjects/demo-reactapp
INFO: Working dir: /Users/deeksha/WebstormProjects/demo-reactapp/.scannerwork
INFO: Source paths: src
INFO: Source encoding: UTF-8, default locale: en_US
INFO: Index files
INFO: 6 files indexed
INFO: Quality profile for js: Sonar way
INFO: Sensor NoSonar Sensor [php]
INFO: Sensor NoSonar Sensor [php] (done) | time=0ms
INFO: Sensor Coverage Report Import [csharp]
INFO: Sensor Coverage Report Import [csharp] (done) | time=0ms
INFO: Sensor Coverage Report Import [csharp]
INFO: Sensor Coverage Report Import [csharp] (done) | time=1ms
INFO: Sensor Unit Test Results Import [csharp]
INFO: Sensor Unit Test Results Import [csharp] (done) | time=0ms
INFO: Sensor XmlFileSensor [java]
INFO: Sensor XmlFileSensor [java] (done) | time=0ms
INFO: Sensor Analyzer for "php.ini" files [php]
INFO: Sensor Analyzer for "php.ini" files [php] (done) | time=8ms
INFO: Sensor JavaScript Squid Sensor [javascript]
INFO: 3 source files to be analyzed
INFO: 3/3 source files have been analyzed
INFO: Unit Test Coverage Sensor is started
INFO: Integration Test Coverage Sensor is started
INFO: Overall Coverage Sensor is started
INFO: Sensor JavaScript Squid Sensor [javascript] (done) | time=530ms
INFO: Sensor Zero Coverage Sensor
INFO: Sensor Zero Coverage Sensor (done) | time=46ms
INFO: Sensor Code Colorizer Sensor
INFO: Sensor Code Colorizer Sensor (done) | time=1ms
INFO: Sensor CPD Block Indexer
INFO: org.sonar.scanner.cpd.deprecated.DefaultCpdBlockIndexer@19ae36f4 is used for js
INFO: Sensor CPD Block Indexer (done) | time=0ms
INFO: No SCM system was detected. You can use the 'sonar.scm.provider' property to explicitly specify it.
INFO: Calculating CPD for 1 files
INFO: CPD calculation finished
INFO: Analysis report generated in 137ms, dir size=24 KB
INFO: Analysis reports compressed in 19ms, zip size=9 KB
INFO: Analysis report uploaded in 502ms
INFO: ANALYSIS SUCCESSFUL, you can browse http://localhost:9000/dashboard/index/sonar-reactapp
INFO: Note that you will be able to access the updated dashboard once the server has processed the submitted analysis report
INFO: More about the report processing at http://localhost:9000/api/ce/task?id=AVu5lXB8p1gHLP0YKTJM
INFO: Task total time: 6.473 s
INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 9.029s
INFO: Final Memory: 45M/262M
INFO: ------------------------------------------------------------------------

Step7:

Verify the vulnerabilities on the Admin UI http://localhost:9000

Below is the screen shot from the code scan. This project has no vulnerabilities but you should be able to view here if your project has any.