Developing high-quality software applications can be daunting because many components must work together to create a working solution. That’s why developers need all the help and convenience they can get, especially when it comes to securing their applications.
Visual Studio Code (VSCode) is one of the most popular open source code editors for many reasons. It's compatible with three major operating systems (Windows, macOS, and Linux), and we can easily configure it to our liking. Best of all, we can install extensions to enhance its functionality.
VSCode has a rich set of extensions, from simple user interface (UI) changes to advanced vulnerability detection. This article focuses on the latter, highlighting five VSCode extensions that help us write more secure code and maintain security best practices.
1、1Password
Keep your passwords safe with 1Password
Including passwords and confidential information in clear text in code is a significant security risk because sensitive information can easily be leaked. Best practice is to store these values in an external vault and use variables to access them.
However, while writing code, it becomes tedious to constantly switch between the code editor and the password vault to create new secrets and passwords, or to check the value of existing passwords. 1Password for VS Code is an extension that aims to solve this problem by accessing the vault directly from the VSCode editor.
Here's an overview of the main features 1Password offers.
First, you can create a new password in VSCode using the command palette. You just highlight the value and run the command "1Password: Save in 1Password".
This allows you to label defined variables, automatically store them in 1Password, and replace references in your code.
With 1Password Secrets Automation, the 1Password developer product team introduced the concept of secret references. It starts by storing sensitive values, such as API credentials or client IDs, in 1Password. The item and the field for which you want the value can then be retrieved via the special op:// URL scheme, and 1Password's tools know how to parse it. It consists of three parts: vaults, items, and fields. This is called a "secret reference".
Now, instead of using real values in configuration files, environment variable files, or anywhere else in your codebase, just insert the secret reference in VS Code. By doing this, you can rest assured that real values will never accidentally appear in your code base.
You can also use the commands `1Password: Get from 1Password` and `1Password: Generate password` to retrieve existing items from the vault and create new items. Likewise, these features can reduce developer friction when working with secret values because they don't need to leave the code editor and interrupt their workflow.
If you want to store multiple values in the same project, such as username, password and email, it supports this as well. Just select each value and run the "Save to 1Password" command.
Finally, the 1Password VSCode extension allows you to inspect and preview passwords stored in your vault, if they are referenced in your code. Hovering over a password will display its current value, but only for non-sensitive passwords. For security reasons, sensitive values such as passwords cannot be previewed.
2、Decompiler
Use Decompiler to decompile the executable file.
Decompilers are sometimes used to convert compiled code into source code so that developers can inspect it. Decompilation is a valuable tool in the security world. It enables security experts to assess the security of software and even understand the behavior of malware. In order to do this, custom software is usually required, or different software is used depending on the type of executable file.
Decompiler is an extension that provides decompilation functionality for VS Code. You only need to right-click the file in VS Code and select "Decompiler" to decompile binary executable files such as Windows PE, Linux ELF, IOS, JAR files, and Android APK.
The decompiled files will be saved in a "Decompiler" folder. For JAR files, this will open the JAR file and extract it into the folders and files within it, providing access to the original Java file, as shown in the image below.
Decompiling has the potential to reveal security vulnerabilities in the code, such as buffer overflows or race conditions. Discovering these vulnerabilities helps us determine whether the software is safe and take steps to fix them before releasing the software.
We can also use decompilation to understand the behavior of third-party code, such as libraries and APIs, which are usually distributed in compiled form. Decompiling these components helps evaluate their suitability for use in development projects and identify any security vulnerabilities.
3、Cloak
Hide sensitive values with Cloak
When developing an application, if passwords are included in the environment configuration files, the developer may want to hide these contents from others. However, this becomes difficult when working in a collaborative environment or an external location such as a coffee shop where anyone can see your screen. Securing these values by constantly watching the screen or not opening files is tedious and affects productivity.
Here is an example .env file containing an API key and password. The contents of these variables can be read by anyone who can see the screen:
To overcome this problem, we can use the VS Code extension Cloak. Cloak is designed to hide secret values from the screen when an environment profile is opened. To activate Cloak, use the VSCode command panel and run the "Cloak: Hide Secrets" command. This will turn the value blank on the screen.
This extension does not modify files in any way. It just masks the secret values to prevent them from being displayed. Cloak prevents secrets and passwords from being viewed by unwanted parties in the external environment, allowing us to continue working while keeping our applications secure.
4、ESLint
Security best practices for using ESLint extensions
When protecting JavaScript projects, most modern extensions can only detect security flags. However, developers often need tools that can be integrated into the software delivery process to automate security checks.
The ESLint extension is an open source code inspection tool used when writing JavaScript with VS Code. The dynamic and weakly typed nature of JavaScript makes it prone to developer error. ESLint mitigates this tendency by analyzing your code to ensure it is syntactically correct and conforms to best practices and standards. It highlights syntax errors in the code, allowing us to quickly find and fix them. Additionally, it helps detect errors and potential code vulnerabilities, ensuring a higher level of code integrity.
ESLint is a suitable way to enforce code standards, especially for team projects. With this extension, every team member follows the same common styles and norms for automation.
Here, the greeting constant uses double quotes, while `secondGreeting` uses single quotes. Also, note that some lines end with a semicolon and others do not. Despite these minor differences, this code will run correctly because the lines are syntactically correct.
However, when working on a joint project, it is important to maintain a consistent agreement among team members. We can use ESLint to enforce this, by defining rules or using the ESLint package's default linting settings. We also have the option to customize these settings:
ESLint also has its own set of plugins, such as the security plugin, which can detect bad security practices, including the use of unsafe regular expressions or the `eval` function. We can use this plugin in VS Code to check the code under development, ensure that the application is safe, and resolve issues before the code goes through the build process.
5、Sneak
Detecting and fixing vulnerabilities in your code is critical to building secure software systems. We must address these issues quickly before malicious actors can exploit these vulnerabilities. However, constantly switching between a code editor and a vulnerability scanner can be tedious and time-consuming.
The Snyk VSCode extension solves this problem by providing vulnerability scanning and remediation capabilities in the VSCode editor. The extension scans your code for the following issue types:
Open Source Security – Security vulnerabilities in open source dependencies used in our projects.
Code Security — Security vulnerabilities in our code.
Code Quality — The quality of our code.
Infrastructure as Code (IAC) security - Configuration issues in IAC template files, such as Kubernetes and Terraform.
Snyk code analysis runs automatically when we open a project folder. We can also easily perform a manual scan by running `Snyk: Rescan` in the command panel.
The Snyk extension also provides vulnerability detection capabilities that highlight potential vulnerabilities as we write code. It describes the problem and its severity and provides some best practices for prevention.
The extension also provides an overview of the results of various scans performed on our code:
With real-time vulnerability detection and detailed remediation steps, Snyk VSCode helps us prioritize security without disrupting our workflow.
Finish
The goal of the best developers is to write safe, clean, and maintainable code, and these five extensions can help us achieve that. 1Password protects passwords from third parties so they are not stored in code. ESLint helps us write code that is grammatical, error-free, and best-practice. Decompiler allows us to evaluate the source code of an executable to make sure it is free of malware. Cloak can hide sensitive values displayed on the screen. Finally, the Snyk VSCode extension quickly and accurately scans your code for vulnerabilities.
Before installing a VSCode extension, it is important to research the extension and the company behind it. Extensions can help improve security, but a bad extension can compromise our application's confidential information and passwords.
Delegating the responsibility for password storage to a third party is inherently a trust in security. Therefore, the importance of verifying third parties before installing any extension related to password and secret management cannot be ignored.
There is no one-size-fits-all solution for creating more secure applications. Depending on the project, some of these extensions may be more applicable or relevant than others. However, each extension has unique advantages and can make the VSCode editor more convenient.
Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of articles is not easy. If you like my sharing, please don’t forget to like and forward it to let more people in need See. At the same time, if you want to gain more knowledge about front-end technology, please follow me. Your support will be my biggest motivation for sharing. I will continue to output more content, so stay tuned.