Estás a 5 minutos de calidad de código y seguridad de código

Rate this content
Bookmark

En esta sesión utilizaré una demostración en vivo para mostrar lo fácil que es agregar calidad de código y seguridad de código a tu proyecto con SonarCloud, no solo por ahora, sino para cada confirmación en el futuro.

7 min
01 Jul, 2021

Video Summary and Transcription

Sonar Cloud facilita la configuración de proyectos para el análisis de calidad de código y seguridad. Analiza automáticamente el código y proporciona información sobre errores, vulnerabilidades y otros problemas. La interfaz de usuario ayuda a comprender el flujo de vulnerabilidad en las funciones y archivos. Sonar Cloud admite varios lenguajes y ofrece descripciones de reglas y ejemplos de código para las mejores prácticas. En general, simplifica el análisis de código y ayuda a los desarrolladores a mejorar la calidad del código.

Available in English

1. Introducción a Sonar Cloud

Short description:

Hola, soy Ann Campbell de SonarSource. Hoy quiero mostrarte lo fácil que es configurar tus proyectos con calidad de código y seguridad de código. Comenzaré iniciando sesión con mi cuenta de GitHub y seleccionando los repositorios que quiero analizar. Luego, crearé mi organización y elegiré los repositorios a analizar. ¡Es así de simple!

Hola, soy Ann Campbell de SonarSource. Hoy no tengo ninguna diapositiva para ustedes. Voy a intentar algo que es un poco arriesgado dadas las limitaciones de tiempo, pero esto debería funcionar bien. Así que lo que están viendo ahora es la página principal de Sonar Cloud, que es un producto SAS, un producto SAS-SAS, para agregar calidad de código y seguridad de código a tu repositorio. Y hoy quiero mostrarte lo fácil que es hacer eso.

Así que voy a comenzar iniciando sesión. Ahora ya tengo una cuenta, por lo que verán eso reflejado en mi experiencia. Pero como nuevo usuario, todo lo que tendrías que hacer es elegir tu ALM para iniciar sesión y se crea tu cuenta automáticamente. Así que voy a comenzar con GitHub, porque tengo una cuenta allí. Y me inicia sesión y me muestra los proyectos a los que tengo acceso. Pero eso no es lo que quiero mostrarte hoy. Lo que quiero mostrarte hoy es lo fácil que es configurar tus proyectos con calidad de código y seguridad de código.

Así que voy a ir a la opción PLUS para analizar un nuevo proyecto. Ahora me pregunta si quiero analizar un proyecto de una de las organizaciones existentes a las que ya tengo acceso. Pero nuevamente, eso no es lo que quiero mostrarte hoy. Voy a mostrarte cómo crear una organización desde mi ALM. Así que voy a elegir GitHub. Y cuando llego aquí, me pregunta qué organización quiero en GitHub. Voy a elegir la privada. Y ahora GitHub me está pidiendo que otorgue permisos. Ahora, no quiero darle permisos a Sonar Cloud, solo estoy probando esto, ¿verdad? Así que no quiero darle permiso a Sonar Cloud para todos mis repositorios. Voy a seleccionar los repositorios que he elegido, que he bifurcado recientemente para esta demostración. Así que escribo los nombres de mis repositorios y hay un par que quiero mostrarte. Y una vez que los he seleccionado, puedo guardar eso. Eso me lleva de vuelta a Sonar Cloud, donde tengo un par de pasos más que completar. Tengo que darle un nombre y establecer una clave para mi organización. Voy a ir con el valor predeterminado. Quiero el plan gratuito, Sonar Cloud es gratuito para proyectos de código abierto. Así que voy a crear mi organización de esa manera. Ahora Sonar Cloud me está preguntando, de los repositorios a los que tiene acceso, ¿cuáles quiero analizar? Quiero analizar ambos. Ahora hago clic en Configurar.

2. Análisis de Código y Exploración de Problemas

Short description:

Sonar Cloud analiza automáticamente mi código, eliminando la necesidad de configuración de CI/CD. Analiza la última versión de la rama principal y ejecuta el análisis para cada confirmación y nueva solicitud de extracción en mi rama principal. Los resultados se reflejan en mi solicitud de extracción en GitHub. No tengo errores, algunas vulnerabilidades y otros problemas. Vamos a profundizar en los problemas y ver los problemas bloqueantes y las reglas. Una de las reglas es que las consultas a la base de datos no deben ser vulnerables a ataques de inyección. Esta aplicación demuestra vulnerabilidades y la interfaz de usuario facilita la comprensión del flujo de vulnerabilidad en funciones y archivos. Ahora, cambiemos a otro proyecto y exploremos algo en la página de Problemas bajo la lista de lenguajes.

Y lo que está sucediendo ahora es que Sonar Cloud está revisando mi código. Y está echando un vistazo para ver si puede analizarlo automáticamente por mí. Así que no tengo que hacer ninguna configuración de CI/CD aquí. Simplemente se encargará de eso por mí.

Entonces, analiza mi código y dice que sí, puedo ejecutar un análisis automático en esto. Y está analizando la última versión de la rama principal. A partir de este momento, por cada confirmación en mi rama principal y por cada nueva solicitud de extracción, se ejecutará ese análisis por mí y se reflejarán los resultados en mi solicitud de extracción en GitHub, con una marca en mi solicitud de extracción.

Así que ahora mi pequeña aplicación ya ha terminado de analizar. Vamos a ver qué tengo. Aquí está mi resumen. Cero errores, tengo algunas vulnerabilidades. Tengo algunos otros problemas, pero lo que realmente quiero mostrarte aquí son los problemas. Aquí tengo mi lista de problemas. Sin embargo, no es muy útil ver solo una lista de problemas sin contexto. Así que voy a profundizar aquí. Veamos los problemas bloqueantes y las reglas. Tengo la regla de que las consultas a la base de datos no deben ser vulnerables a ataques de inyección. Veamos cuáles son esas. Voy a hacer clic en esto para ver el problema en el contexto del código.

Ahora, esta aplicación fue creada para demostrar vulnerabilidades. Así que lo que estamos viendo aquí es un flujo de vulnerabilidad realmente compacto. Pero la realidad es que en proyectos normales, el flujo de vulnerabilidad abarcará no solo funciones, sino probablemente también páginas y diferentes archivos en el proyecto. Hemos diseñado la interfaz de usuario, aunque no la estés viendo aquí, para que sea fácil de entender ese flujo a través de funciones y archivos. Eso es lo que quería mostrarte en este proyecto.

Ahora, voy a volver a mi lista de proyectos. Y mi otro proyecto ya ha terminado de analizar en este momento. Así que quiero entrar en ese. Una vez más, aquí tengo mi resumen en la parte superior. Y quiero mostrarte algo en la página de Problemas. Y eso está aquí, debajo de la lista de lenguajes.

3. Análisis de JavaScript y Descripciones de Reglas

Short description:

Hoy nos enfocamos en JavaScript, pero es importante tener en cuenta que Sonar Cloud analiza múltiples lenguajes en un proyecto. Este análisis exhaustivo proporciona información valiosa sobre problemas tanto en el código JavaScript como en HTML. Sonar Cloud también ofrece descripciones de reglas y ejemplos de código para ayudar a los desarrolladores a comprender la importancia de seguir las mejores prácticas y cómo solucionar problemas en su propio código. ¡Gracias por su tiempo y atención!

Así que ahora estamos aquí para hablar sobre JavaScript hoy. Y eso es principalmente en lo que estoy enfocándome. Pero quiero señalar que tengo problemas tanto en el código JavaScript como en el código HTML de mi proyecto. Hoy en día, es una realidad que la mayoría de los proyectos no son monolingües. La mayoría de los proyectos tienen varios lenguajes. Y por el costo de esa única configuración, obtengo no solo el análisis de mi JavaScript, sino también de los otros lenguajes en mi proyecto. Así que eso es bastante genial.

Ahora, nuevamente, para reducirlo a los bloqueadores, solo para ver las cosas más interesantes, si observo las reglas que se están incumpliendo, aquí hay una ejecución de código dinámico para ataques de inyección. Veamos de qué se trata eso. Muy bien. Aquí tengo un flujo de problemas un poco más grande. Ahora, tal vez no esté familiarizado con la seguridad. Tal vez no entienda por qué esto es un problema. Si ese es el caso, tengo la descripción de la regla aquí lista para que pueda comprender no solo por qué debería seguir la regla, no solo qué malo puede suceder si no sigo la regla, sino que también suelo tener algunos ejemplos de código para que pueda ver código incorrecto, código malo, y luego ver ese mismo código corregido para que pueda aplicar ese patrón a mi propio código y hacer las correcciones en mi código.

Casi se me acaba el tiempo, pero afortunadamente, ya he dicho todo lo que quería decir. Muchas gracias por su tiempo y atención, y nos hablamos más tarde. Gracias. Gracias.

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
Top Content
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
Top Content
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
WorkshopFree
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
Workshop
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.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
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
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
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.
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
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.