Table of Contents
About this ExtensionThe 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. The extension also allows developers to track the status of the code while it is being built, tested and scanned on the CI server. The extension also applies JFrog File Spec JSON schema on the following file patterns: Getting Started
Set Up a FREE JFrog Environment in the CloudNeed a FREE JFrog environment in the cloud, so that VS Code can connect to it? Just run one of the following commands in your terminal. The commands will do the following:
MacOS and Linux using cUrl
Windows using PowerShell
Connecting VS Code to Your JFrog EnvironmentConnect to your JFrog environment by clicking on the green Connect You can leave the platform URL empty, to enter the separate URLs for Artifactory and Xray. The extension also supports connecting to your JFrog environment using environment variables. You may provide basic auth credentials or access token as follows: Note: For security reasons, it is recommended to unset the environment variables after launching VS Code.
Applying Your Xray PoliciesYou can configure the JFrog VS-Code extension to reflect the Security Policies. The policies are configured in JFrog Xray. If you'd like to use a JFrog Project that is associated with the policy, follow these steps:
If however your policies are referenced through an Xray Watch or Watches, follow these steps instead:
Proxy ConfigurationIf your JFrog environment is behind an HTTP/S proxy, follow these steps to configure the proxy server:
Proxy AuthorizationIf your proxy server requires credentials, follow these steps:
Example
settings.json:
Extension SettingsTo open the extension settings, use the following VS Code menu command:
Using the ExtensionThe extension offers two modes, Local and CI. The two modes can be toggled by pressing on their respective buttons that will appear next to the components tree.
The Local ViewThe local view of the 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. Supported Features
Component Tree IconsThe icon demonstrates the top severity issue of a selected component and its transitive dependencies. The following table describes the severities from lowest to highest:
Viewing and Updating Project DependenciesView 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 View the security information for a dependency by hovering over it in the editor.
You can also navigate from the dependency declaration directly into the tree view. This allows you to see transitive (indirect) dependencies.
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 Navigate from the tree view to a dependency's declaration in the editor.
Scan after dependencies changeThe 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 ScanBy default, paths containing the words Go ProjectsBehind the scenes, the JFrog VS Code Extension scans all 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 Maven ProjectsExcluding transitive dependency in pom.xmlTo exclude a transitive dependency from your project, click on the "Exclude dependency" button in the dependencies tree.
Behind the ScenesThe JFrog VS Code Extension builds the Maven dependencies tree by running Important notes:
Npm ProjectsBehind the scenes, the extension builds the npm dependencies tree by running 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 Yarn v1 ProjectsBehind the scenes, the extension builds the Yarn dependencies tree by running Important:
Pypi ProjectsBehind the scenes, the extension builds the Pypi dependencies tree by running
.NET ProjectsFor .NET projects which use NuGet packages as dependencies, the extension displays the NuGet dependencies tree, together with the information for each dependency. Behind the scenes, the extension builds the NuGet dependencies tree using the NuGet deps tree npm package. Important:
The CI ViewThe CI view of the extension allows you to view information about your builds directly from your CI system. This allows developers to keep track of the status of their code, while it is being built, tested and scanned as part of the CI pipeline, regardless of the CI provider used. This information can be viewed inside JFrog VS Code Extension, from the JFrog Panel, after switching to CI mode. The following details can be made available in the CI view.
How Does It Work?The CI information displayed in VS Code is pulled by the JFrog Extension directly from JFrog Artifactory. This information is stored in Artifactory as part of the build-info, which is published to Artifactory by the CI server. Read more about build-info in the Build Integration documentation page. If the CI pipeline is also configured to scan the build-info by JFrog Xray, the JFrog VS Code Extension will pull the results of the scan from JFrog Xray and display them in the CI view as well. Setting Up Your CI PipelineBefore VS Code can display information from your CI in the CI View, your CI pipeline needs to be configured to expose this data. Read this guide which describes how to configure your CI pipeline. Setting Up the CI ViewSet your CI build name in the Build name pattern field at the Extension Settings. This is the name of the build published to Artifactory by your CI pipeline. You have the option of setting * to view all the builds published to Artifactory. After your builds were fetched from Artifactory, press on the Builds TroubleshootingChange the log level to 'debug', 'info', 'warn', or 'err' in the Extension Settings. View the extension log:
LicenseThe extension is licensed under Apache License 2.0. Building and Testing the SourcesPreconditions
To build the extension from sources, please follow these steps:
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:
Code ContributionsWe welcome community contribution through pull requests. Guidelines
|