42Crunch / vscode-openapi

VisualStudio Code OpenAPI tools
GNU Affero General Public License v3.0
338 stars 41 forks source link

OpenAPI Editing with API quality, Conformance and Security Testing

Rich support for the OpenAPI Specification (OAS) / Swagger specification making it quicker and easier to create, edit and navigate your OpenAPI definitions.

Also check the quality, conformance and security of your APIs from inside VS Code, with the bundled 42Crunch API security testing tools - API Audit and API Scan. Audit and Scan are available to both our freemium users and to 42Crunch platform subscribers. Monthly usage limitations apply for freemium users. Upgrade options available.

OpenAPI Editing

The plugin supports code navigation, linting, SwaggerUI or ReDoc preview, IntelliSense, schema enforcement and generation, schema definition links and snippets. It also supports both OpenAPI v2 and v3.0.x in JSON or YAML format. QuickStart

Activating API Audit

A static analysis that lets you check the quality, conformance (to the OpenAPI specification) and security of your API definition. Video explainer

Activating API Scan

A dynamic conformance and security tool that tests the API for conformance to the API definition and security vulnerabilities. The free version of API Scan runs locally in your own environment and does not require your API to be uploaded to the 42Crunch platform. Video explainer

The free version of API Scan runs locally in your own environment and requires no API file to be uploaded.

Freemium

This service lets users of our OpenAPI editor extension who are not customers run the API Audit and Scan tests on their APIs.

Support and Documentation:

We’ve recently launched our developer community where you’ll be able to help, get tips-n-tricks and keep up to speed with all the latest developments: https://developers.42crunch.com/

Quick start

After installing the plugin, open any JSON or YAML file that contains an OpenAPI definition. The plugin automatically detects that this is an OpenAPI file, and the /API button is shown in the left-hand panel.

OpenAPI Explorer

We also encourage you to watch this video that gives you a full tour of the editor and its different features.

Editor features

This extension makes it easier and faster to navigate your OpenAPI definitions, especially when they get longer.

You can home in on elements in the OpenAPI explorer view, or jump directly to the target of a reference in the API. You can also add new elements to your API directly in the OpenAPI explorer directly where they are needed. Filling in the details is quicker with IntelliSense support for OpenAPI elements.

Creating OpenAPI files

  1. Press Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on a Mac.
  2. In the command prompt, start typing new openapi, and click the corresponding command to create either an OAS v2 or v3 template file.
  3. Use the OpenAPI explorer to populate the template with new paths and other elements as needed.
  4. Save the file to your disk to fully enable IntelliSense.

Create new OpenAPI file from a template

Watch this video on editor basics.

Navigating an API definition

  1. Open an OpenAPI file.
  2. Click the OpenAPI button to switch to the OpenAPI explorer view.
  3. Expand the sections and elements in the file as needed, and click the ones you want to jump to in the editor.

Navigation inside the OpenAPI file

Add new elements in the OpenAPI explorer

  1. In OpenAPI explorer pane, go to the section where you want to add a new element and right-click on the relevant node to open a context menu.
  2. Click the item you want to add from the list.

Add new API path and verb

Use IntelliSense

As you start typing OpenAPI elements or their values, the context-sensitive list of available options is displayed in the IntelliSense menu. In JSON OpenAPI files, just type double-quote (") to show the menu, and type further to filter the list. In YAML OpenAPI files, start typing the property name.

You can also use the corresponding VS Code hotkey (Ctrl+Space on Windows, Cmd+Space on Mac) to open the IntelliSense menu.

IntelliSense for OpenAPI editing

Jump to a reference

Use Go to Definition to locate the targets of references easily. To jump to view the definition from a reference in your API, either Ctrl+click a reference, or right-click a reference and click Go to Definition in the shortcut menu.

Go to definition

Sort entries in the navigation pane

By default, entries in the OpenAPI Explorer pane are sorted alphabetically. If you want to instead have them sorted in the order they are in the OpenAPI file, change the corresponding setting:

  1. On the File menu, click Preferences > Settings.
  2. Expand the Extensions section and click OpenAPI.
  3. Clear the checkbox Alphabetically sort contents of OpenAPI explorer outlines.

Preview OpenAPI documentation

You can get a documentation-style preview of the API you are editing by clicking the Preview button at the top right:

OpenAPI Preview Pane

The extension supports two popular OpenAPI documentation generators: SwaggerUI and ReDoc.

To change the default OpenAPI Preview rendering engine:

  1. On the File menu, click Preferences > Settings.
  2. Expand the Extensions section and click OpenAPI.
  3. Pick the option of your choice from the Default Preview Rendered dropdown list.

OpenAPI Preview Pane

Execute operations with "Try it"

With "Try it", you can invoke operations defined in your OpenAPI directly from VS Code:

TryIt view

Try it comes with a number of limitations:

Generate JSON schemas based on the response content

"Try it" can be used to generate JSON Schema based on the body of the response.

TryIt response tools

Configure authentication for external references in OpenAPI files

If you use references to schemas served by an authenticated HTTP service (such as an Schema Registry service or a repository), you'll need to configure the list of approved hosts in the extension settings. To do this:

  1. On the File menu, click Preferences > Settings.
  2. Expand the Extensions section and click OpenAPI.
  3. Locate the Openapi: Approved Hostnames setting, click on Add item, and write the hostname you need for resolving external references. Configure approved hosts and authentication

In case some of the approved hosts requires authentication, you can configure it in the OpenAPI > External References section of the 42Crunch: Open Settings command view:

Configure approved hosts and authentication


To open this view, go to View > Command Palette... in VSCode menu and type in 42Crunch, you'll see the Open Settings command listed below: 42Crunch: Open Settings You can also use keyboard shortcuts for the Command Palette Ctrl+Shift+P, or Cmd+Shift+P for Mac users.


After configuring all hosts you need to refer to, all OpenAPI references to any of the approved hosts will be dynamically resolved when linting or previewing your API.

Static API Security Testing

You can use this OpenAPI extension to check the quality and security of your API definition as you work on it. This feature is powered by 42Crunch Audit. 42Crunch Audit performs a static analysis of the API definition that includes more than 300 checks on best practices and potential vulnerabilities related to authentication, authorization as well as data constraints.

Watch this video to learn more about 42Crunch Audit.

You can run the audit service in freemium or platform mode:

IDE-PlatformIntegration

Getting a Freemium Token

To run Security Audit from VS Code, you need a token. The first time you try to audit or scan an API, you are asked to provide your email address or an API token from the platform.

Once you supply the address, the extension requests the token to be sent to your mailbox. Paste the token you received in the prompt in VS Code, and you are all set.

Watch this short video which takes you through those steps.

Running an audit

You can use OpenAPI extension to check the quality of your API as you work on it. You can run the audit directly from VS Code by clicking the Audit button in the toolbar. Alternatively, you can run an audit for an individual endpoint using the code lens.

Navigating the issues in the audit report

After the audit finishes, you get the audit report directly in the VS Code view, side by side with your code. The report viewer provides handy ways to navigate the found issues, even if the report is quite long.

Priority issues

Look here for issues that require the most attention.

Those two lists will often overlap and in certain cases be identical, but this is totally normal.

AuditIssuesList

Full issue list

The full issue list contains all issues found. The list can be filtered in two ways:

SQG results are not visible yet to all Freemium users.

AuditIssuesList-Full

Issues details

For each issue, you have access to full information about the issue, why it is relevant and recommendations on how to address the issue.

Watch this video to learn more about audit and how to navigate issues.

Fixing issues

Many of the issues reported by 42Crunch Audit have fixes associated with them. These are code snippets that you can insert into the OpenAPI file and then customize with the appropriate value.

  1. Cick some of the error lines in your OpenAPI file to bring up the QuickFix blue icon on the left of the line.
  2. Click the Quickfix icon and select the fix to apply.
  3. Tweak the values in the inserted code snippet as you see fit.

Quick Fixes in VSCode

(New!) Dynamic API Security testing

42Crunch Audit performs a security analysis that does not require any live API, just the definition itself. 42Crunch Scan leverages the OpenAPI definition to:

Watch this video to learn more about 42Crunch Scan.

APIs which thoroughly enforce compliance to an established contract are far more resilient to all types of attacks.

You must only use 42Crunch Scan against APIs that you own, not those of third parties.

Launching 42Crunch Scan

We recommend you use the 42Crunch API Security Testing Binary to run scans. The alternative is to run a docker image locally. 42Crunch customers can also leverage our scand manager, by deploying an API-driven scan engine on Kubernetes.

In order to run a scan, you will need :

When you first launch a scan, you are presented with the scan configuration viewer. The scan configuration is generated automatically from the OpenAPI file you chose to scan.

Once the scan has run, you are presented with a results page. The summary shows if the scan got a testing baseline by running the HappyPath test. Additional testing results are visible from the tests list. For each issue, you can easily reproduce the problem using a curl request.

Miscellaneous commands

Network requirements

To execute the 42Crunch Freemium services, you need access to the following URL: https://stateless.42crunch.com. You may need to ask your administrators to add a firewall rule to allow the connection.

Known issues

Feedback

Submit your bug reports at GitHub project Issues.

And, needless to say, your reviews at VS Code marketplace mean the world to us!