Skip to main content

Las 5 mejores extensiones de VS Code para la seguridad

Escrito por
blog feature toolkit

24 de agosto de 2023

0 minutos de lectura
Top 5 VS Code SECURITY Extensions

Desarrollar aplicaciones de software de calidad puede ser una tarea ardua, ya que deben combinarse muchas piezas para crear una solución funcional. Por eso, los desarrolladores necesitan toda la ayuda y comodidad que puedan obtener, especialmente al proteger sus aplicaciones.

Visual Studio Code (VS Code) es uno de los editores de código de código abierto más populares por diversas razones. Es compatible con los tres principales sistemas operativos (SO): Windows, macOS y Linux; además, podemos configurarlo fácilmente según nuestras preferencias. Y lo más importante: podemos instalar extensiones para ampliar sus capacidades.

Hay una gran variedad de extensiones para VS Code, desde simples cambios en la interfaz de usuario (UI) hasta la detección avanzada de vulnerabilidades. Este artículo se centra en esto último y destaca las cinco mejores extensiones de VS Code para ayudarnos a escribir código más seguro y mantener las mejores prácticas de seguridad.    

1. Protege secretos y contraseñas con 1Password

Incluir contraseñas y secretos como texto sin formato en el código es un gran riesgo de seguridad, ya que puede exponer fácilmente información confidencial. La mejor práctica es almacenar estos valores en una bóveda externa y usar variables para acceder a ellos.

Sin embargo, al escribir código, resulta tedioso alternar entre el editor de código y la bóveda de contraseñas para crear secretos y contraseñas nuevos o consultar los valores de los secretos existentes. 1Password para VS Code es una extensión diseñada para resolver este problema, ya que permite acceder a la bóveda directamente desde el editor de VS Code. 

A continuación, repasamos las funciones principales que ofrece 1Password.

Primero, puedes crear una contraseña nueva desde VS Code usando la paleta de comandos. Solo tienes que resaltar un valor y ejecutar el comando `1Password: Save in 1Password`.

Visual Studio Code muestra un archivo .env con entradas ACCESS_TOKEN y PASSWORD, mientras que la paleta de comandos ofrece “1Password: Save in 1Password”.

Esto te permite asignarle una etiqueta al elemento, guardarlo automáticamente en 1Password y reemplazar la referencia en el código.

Puedes llevar esta función un paso más allá con la detección automática de secretos. La extensión de 1Password para VS Code detecta y resalta posibles valores secretos o contraseñas en el código o en archivos de configuración del entorno.

Editor de código oscuro que muestra un archivo .env con entradas ACCESS_TOKEN y PASSWORD junto a avisos de «Guardar en 1Password»

La función CodeLens de VS Code —una herramienta eficaz que muestra las relaciones entre los elementos del código dentro del editor— mostrará Guardar en 1Password sobre la opción resaltada. Como se muestra en la imagen anterior, esta opción nos da acceso rápido al comando `Save in 1Password`.

También es posible recuperar elementos existentes de la bóveda y crear otros nuevos con los comandos `1Password: Get from 1Password` y `1Password: Generate password`, respectivamente. Una vez más, estas funciones reducen las interrupciones para los desarrolladores que trabajan con valores secretos, ya que no necesitan salir del editor de código ni perder el ritmo.

Por último, la extensión de 1Password para VS Code te permite inspeccionar y previsualizar los secretos almacenados en la bóveda si se hace referencia a ellos en el código. Al pasar el cursor sobre un secreto, se mostrará su valor actual, pero solo si no es confidencial. Los valores confidenciales, como las contraseñas, no se pueden previsualizar para garantizar que se mantengan protegidos.

2. Descompila ejecutables con Decompiler

A veces se usan descompiladores para aplicar ingeniería inversa al código compilado y convertirlo en código fuente, de modo que los desarrolladores puedan inspeccionarlo. La descompilación es una herramienta valiosa en el ámbito de la seguridad. Permite a los expertos en seguridad evaluar la seguridad del software e incluso comprender el comportamiento del malware. Para hacerlo, a menudo se necesita software especializado —o, en ocasiones, distinto— según el tipo de ejecutable.

Decompiler es una extensión de VS Code que incorpora capacidades de descompilación a VS Code. Puedes descompilar ejecutables binarios, como Windows PE, Linux ELF, IOS, archivos JAR y APK de Android, desde VS Code. Solo tienes que hacer clic derecho en el archivo y seleccionar Descompilar.

Menú contextual de Visual Studio Code que muestra la opción Decompile para test-jar-1.0.jar, con una advertencia de que el archivo es binario o usa una codificación de texto no compatible.

Los archivos descompilados quedan disponibles en una carpeta Decompiler. En el caso de los archivos JAR, se extrae su contenido en las carpetas y los archivos que contiene, lo que permite acceder a los archivos Java originales, como se ve en la siguiente imagen.

Visual Studio Code muestra App.java con un programa Java «Hello World» y un paquete JAR de pruebas expandido en el Explorador.

La descompilación puede revelar vulnerabilidades de seguridad en el código, como desbordamientos de búfer o condiciones de carrera. Descubrir estas vulnerabilidades nos ayuda a determinar si el software es seguro y a tomar medidas para corregirlas antes de publicarlo. 

También podemos usar la descompilación para comprender el comportamiento de código de terceros, como bibliotecas y API, que a menudo se distribuyen en formato compilado. Descompilar estos componentes nos ayuda a evaluar si son adecuados para los proyectos de desarrollo y a identificar vulnerabilidades de seguridad.

3. Oculta valores confidenciales con Cloak

Los desarrolladores que trabajan en aplicaciones con archivos de configuración del entorno que contienen secretos y contraseñas quizá quieran ocultarlos de otras personas. Sin embargo, esto es difícil en un entorno de trabajo colaborativo o en un lugar público, como una cafetería, donde cualquiera puede ver tu pantalla. Proteger estos valores mirando constantemente por encima del hombro o evitando abrir el archivo es engorroso y reduce la productividad.

Este es un ejemplo de un archivo .env que contiene una clave de API y una contraseña. Cualquiera que pueda ver la pantalla puede leer el contenido de estas variables:

Visual Studio Code muestra un archivo .env que contiene las variables de entorno ACCESS_TOKEN y PASSWORD visibles.

Para resolver esto, podemos usar la extensión de VS Code Cloak. Cloak está diseñada para ocultar los valores secretos en la pantalla cuando tenemos abierto un archivo de configuración del entorno. Para activar Cloak, usa la paleta de comandos de VS Code y ejecuta el comando `Cloak: Hide Secrets`. Esto ocultará los valores en la pantalla:

Visual Studio Code muestra un archivo .env con los campos de las variables de entorno ACCESS_TOKEN y PASSWORD vacíos

Esta extensión no modifica los archivos de ninguna manera. Solo enmascara los valores secretos para que no se muestren. Cloak evita que otras personas vean secretos y contraseñas en lugares públicos, lo que nos permite seguir trabajando y mantener la seguridad de nuestras aplicaciones.

4. Mejores prácticas de seguridad con la extensión ESLint

Al proteger proyectos de JavaScript, la mayoría de las extensiones modernas no hacen mucho más que detectar alertas de seguridad. Sin embargo, los desarrolladores suelen necesitar herramientas que se puedan integrar en los flujos de entrega de software para automatizar las comprobaciones de seguridad.

La extensión ESLint es una herramienta de análisis estático de código abierto que se usa en VS Code al escribir JavaScript. La naturaleza dinámica y de tipado débil de JavaScript hace que sea notoriamente propenso a errores de desarrollo. ESLint mitiga esta tendencia mediante el análisis del código para comprobar que su sintaxis sea correcta y que cumpla con las mejores prácticas y los estándares. Resalta los errores de sintaxis en el código, por lo que es fácil detectarlos y corregirlos rápidamente. Además, ayuda a detectar errores y posibles vulnerabilidades en el código, lo que garantiza un mayor nivel de integridad.

ESLint es una opción adecuada para hacer cumplir los estándares de código, especialmente en proyectos grupales. Con esta extensión, todos los integrantes del equipo siguen el mismo conjunto automatizado de estilos y estándares comunes.

Tomemos como ejemplo el siguiente fragmento de código:

Visual Studio Code muestra un archivo JavaScript con variables de saludo e instrucciones console.log

Aquí, la constante greeting usa comillas dobles, mientras que `secondGreeting` usa comillas simples. También observa que algunas líneas terminan con punto y coma y otras no. El código se ejecutará correctamente a pesar de estas pequeñas diferencias, porque las líneas tienen una sintaxis correcta. 

Sin embargo, al trabajar en un proyecto compartido, es importante mantener convenciones coherentes entre todos los integrantes del equipo. Podemos usar ESLint para hacerlas cumplir definiendo reglas o usando la configuración predeterminada de análisis estático del paquete ESLint. También podemos personalizar esta configuración:

Visual Studio Code muestra una advertencia de ESLint que indica que las cadenas deben usar comillas simples en el código JavaScript.

ESLint también tiene sus propios complementos, como el complemento de seguridad, que puede detectar malas prácticas de seguridad, como el uso de expresiones regulares inseguras o de la función `eval`. Podemos usar este complemento en VS Code para revisar el código a medida que se desarrolla, y así garantizar que la aplicación sea segura y que los problemas se resuelvan antes de que el código pase por los pipelines de compilación.

5. Analiza el código y los paquetes de terceros con Snyk

Detectar y corregir vulnerabilidades en el código es fundamental para crear sistemas de software seguros. Debemos resolver estos problemas rápidamente, antes de que los actores maliciosos puedan aprovecharlos. Sin embargo, alternar constantemente entre el editor de código y el escáner de vulnerabilidades puede ser tedioso y llevar mucho tiempo.

La extensión de Snyk para VS Code resuelve este problema al ofrecer análisis y corrección de vulnerabilidades directamente desde el editor de VS Code. Esta extensión analiza los siguientes tipos de problemas en el código:

  • Seguridad de código abierto: vulnerabilidades de seguridad en las dependencias de código abierto que se usan en nuestros proyectos.

  • Seguridad del código: vulnerabilidades de seguridad en nuestro código.

  • Calidad del código: la calidad de nuestro código.

  • Seguridad de infraestructura como código (IAC): problemas de configuración en archivos de plantilla de IAC, como los de Kubernetes y Terraform.

Snyk Code analiza el código automáticamente cuando abrimos la carpeta de un proyecto. También podemos realizar análisis manuales fácilmente ejecutando `Snyk: Rescan` en la paleta de comandos.

Visual Studio Code muestra la extensión de Snyk con el comando «Snyk: Rescan» seleccionado y los paneles del análisis de seguridad en curso.

La extensión de Snyk también detecta vulnerabilidades y resalta las posibles vulnerabilidades en nuestro código mientras lo escribimos. Describe el problema y su nivel de gravedad, además de ofrecer algunas prácticas recomendadas para prevenirlo.

Visual Studio Code marca una clave de API codificada de forma fija en JavaScript con una alerta de Snyk sobre CWE-798.

Esta extensión también ofrece una descripción general de los resultados de varios análisis realizados en nuestro código:

Panel de seguridad de Snyk en Visual Studio Code que muestra la seguridad del código abierto, las vulnerabilidades del código, el estado de configuración y los problemas de calidad del código

Con la detección de vulnerabilidades en tiempo real y pasos detallados para corregirlas, Snyk para VS Code nos ayuda a priorizar la seguridad sin interrumpir nuestro flujo de trabajo.

Conclusión

Los mejores desarrolladores se esfuerzan por escribir código seguro, limpio y fácil de mantener, y estas cinco extensiones pueden ayudarnos a lograrlo. 1Password protege las contraseñas de terceros para que no se almacenen en el código. ESLint ayuda a escribir código con una sintaxis correcta, sin errores y que cumple con las mejores prácticas. Decompiler nos permite evaluar el código fuente de los ejecutables para asegurarnos de que no contengan malware. Cloak oculta los valores confidenciales en la pantalla. Y, por último, la extensión de Snyk para VS Code analiza el código en busca de vulnerabilidades de forma rápida y precisa. 

Antes de instalar extensiones de VS Code, es importante investigar la extensión y la empresa que la creó. Las extensiones pueden ayudar con la seguridad, pero una maliciosa puede poner en riesgo los secretos y las contraseñas de nuestra aplicación.

Confiar ciegamente en un tercero para almacenar contraseñas implica delegarle la responsabilidad de protegerlas. Por eso, es importante verificar la confiabilidad del tercero antes de instalar extensiones, especialmente las relacionadas con la administración de contraseñas y secretos.

No existe una solución universal para crear aplicaciones más seguras. Según el proyecto, algunas de estas extensiones pueden ser más adecuadas o relevantes que otras. Sin embargo, cada una tiene ventajas únicas que pueden hacer que el editor de VS Code sea aún más práctico.

Prueba estas extensiones hoy y descubre la diferencia que pueden hacer.