JFrog Visual Studio Code Extension
Table of Contents
- About this Extension
- Viewing and Updating Project Dependencies
- General Configuration
- Go Projects
- Maven Projects
- Npm Projects
- Pypi Projects
- .NET Projects
- Troubleshooting
- License
- Building and Testing the Sources
- Code Contributions
About this Extension
General
The cost of remediating a vulnerability is akin to the cost of fixing a bug. The earlier you remediate a vulnerability in the release cycle, the lower the cost. JFrog Xray is instrumental in flagging components when vulnerabilities are discovered in production systems at runtime, or even sooner, during the development.
The JFrog VS Code Extension adds JFrog Xray scanning of project dependencies to your VS Code IDE. It allows developers to view panels displaying vulnerability information about the components and their dependencies directly in their VS Code IDE. With this information, a developer can make an informed decision on whether to use a component or not before it gets entrenched into the organization’s product.
Don’t have JFrog Xray? Start for free.
Supported Features
| Features | Go | Maven | npm | Pypi | .NET | | ——————————————————- | :—————-: | :———————-: | :——————: | :——————–: | :——————-: | | Issues and licenses scanning | ✅ | ✅ | ✅ | ✅ | ✅ | | Filter dependencies by severity, license, and scope | ✅ | ✅ | ✅ | ✅ | ✅ | | Trigger scan on startup | ✅ | ✅ | ✅ | ✅ | ✅ | | Jump from dependency tree to project descriptor | ✅ | ✅ | ✅ | ✅ | ❌ | | Jump from project descriptor to dependency tree | ✅ | ✅ | ✅ | ✅ | ❌ | | Show vulnerabilities inside the project descriptor | ✅ | ✅ | ✅ | ✅ | ❌ | | Upgrade vulnerable dependencies to fixed versions | ✅ | ✅ | ✅ | ❌ | ❌ | | Automatically trigger a scan upon code changes | ✅ | ❌ | ✅ | ❌ | ❌ | | Exclude transitive dependencies from project descriptor | ❌ | ✅ | ❌ | ❌ | ❌ |
Free Go Modules Security Scanning and Metadata from GoCenter (deprecated)
As of February 28, 2021, GoCenter has been sunset. This integration has been removed. Learn more: https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/
Viewing and Updating Project Dependencies
View the dependencies used by the project in a tree, where the direct dependencies are at the top.
The JFrog extension automatically triggers a scan of the project’s dependencies whenever a change is detected after building the code.
To invoke a scan manually, click on the Refresh button or click on Start Xray Scan from within the editor.
View the security information for a depedency by hovering over it in the editor.
You can also navigate from the depedency declaration directly into the tree view. This allows you to see transitive (indirect) depedencies.
Search for a dependency in the tree:
View the issues associated with direct and transitive (indirect) dependencies.
Update a vulnerable dependency to a fixed version:
To filter the dependencies viewed, click on the Filter button.
Navigate from the tree view to a depedency’s declaration in the editor.
General Configuration
Configuring JFrog Xray
Connect to JFrog Xray by clicking on the green Connect button:
The extension also support connecting to JFrog Xray using environment variables.
Note: For security reasons, it is recommended to unset the environment variables after launching VS Code.
JFROG_IDE_URL
- JFrog Xray URLJFROG_IDE_USERNAME
- JFrog Xray usernameJFROG_IDE_PASSWORD
- JFrog Xray passwordJFROG_IDE_STORE_CONNECTION
- Set the value of this environment variable to true, if you’d like VS Code to store the connection details after reading them from the environment variables.
Proxy Configuration
If your JFrog Xray instance is behind an HTTP/S proxy, follow these steps to configure the proxy server:
- Go to Preferences –> Settings –> Application –> Proxy
- Set the proxy URL under ‘Proxy’.
- Make sure ‘Proxy Support’ is ‘override’ or ‘on’.
- Alternatively, you can use the HTTP_PROXY and HTTPS_PROXY environment variables.
Proxy Authorization
If your proxy server requires credentials, follow these steps:
- Follow 1-3 steps under Proxy configuration.
- Encode with base64:
[Username]:[Password]
. - Under ‘Proxy Authorization’ click on ‘Edit in settings.json’.
- Add to settings.json:
"http.proxyAuthorization": "Basic [Encoded credentials]"
.
Example
Username: foo
Password: bar
settings.json:
{
"http.proxyAuthorization": "Basic Zm9vOmJhcg=="
}
Scan after dependencies change
The JFrog VS-Code extension can trigger an Xray scan after a change in go.sum or package-lock.json. This feature is disabled by default. You can enable it in the Extension Settings.
Exclude Paths from Scan
By default, paths containing the words test
, venv
and node_modules
are excluded from Xray scan.
The exclude pattern can be configured in the Extension Settings.
Extension Settings
To open the extension settings, use the following VS Code menu command:
- On Windows/Linux - File > Preferences > Settings > Extensions > JFrog
- On macOS - Code > Preferences > Settings > Extensions > JFrog
Go Projects
Behind the scenes, the JFrog VS Code Extension scans all of the project dependencies, both direct and indirect (transitive), even if they are not declared in the project’s go.mod. It builds the Go dependencies tree by running go mod graph
. Therefore, please make sure to have Go CLI in your system PATH.
Maven Projects
Excluding transitive dependency in pom.xml
To exclude a transitive dependency from your project, click on the “Exclude dependency” button in the dependencies tree.
Behind the Scenes
The JFrog VS Code Extension builds the Maven dependencies tree by running mvn dependency:tree
. View licenses and top issue severities directly from the pom.xml.
Important notes:
- To have your project dependencies scanned by JFrog Xray, make sure Maven is installed, and that the mvn command is in your system PATH.
- For projects which include the Maven Dependency Plugin as a build plugin, with include or exclude configurations, the scanning functionality is disabled. For example:
<plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-dependency-plugin</artifactId> <configuration> <includes>org.apache.*</includes> </configuration> </plugin> </plugins>
Npm Projects
Behind the scenes, the extension builds the npm dependencies tree by running npm list
. View licenses and top issue severities directly from the package.json.
Important:
To have your project dependencies scanned by JFrog Xray, make sure the npm CLI is installed on your local machine and that it is in your system PATH.
In addition, the project dependencies must be installed using npm install
.
Pypi Projects
Behind the scenes, the extension builds the Pypi dependencies tree by running pipdeptree
on your Python virtual environment. It also uses the Python interpreter path configured by the Python extension. View licenses and top issue severities directly from your requirements.txt files. The scan your Pypi dependencies, make sure the following requirements are met:
- The Python extension for VS Code is installed.
- Depending on your project, Please make sure Python 2 or 3 are included in your system PATH.
- Create and activate a virtual env as instructed in VS-Code documentation. Make sure that Virtualenv Python interpreter is selected as instructed here.
- Open a new terminal and activate your Virtualenv:
- On macOS and Linux:
source <venv-dir>/bin/activate # For example: source .env/bin/activate
- On Windows:
.\<venv-dir>\Scripts\activate # For example: .\env\Scripts\activate
- On macOS and Linux:
- In the same terminal, install your python project and dependencies according to your project specifications.
.NET Projects
For .NET projects which use NuGet packages as depedencies, the extension displays the NuGet depedencies tree, together with the information for each depedency.
Behind the scenes, the extension builds the NuGet dependencies tree using the NuGet deps tree npm package.
Important:
- Does your project define its NuGet depedencies using a packages.config file? If so, then please make sure the
nuget
CLI is installed on your local machine and that it is in your system PATH. The extension uses thenuget
CLI to find the location of the NuGet packages on the local file-system. - The project must be restored using
nuget restore
ordotnet restore
prior to scanning. After this action, you should click on the Refreshbutton, for the tree view to be refreshed and updated.
Troubleshooting
View the extension log:
License
The extension is licensed under Apache License 2.0.
Building and Testing the Sources
To build the extension sources, please follow these steps:
- Clone the code from Github.
- Build and create the VS-Code extension vsix file by running the following npm command.
npm i
npm run package
After the build finishes, you’ll find the vsix file in the jfrog-vscode-extension directory. The vsix file can be loaded into VS-Code
To run the tests:
npm t
Code Contributions
We welcome community contribution through pull requests.
Guidelines
- Before creating your first pull request, please join our contributors community by signing JFrog’s CLA.
- If the existing tests do not already cover your changes, please add tests.
- Pull requests should be created on the dev branch.
- Please run
npm run format
for formatting the code before submitting the pull request.