การวิเคราะห์โค้ดด้วย SonarQube

สร้างโปรเจคใน SonarQube

1. เข้าใช้งาน https://codescan.in.psu.ac.th และเข้าสู่ระบบด้วย PSU Passport

   <img src="/img/docs-images/WebSecurity/sonarqube/login.png" alt="SonarQube Login" width="400" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

2. คลิกปุ่ม Create Project -> Local Project เพื่อสร้างโปรเจคใหม่

   <img src="/img/docs-images/WebSecurity/sonarqube/create_project.png" alt="SonarQube Create Project" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

3. กรอกข้อมูลโปรเจค ดังรูป

   <img src="/img/docs-images/WebSecurity/sonarqube/create_project_form.png" alt="SonarQube Create Project Form" width="400" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

4. เลือก Baseline ดังรูป จากนั้นคลิกปุ่ม Create Project

   <img src="/img/docs-images/WebSecurity/sonarqube/create_project_baseline.png" alt="SonarQube Create Project Baseline" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

5. หน้าจอเมื่อสร้างโปรเจคเสร็จสิ้น โดยค่าเริ่มต้น Project จะเป็น Public หากต้องการปรับเป็น Private ให้แจ้ง Admin (แจ็ค, เอก, กร)

   <img src="/img/docs-images/WebSecurity/sonarqube/create_project_complete.png" alt="SonarQube Create Project Complete" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

สร้าง PAT เพื่อใช้งาน SonarQube Scanner CLI บน Azure DevOps

1. คลิกที่ Username เลือกเมนู My Account -> Security -> Generate Token

   <img src="/img/docs-images/WebSecurity/sonarqube/myaccount.png" alt="SonarQube My Account" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

2. ตั้งชื่อ Token เลือกประเภทเป็น Golbal Analysis Token และกำหนดหมดอายุเป็น No expiration แล้วคลิกปุ่ม Generate

   <img src="/img/docs-images/WebSecurity/sonarqube/generate_token.png" alt="SonarQube Generate Token" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

3. คัดลอก Token ที่ได้ และเก็บไว้เพื่อใช้งาน จะไม่สามารถเปิด Token ดูได้ในภายหลัง

   <img src="/img/docs-images/WebSecurity/sonarqube/copy_token.png" alt="SonarQube Copy Token" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

ติดตั้ง SonarQube Server Extension ใน Azure DevOps

1. ไปที่ Collection Settings ต้องมีสิทธิจัดการ Collection

   <img src="/img/docs-images/WebSecurity/sonarqube/collection_settings.png" alt="Collection Settings" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

2. เลือกเมนู Extensions -> Browse marketplace

   <img src="/img/docs-images/WebSecurity/sonarqube/browse_marketplace.png" alt="Browse marketplace" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

3. ค้นหา SonarQube Server และคลิกปุ่ม Get it free

   <img src="/img/docs-images/WebSecurity/sonarqube/install_extension.png" alt="Install Extension" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

4. เลือก Select team project collection แล้วคลิกปุ่ม Install เมื่อติดตั้งเสร็จสิ้น เลือก Proceed to collection

   <img src="/img/docs-images/WebSecurity/sonarqube/install_extension_select_collection.png" alt="Get it free" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

การสร้าง Service connections ไปยัง SonarQube Server

1. ไปที่ Project Settings

   <img src="/img/docs-images/WebSecurity/sonarqube/project_settings.png" alt="Project Settings" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

2. เลือกเมนู Service connections -> New service connection

   <img src="/img/docs-images/WebSecurity/sonarqube/new_service_connection.png" alt="New Service Connection" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

3. เลือก SonarQube Server และกรอกข้อมูลดังนี้

   • Server Url: http://codescan.in.psu.ac.th
   • Token: ค่า PAT ที่สร้างไว้
   • Service connection name: ชื่อ Connection ใช้คำว่า sonarqube เพื่อให้ตรงกับ pipeline.yml
   • Grant access permission to all pipelines: เลือกเครื่องหมายถูก จะได้ไม่ต้องกำหนดสิทธิ์ให้แต่ละ Pipeline แต่จะสามารถใช้งานได้ทุก Pipeline ที่สร้างใน Project นี้

   <img src="/img/docs-images/WebSecurity/sonarqube/service_connection_form.png" alt="SonarQube Server Connection" width="400" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

4. คลิกปุ่ม Save

การสร้าง Azure DevOps Pipeline สำหรับวิเคราะห์โค้ดด้วย SonarQube

1. สร้าง Pipeline ใหม่ โดยเลือกเมนู Pipelines -> New Pipeline

   <img src="/img/docs-images/WebSecurity/sonarqube/new_pipeline.png" alt="New Pipeline" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

2. เลือก Azure Repos Git เพิ่มรูป

3. และเลือกโปรเจคที่ต้องการวิเคราะห์ จากนั้นคลิกปุ่ม Continue

   <img src="/img/docs-images/WebSecurity/sonarqube/select_repo.png" alt="Select Repo" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

4. เลือก Starter pipeline และคลิกปุ่ม Save and run

   <img src="/img/docs-images/WebSecurity/sonarqube/starter_pipeline.png" alt="Starter Pipeline" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

5. แก้ไขค่า Pipelines ดังนี้

   • [PROJECT_NAME]: ชื่อโปรเจคที่สร้างใน SonarQube
   • [PROJECT_KEY]: โปรเจค Key ที่สร้างใน SonarQube
   • [PROJECT_PATH]: Path ไปยังไฟล์ .sln
   • [SDK_VERSION]: เวอร์ชัน SDK ที่ใช้ในโปรเจค ตัวอย่างเช่น 8.0.401 หรือ 8.0.x

   pool: agent-pool-codescan
   
   trigger:
   - master 
   
   variables:
    project_name: '[PROJECT_NAME]'
    project_key: '[PROJECT_KEY]'
    solution: '**/*.sln'
    sdk_version: [SDK_VERSION]
   
   steps:
   - task: UseDotNet@2
     inputs:            
   	packageType: sdk
   	version: $(sdk_version)
   	installationPath: $(Agent.ToolsDirectory)/dotnet
   
   - task: SonarQubePrepare@7
     inputs:
   	SonarQube: 'sonarqube'
   	scannerMode: 'dotnet'
   	projectKey: '$(project_key)'
   	projectName: '$(project_name)'
   
   - task: DotNetCoreCLI@2
     inputs:
   	command: 'restore'
   	projects: '$(solution)'
   
   - task: DotNetCoreCLI@2
     inputs:
   	command: 'build'
       projects: '$(solution)'
       arguments: '--configuration Release --no-restore'
   
   - task: SonarQubeAnalyze@7
     inputs:
   	jdkversion: 'JAVA_HOME_17_X64'
   
   - task: SonarQubePublish@7
     inputs:
   	pollingTimeoutSec: '300'

6. คลิกปุ่ม Save and run

7. เลือกเมนู Pipelines -> Runs เพื่อตรวจสอบสถานะของ Pipeline

8. คลิกที่รายการผลการรัน เลือก Extensions เพื่อดูผลการวิเคราะห์โค้ด

   • Quality Gate: จะแสดงผลการวิเคราะห์โค้ดว่าผ่านหรือไม่ โดยจะแสดงเป็นสีเขียวหรือแดง ถ้าผ่านจะเป็นสีเขียว ถ้าไม่ผ่านจะเป็นสีแดง และจะแสดงข้อความว่าเกิดข้อผิดพลาดอะไรขึ้น
   • See analysis details on SonarQube: เป็นลิงก์ที่จะนำไปยังหน้า SonarQube เพื่อดูรายละเอียดของการวิเคราะห์โค้ด

   <img src="/img/docs-images/WebSecurity/sonarqube/devops_result.png" alt="Pipeline Result" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>

การตรวจสอบผลการวิเคราะห์โค้ดบน SonarQube Server

1. ไปที่หน้าโปรเจคที่สร้างใน SonarQube และคลิกที่ Dashboard (หรือคลิกลิ้งค์มาจาก DevOps ก็จะมายังหน้านี้ของโปรเจค)

   • Security: จำนวน issue ที่เกี่ยวกับความปลอดภัย เช่น SQL Injection, XSS, CSRF เป็นต้น
   • Reliability: จำนวน issue ที่เกี่ยวกับความน่าเชื่อถือของโค้ด เช่น Null Pointer Exception, Unhandled Exception เป็นต้น
   • Maintainability: จำนวน issue ที่เกี่ยวกับความสามารถในการบำรุงรักษาโค้ด เช่น Code Smell, Duplicated Code เป็นต้น

   <img src="/img/docs-images/WebSecurity/sonarqube/project_dashboard.png" alt="Project Dashboard" style={{border: '1px solid #cccccc', borderRadius: '8px'}}/>