Vue CI에 구멍 검색 추가

DevOps는 개발자가 현재 익히 알고 있는 용어입니다.DevSecops라는 단어는 현재 유행하고 많은 언론의 주목을 받고 있다."sec"부분은 보안을 대표하지만, "sec"를 추가하는 것은 뚜렷하거나 간단하지 않습니다.우리가 취할 수 있는 "sec"를 추가하는 방법은 코드가 의존하는 라이브러리가 안전하다는 것을 확보하는 것이다.이 단계는 DevSecOps에서 "sec"의 한 부분일 뿐입니다.결국 의존 관계의 빈틈은 라이브러리 작성자의 책임이지만 우리는 자신의 프로젝트에서 절차를 취해 라이브러리를 사용할 때 직면하는 위험을 이해하고 이 위험을 완화할 수 있도록 통지를 받을 수 있다.
이 글은 CI/CD 파이프의 알려진 빈틈을 찾기 위해 OWASP Dependency-Check tool 스캐닝 항목의 의존항을 어떻게 사용하는지 보여 준다.my previous post for more detail on this tool 보기이 글은 종속성 검사를 Vue에 추가하는 방법에 대해 간략하게 설명합니다.js 프로젝트, 그리고 Jenkins을 사용하여 CI/CD를 구축하는 동안 이 도구를 사용하고 결과를 SonarQube에 발표합니다.본고에서 사용한 문서는 found in this repo이다.

설정 중

우리 팀은 Jenkins를 사용하여 CI/CD를 제작합니다.CI에 종속성 검사를 추가하는 가장 간단한 방법은 plugin for Jenkins으로 추가하는 것입니다.이것은 모든 의존 항목을 처리하고 CI의 한 단계로 추가할 수 있으며 결과를 작업 페이지에 발표할 수 있습니다.
다른 한편, 나는 Jenkins 플러그인을 좋아하지 않는다.Jenkins 서버에 문제가 있는 구축은 디버깅하기 어렵고, 플러그인은 디버깅을 더욱 어렵게 합니다.저는 로컬에서 구축 스크립트를 실행할 수 있는 것을 더 좋아합니다. 그래서 저희 팀은 셸 스크립트를 사용하여 구축을 합니다. Jenkins는 함께 구축 작업을 만드는 플러그인 집합이 아니라 작업 관리자와 정보 발표자가 되었습니다.이것은 Jenkins 플러그인에 의해 설치될 수 있는 구성 요소를 서버에 직접 설치해야 하기 때문에 약간의 복잡성을 증가시켰다.물론, 이 구성 요소들을 로컬에 설치해야 합니다.그러나 끊임없는 제출-전송-구축 주기에 빠져 서버에서 중단된 작업을 하려고 했다면 이 방법을 감상할 수 있습니다.스크립트를 로컬에서 실행하고 변경할 수 있습니다. 스크립트가 작동할 때까지, 그리고 Jenkins에서 작업을 발표하려고 시도할 수 있습니다.Jenkins에서 실패하면 스크립트가 아닌 서버 구성이 주범일 수 있습니다.Jenkins 플러그인을 사용할 때 이 두 가지 오류를 구분하기가 매우 어렵다.
OWASP 의존 항목 검사를 설치하는 방법은 my previous post for guidance을 참조하십시오.컴퓨터에서 스크립트 문제를 해결하려면 구축 서버와 로컬에 설치해야 합니다.
플러그인이 설치되어 있으면 항목 검사 스캔에 의존하는 출력을 Jenkins에 게시할 수 있습니다.결과를 SonarQube에 발표할 수도 있습니다. 이것은 훌륭한 코드 정적 분석 도구입니다.나의 예에서, 우리는 SonarQube를 사용하는데, 이것이 바로 내가 묘사한 노선이다.테스트 어플리케이션이 Vue이기 때문입니다.js 웹 응용 프로그램, 우리는 SonarQube를 위해 스캐너를 설치해야 합니다.내 항목에 다음을 추가했습니다.npm install --save-dev sonarqube-scanner개발 의존항이기 때문에 최종 구축 코드에 추가되지 않습니다.우리의 구축 스크립트는 SonarQube와 통신해야 하기 때문에 환경 변수를 설정하여 증거를 처리합니다.서버에 직접 설정할 수도 있고, Jenkins plugin을 사용하여 작업이나 생성 노드에 설정할 수도 있습니다.

SONAR_URL=<YOUR SONAR URL>
SONAR_USER=<YOUR SONAR USERNAME>
SONAR_PASSWORD=<YOUR SONAR PASSWORD>

스크립트를 로컬에서 실행하려면 .env.local이라는 파일을 만들고 이 파일에 상술한 값을 추가합니다.구축 스크립트는 이 파일을 선택하고 스크립트가 실행되는 동안 환경 변수를 설정합니다.
프로젝트에 sonar-project.properties 파일이 하나 더 있습니다.이 파일을 사용하여 SonarQube의 기본값을 설정하고 SonarQube의 임계값을 설정하여 인식된 빈틈의 수에 따라 심각도를 보고합니다.

sonar.host.url=${env.SONAR_URL}
sonar.exclusions=dist/ **/*,reports/*,coverage/** /*
sonar.login=${env.SONAR_USER}
sonar.password=${env.SONAR_PASSWORD}
sonar.dependencyCheck.jsonReportPath=reports/dependency-check-report.json
sonar.dependencyCheck.htmlReportPath=reports/dependency-check-report.html
sonar.dependencyCheck.severity.blocker=9.0
sonar.dependencyCheck.severity.critical=7.0
sonar.dependencyCheck.severity.major=4.0
sonar.dependencyCheck.severity.minor=0.0
sonar.projectKey=demo-web

SonarQube 응용 프로그램에서 응용 프로그램 관리 영역의 Marketplace 섹션에서 종속성 검사 플러그인을 활성화해야 합니다.

의존 항목 검사 스캐너는 출력을 XML, JSON 및 HTML로 만들지만 생성할 형식을 선택합니다.나는 이 세 가지를 모두 출력으로 만들 것입니다. 당신의 상황에 따라 당신은 더 적게 할 수 있습니다.Jenkins 플러그인은 작업 페이지에 게시하기 위해 XML과 HTML이 필요합니다.SonarQube는 JSON과 HTML이 이 플랫폼에서 발표되기를 희망합니다.

구축 스크립트

다음은 우리의 구축 스크립트가 취할 절차입니다.

npm 설치

운행 단위 테스트

생산 건조

Docker 컨테이너 만들기

배치 용기

스캐닝 코드의 빈틈

결과를 SonarQube에 업로드하는 실례

#!/bin/bash

echo 'Clean up build directory'
git clean -fdx

echo 'npm tasks'
# Install dependencies
npm install

# Run unit tests
npm run test:unit

npm run build

# Create a Docker image
echo 'Docker tasks'
imageName="demo-web:1.0."

if [-z ${BUILD_NUMBER+x}];
    then
    echo "var is unset"
    imageName="${imageName}1"
    echo "build set to one";
    else
    echo "var is set to '$var'"
    imageName="${imageName}${BUILD_NUMBER}"
    repoName="${repoName}${BUILD_NUMBER}"
fi

docker build -t "${imageName}" .

# Remove running instances
echo 'Stop running container'
docker stop demo_web || true

echo 'Remove existing container'
docker rm demo_web || true

echo 'Start a new container'
# Start a container with this image
docker run --name demo_web --restart=always -v /data/log/demo-web:/var/log/nginx/log:rw -p 80:80 -p 443:443 -d "${imageName}"

# Clean up unused images
echo 'Remove old images'
# docker image prune -f

# Scan with dependency-check
echo 'Scan dependencies'
mkdir reports || true
dependency-check --scan ./ -f JSON -f HTML -f XML -o reports

# Set environment variables for Sonar credentials (local only)
set -a
. ./.env.local

echo 'SonarQube analysis'
# Run SonarQube scanner
./node_modules/sonarqube-scanner/dist/bin/sonar-scanner

현재, 당신은 create a job in Jenkins과 스크립트를 사용하여 우리의 코드를 구축, 배치, 분석할 수 있습니다.이 점을 테스트하기 위해 명령줄에서 구축 스크립트를 로컬로 실행할 수도 있습니다.만약 Jenkins를 사용하려고 한다면, 이 구축 스크립트를 Jenkins 파일로 쉽게 다시 만들 수 있지만, 로컬에서 테스트할 수 없습니다.

결과

의존항 검사가 실행될 때, 결과는 생성 스크립트에 지정된reports 디렉터리에 나타납니다.sonar-project.properties 파일에서, 우리는 수나 스캐너가 어디에서 이 파일들을 찾을 수 있는지 알려 준다.스캐너가 SonarQube에 업로드하여 결과 뷰에 통합합니다.

스캔 결과 세 개의 빈틈이 발견되었고 우리에게 불합격한 D급을 주었으며, 응용 프로그램이 SonarQube에 설치된 품질 문을 통과하는 것을 막았다.세부 정보를 보려면 구멍 수량 링크를 클릭합니다.

확실한 세 개의 라이브러리는 우리가 직접 npm에 추가한 라이브러리가 아니다.이 예에서 발견된 세 개의 공격받기 쉬운 라이브러리는 다음과 같다.

압축 해제: 4.2.1

yargs 해상도: 10.1.0

yargs 해상도: 13.1.2

그것들은 우리가 설치한 다른 라이브러리의 전달 의존 항목이다.우리는 그들을 추적해야 한다.명령줄에서 npm list <libraryname>을 실행하여 답을 찾을 수 있습니다.나는 yargs 해상도에서 그것을 시험적으로 사용했다. 이것은 의존성 검사 보고서의 두 가지 빈틈에 열거되어 있다.

yargs 해상도 라이브러리는 실제로 세 가지 의존 항목에 존재하는데 모두 다른 버전을 사용하는데 그 중 두 개(버전 10.1.0과 13.1.2)에 빈틈이 있다.다행히도, 이것들은 모두 우리의 개발 의존에서 발생하기 때문에, 구축된 응용 프로그램에 포함되지 않았다.결국 배포의 종속성이 되면 다음과 같은 조치를 취해야 합니다.

도서관의 환매문서

에서 이 문제를 보고하였다

더 좋은 것은 문제를 복구하고 라이브러리의repo

에pull 요청을 만드는 것입니다

에서 자물쇠의 버전을 변경하려고 시도합니다.json 파일.그리고 npm install을 다시 실행하고 응용 프로그램을 테스트합니다.만약 우리가 보고서의 링크를 따른다면, 우리는 13.1.2, 15.0.1, 18.1.1 이상의 버전이 공격을 받기 어렵다는 것을 발견할 수 있을 것이다.그러나 더 높은 버전이 의존하는 라이브러리를 파괴하지 않을 것이라고 보장할 수는 없다.YMMV.

문제를 해결하기 위해 다른 라이브러리 찾기

OWASP 종속성 검사를 통해 Vue 응용 프로그램 종속성에 대한 이해를 높여 CI/CD 프로세스의 빈틈을 발견할 수 있습니다.당신은 모르는 문제를 복구할 수 없습니다. 이 도구는 감지를 제공합니다. 제 예는 SonarQube에서 어떻게 이런 감지를 표현하는지 보여 줍니다.OWASP 의존 항목 검사 도구와 발표 절차를 CI/CD 과정에 추가하고 더욱 안전한 소프트웨어를 구축합니다.