You're 5 Minutes Away from Code Quality & Code Security

Rate this content

In this session I'll use a live demo to show how effortless it is to add Code Quality and Code Security to your project with SonarCloud - not just for now but for every commit going forward.

7 min
01 Jul, 2021

AI Generated Video Summary

Sonar Cloud makes it easy to set up projects for code quality and security analysis. It automatically analyzes code and provides insights into bugs, vulnerabilities, and other issues. The UI helps understand vulnerability flow across functions and files. Sonar Cloud supports multiple languages and offers rule descriptions and code samples for best practices. Overall, it simplifies code analysis and helps developers improve code quality.

1. Introduction to Sonar Cloud

Short description:

Hi, I'm Ann Campbell with SonarSource. Today, I want to show you how easy it is to set up your projects with code quality and code security. I'll start by logging in with my GitHub account and selecting the repositories I want to analyze. Then, I'll create my organization and choose the repositories to analyze. It's that simple!

Hi, I'm Ann Campbell with SonarSource. I don't have any slides for you today. I'm going to try something that's a little bit risky given the time constraints, but this should work out okay. So what you're seeing right now is the front page of Sonar Cloud, which is a SAS product, a SAS-SAS product, to add code quality and code security to your repository. And I want to show you today how easy that is.

So I'm going to start by logging in. Now I already have an account, so you're going to see that reflected in my experience. But as a new user, all you would have to do is choose your ALM to sign in with, and it creates your account for you. So I'm going to start with GitHub, because I have an account there. And it logs me in and shows me the projects that I have access to. But that's not what I want to show you today. What I want to show you today is how easy it is to set up your projects with code quality and code security.

So I'm going to go to the PLUS to analyze a new project. Now it asks me if I want to analyze a project from one of the existing organizations that I already have access to. But again, that's not what I want to show you today. I'm going to show you creating an organization from my ALM. So I'm going to choose GitHub. And when I get here, it says which organization do you want on GitHub? I'm going to choose my private one. And now GitHub is asking me to grant permissions. Now, I don't want to give Sonar Cloud, I'm just trying this out, right? So I don't want to give Sonar Cloud permission to all my repositories. I'm going to select the repositories that I've chosen, I've forked recently for this demonstration. So I type in my repositories and there are a couple that I want to show you. And once I've got them selected, I can save that. That brings me back to Sonar Cloud, where I've got a couple more steps to get through. So I have to name, set a key for my organization. I'm going to go with the default. I do want the free plan, Sonar Cloud is free for open source projects. So I'm going to create my organization like that. Now Sonar Cloud is asking me, of the repositories it has access to, which ones I want to analyze? I want to analyze both of them. Now I click Setup.

2. Code Analysis and Issue Exploration

Short description:

Sonar Cloud automatically analyzes my code, eliminating the need for CI/CD setup. It analyzes the latest version of master and runs the analysis for every commit and new PR on my main branch. The results are reflected in my PR in GitHub. I have zero bugs, some vulnerabilities, and other issues. Let's dive into the issues and look at the blocker issues and rules. One of the rules is that database queries should not be vulnerable to injection attacks. This application demonstrates vulnerabilities, and the UI makes it easy to understand the vulnerability flow across functions and files. Now, let's switch to another project and explore something on the Issues page under the list of languages.

And what's happening now is Sonar Cloud is checking out my code. And it's taking a look at it to see if it can automatically analyze it for me. So I don't have to do any CI CD setup here. It's just going to handle it for me.

So it looks at my code, it says, yes, I can run an automatic analysis on this. And it's analyzing the latest version of master. And from this point forward, for every commit on my main branch, and for every new PR, it's going to run that analysis for me, reflects the results in my PR in GitHub, with a check on my PR.

So now my little application has already finished analyzing. Let's jump in and see what I've got. So here's my overview. Zero bugs, I've got some vulnerabilities. I've got some other issues, but what I really want to show you here is the issues. So here I've got my list of issues. It's not terribly useful though to just see a list of issues without contact. So I'm going to dive in here. Let's look at the blocker issues, and look at the rules. And I've got database queries should not be vulnerable to injection attacks. So let's see which ones those are. And I'm going to click on this to see the issue in the context of the code.

Now, this application was crafted to demonstrate vulnerabilities. And so what we're seeing here is really compact vulnerability flow. But the reality is that in normal projects, the vulnerability flow is going to span not just functions, but probably pages as well, different files in the project. We've crafted the UI, even though you're not quite seeing that here, to make that flow across functions and files easy to understand. So that's what I wanted to show you in this project.

Now, I'm going to return to my list of projects. And my other one is done analyzing by now. So I want to jump into that one. And again, I've got my overview here at the top. And I want to show you something on the Issues page. And that is here under the list of languages.

3. JavaScript Analysis and Rule Descriptions

Short description:

Today, we're focusing on JavaScript, but it's important to note that Sonar Cloud analyzes multiple languages in a project. This comprehensive analysis provides valuable insights into issues in both JavaScript and HTML code. Sonar Cloud also offers rule descriptions and code samples to help developers understand the importance of following best practices and how to fix issues in their own code. Thank you for your time and attention!

So now we're here to talk about JavaScript today. And that's primarily what I'm looking at. But I do want to point out to you that I've got issues raised on both the JavaScript and the HTML code in my project. It's a reality today that most projects are not monolingual. Most projects have multiple languages in them. And so for the cost of that one setup, I'm getting not just the analysis of my JavaScript, but of the other languages in my project as well. So that's pretty cool.

Now, again, to narrow it down to blockers, just to look at the most interesting things, if I look at the rules that are being broken, here's a dynamic code execution for injection attacks. Let's see what that one's about. All right. So here I've got a little bit larger issue flow. Now, maybe I'm not savvy about security. Maybe I don't understand why this is a problem. If that's the case, I've got the rule description here ready at hand so that I can understand not just why I should be following the rule, not just what bad thing can happen if I don't follow the rule, but I've also typically got some code samples so that I can see broken code, bad code, and then I can see that same code fixed so I can apply that pattern to my own code to make the fixes in my code.

So I'm almost out of time, but fortunately, I'm out of everything I wanted to say. Thank you very much for your time and attention, and I'll talk to you later. Thank you.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.

Workshops on related topic

React Summit 2023React Summit 2023
56 min
0 to Auth in an hour with ReactJS
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.