Azure

Scan SPFx Code For Vulnerabilities Utilizing SonarCloud In Azure DevOps

Introduction

 

As everyone knows, it’s crucial for builders to write down higher and maintainable code, so checking or scanning code for vulnerabilities is an important process because it improves code high quality and reduces general upkeep prices when applied as a part of a steady construct and deploy course of.

 

On this article, I’ll clarify a few instrument known as SonarCloud (totally free for open supply initiatives) utilizing which you’ll be able to spotlight the problems, bugs and so forth. in your code and may repair  leaks and subsequently enhance code high quality systematically. Additionally, you will note how you need to use this instrument with Azure DevOps Pipeline in steady construct course of.

 

Let’s get began!

 

For utilizing SonarCloud in Azure DevOps Pipeline, you could implement the under steps within the given order,

  • Set up the SonarCloud Market extension.
  • Create a SonarCloud service connection.
  • Add variables to Azure Pipelines.
  • Add scan duties to your Azure Pipelines configuration.
  • Analyze the outcomes on SonarCloud.

Set up the SonarCloud Market extension

  • When you click on on the  “Get it free” button, you’ll be redirected to a different web page the place you could choose your Azure DevOps group from the drop-down field.

    After deciding on the group, click on on Set up button and an e-mail will likely be triggered to Azure admin for approval so as to add this extension. If the extension is already added in your DevOps account, then you will note the under picture,

Create a SonarCloud service connection

 

Azure pipeline duties require entry to SonarCloud, so you could create a service connection from the Microsoft Azure DevOps portal. A service connection supplies safe entry to an exterior service, equivalent to SonarCloud.

  • From Azure DevOps, navigate to your undertaking and choose Challenge settings within the decrease nook.

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

  • Beneath Pipelines, choose Service connections.

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

  • Choose New service connection, then choose SonarCloud, after which choose Subsequent.

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

  • Within the dialog field that seems, enter the under particulars after which click on on Confirm and save,
    1. SonarCloud Token
    2. Connection title
Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

 

NOTE

Azure DevOps performs a take a look at connection to confirm that it might probably hook up with Sonar Cloud.

 

Now the query is what’s “SonarCloud Token” and the right way to generate it?

  • For creating this token, navigate to the URL – https://sonarcloud.io/ . Under is the display screen shot of this URL displaying that you would be able to analyze your repo from Four sources i.e. GitHub, Bitbucket, Azure DevOps and GitLab. On this article, we are going to use Azure DevOps.

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

  • Login to SonarCloud web site utilizing your Azure Devops account and click on on “My Account” as proven in under picture,

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

  • Click on on “Safety” tab and generate the token as proven in under picture,

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

  • As soon as the token will likely be generated, you’ll be able to copy the token and may use it  in your Azure DevOps pipeline (in continuation with Step-Four above), as proven within the under picture,

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

  • Add the token in Azure DevOps service connection and click on on Confirm and save.

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

  • As soon as the token will likely be verified, a brand new service connection will likely be created in Azure Devops Pipeline, as proven within the under picture,

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

Add variables to Azure Pipelines

 

Let’s add a number of variables to the pipeline.

  • From Azure DevOps, navigate to your pipeline and choose Edit.
  • Choose Variables on the high proper and click on on “Add”.
  • Create three variables – SonarProjectKey, SonarProjectName and SonarOrganization, as proven in under picture,

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

These variables will likely be used whereas configuring the settings for SonarCloud duties in Azure DevOps Pipeline.

 

Add scan duties to your Azure Pipelines configuration

 

SonarCloud Market extension supplies built-in process sorts that performs the scan.

 

You possibly can add three completely different kind of duties in Azure DevOps pipeline to scan the code. These three duties are,

  • Put together Evaluation Configuration process – This process is required to configure all of the required settings earlier than executing the construct. For this process,
    1. You must create a corporation in SonarCloud, as proven within the under picture,

      Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

    2. When you click on on “Create new group”, a Key must be entered, as proven within the under picture,

      Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

    3. As soon as secret’s added, you could choose a plan. You possibly can choose a Free plan to your testing objective after which click on on Create Group, as proven within the under picture,

      Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

    4. As soon as group is created in SonarCloud, you’ll be able to add the duty in Azure Pipeline, as proven within the under picture,

      Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

  • Run Code Evaluation process – This process is used to really execute the evaluation of the supply code. Add this process in Azure DevOps pipeline, as proven within the under picture,

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

  • Publish High quality Gate Outcome process – This process is used to show the High quality Gate standing within the construct abstract and offer you a way of whether or not the appliance is prepared for manufacturing or not. Add this process in Azure DevOps pipeline, as proven in under picture,

    Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps

Analyze the outcomes on SonarCloud

 

As soon as your pipeline runs efficiently, analyze the outcomes by navigating to the SonarCloud portal, refresh the web page, after which look at the outcomes. Under is the display screen shot displaying evaluation of 1 the pipeline run utilizing SonarCloud extension,

 

Scan SPFx Code For Vulnerabilities Using SonarCloud In Azure DevOps 

 

Vital NOTE

There’s yet another freely out there extension which you need to use from Market for scanning your code with Azure DevOps known as – SonarQube. This extension additionally supplies steady inspection of your code high quality and therefore empowers the event groups.

 

Abstract

 

On this article, I defined in regards to the SonarCloud extension which can be utilized in Azure DevOps pipeline to scan points/bugs and different vulnerabilities in your code and may give you outcomes earlier than the construct course of which may assist in bettering the general high quality of your code.

Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button