SonarQube - это программное обеспечение с открытым исходным кодом для статического сканирования кода с целью обнаружения потенциальных уязвимостей, ошибок и запахов кода.

Цель:

Чтобы настроить SonarQube для проекта JavaScript, следуйте приведенным ниже инструкциям:

Предварительные условия:

  • Запустите Docker на вашем компьютере. Для получения дополнительной информации о платформе Docker вы можете прочитать это

Шаг 1:

Клонируйте этот репозиторий или загрузите zip-файл проекта. Это очень простое демонстрационное приложение React.

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

Шаг 2:

Предполагая, что Docker уже установлен на вашем компьютере, нам нужно запустить сервер SonarQube внутри контейнера Docker. Чтобы запустить сервер SonarQube, запустите следующую команду на терминале.

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

Чтобы проверить, запустился ли контейнер без ошибок, выполните команды:

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

Шаг 3:

Поскольку мы анализируем проект Javascript, нам необходимо проверить, включен ли уже на сервере SonarQube плагин JavaScript. Для этого выполните следующие команды:

# 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

Чтобы просмотреть пользовательский интерфейс администратора для сервера SonarQube, нажмите этот URL-адрес в браузере http: // localhost: 9000

Шаг 4:

Теперь у нас есть код JS-приложения на нашей машине, и сервер SonarQube запущен и работает. Нам нужен сканер SonarQube, анализатор для выполнения статического сканирования кода на базе кода. В конце он отправляет анализ на сервер SonarQube. Вы можете скачать SonarQube-Scanner для соответствующей ОС здесь.

Сканеру SonarQube необходим способ связи с SonarQube-сервером для публикации и обработки проанализированных результатов. После загрузки сканера предоставьте ему информацию о сервере SonarQube, чтобы установить этот канал связи.

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

Добавьте адрес сервера SonarQube. Ниже указан адрес по умолчанию, но вы хотите изменить его, если сервер работает на другом хосте / порту.

sonar-scanner.properties

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

Чтобы SonarQube-сканер / анализатор проанализировал проект, нам необходимо выполнить следующие шаги настройки.

  • Добавьте двоичный файл сонара-сканера в PATH. Это позволит запускать двоичный файл SonarQube-Scanner из любого места. Для этого выполните следующую команду:
export PATH=$PATH:$HOME/Downloads/sonar-scanner-3.0.1.733-macosx/bin

Примечание: замените путь ‹$ HOME / Downloads /› на то место на вашем компьютере, где установлен сонар-сканер.

  • Добавьте файл конфигурации в корневой каталог проекта React. Это необходимо для того, чтобы SonarQube-Scanner мог найти этот файл конфигурации и начать анализ.
# Go inside the React project directory
$ cd react-app-sonarqube

Он имеет следующее содержимое в файле sonar-project.properties.

sonar-project.properties

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

Шаг 6:

Теперь мы готовы сканировать кодовую базу JS-приложения. Начните сканирование базы кода с помощью приведенной ниже команды из корневого каталога проекта.

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

Вы должны увидеть трассировку журнала, пока сканер анализирует каждый файл. Убедитесь, что вы видите «EXECUTION SUCCESS» в конце сканирования. Журналы должны выглядеть так, как показано ниже

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: ------------------------------------------------------------------------

Шаг 7:

Проверьте наличие уязвимостей в пользовательском интерфейсе администратора http: // localhost: 9000

Ниже приведен снимок экрана со сканированием кода. У этого проекта нет уязвимостей, но вы можете просмотреть здесь, если они есть в вашем проекте.

Если вам нравится делиться этим, вы можете подписаться на меня в Твиттере или поделиться им с людьми, которые вам небезразличны!

Https://twitter.com/deekshasharma25