Snyk CodeのVSCode拡張機能を使ってローカルで手軽に脆弱性チェックする

# はじめに

こちらの記事はアドベントカレンダー[Snykを使ってセキュリティにまつわる記事を投稿しよう！【PR】Snyk](https://qiita.com/advent-calendar/2021/snyk)の12日目として投稿しています。

Snykはオープンソースコードやアプリケーションコードの脆弱性スキャンが簡単に自動化でき、修復まで可能なセキュリティプロダクトです。単純なソースコード検査だけでなく、依存しているライブラリの脆弱性やコンテナイメージそのものをスキャンすることができ、非常に強力なツールとなっています。

個人的に**Snykの強みはローカル上で開発しているときから簡単に脆弱性チェックする仕組みが整っているおり、デベロッパーファーストなところ**かなと思っています。

そこで、今回はローカル上で簡単に脆弱性チェックできるSnyk CodeのVSCodeの拡張機能について紹介したいと思います。


## VSCodeにSnyk の拡張機能を追加する

VSCodeの左側メニューになる拡張機能から「snyk」と入力すると候補がいくつか表示されます。

一番上の「**Snyk Vulnerability Scanner**」をインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/b2c295ce-51ce-0c34-cedc-6b81b9fc5f36.png)



インストールすると右下にWelcome to Snyk!とメッセージが表示されますので、「Check it out」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/b65cae49-feeb-402f-a591-74b90b86792f.png)

## VSCodeとSnykを接続

左側ウインドウに「**Connect VS Code with Snyk**」のボタンが表示されるのでボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/98967cbf-0c55-df62-4ef7-5f99f2fc82e7.png)

するとブラウザが立ち上がり、Snykへのログインページが表示されるのでログインします。今回はGitHubを使ってログインします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/bf6777f2-55ad-1c7f-6668-5945be79fa1d.png)


「**Authorize snyk**」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/6f78517c-f515-e962-e5a0-b81d2e65e456.png)

CLIのための権限を与えるため「**Authenticate**」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/527be168-4644-f028-4d30-736080ede905.png)

Authenticatedと表示されればOKです。

ここでVSCode上で表示が変わっていればOKなのですが、もし、いつまでたっても変わらない場合は下記の手順でSnykと接続することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/b6b7e576-6c8b-f88f-f7ec-b88c8786ba41.png)

#### Snyk上でTokenを取得

Snykにログインした状態で右上のログインユーザアイコンをクリックして、「**Account Settings**」に進みます。Auth TokenにあるKEYの欄の値をコピーしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/ce898b7f-0661-54d0-f8b0-a976b5cf08eb.png)

#### VSCodeにtokenを設定

VSCodeに戻ってSnykの右にある歯車のアイコンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/a5848c65-3009-95aa-885e-7e79b3a9fae8.png)

Snykの拡張機能の設定画面が開きます。そこのTokenに先程取得した値を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/5efca5b7-7fb9-0f45-c046-aa7251bb9695.png)

Snykの拡張機能の表示が変わり「**Connect VS Code with Snyk**」が表示されていなければ準備OKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/47c60353-cf0d-b320-9c2a-e320b0e9e6bc.png)

## 脆弱性を含んだサンプルコードを用意

準備ができたのでSnykの動作確認をするためのコードを用意します。

今回は[Snyk labs](https://github.com/snyk-labs)にある[nodejs-goof](https://github.com/snyk-labs/nodejs-goof)を利用します。これは脆弱性を含んだデモアプリケーションのコードになります。



[Snyk labs](https://github.com/snyk-labs)にはNode.js以外にもJavaやDockerなどの脆弱性を含んだサンプルが用意されています。

上記のレポジトリをフォーク、ローカルにcloneしVSCodeで開けます。
すると自動的にSnykで分析が実行され分析結果が下記のように表示されます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/b1eda27d-b028-8134-3d6a-f2040e0b57b2.png)

- open source security
- code security
- code quality

の３つのカテゴリーに分けて表示してくれます。


表示されるアイコンの意味は下記のようになります。


| アイコン | セキュリティ緊急度 | 説明 |
|:-----------:|:------------:|:------------:|
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/1cff9eea-dd56-8036-23a3-cecd30754e47.png)  | Critical        | 攻撃者が機密データにアクセスし、アプリケーションでコードを実行できるようにする可能性があります。         |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/3c4a5ec4-0740-ccc6-5b80-607760c89339.png)  | High      | 攻撃者がアプリケーションの機密データにアクセスできるようにする可能性があります。       |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/1b776fb7-cf3a-6c98-c3c1-a60b0def4e3b.png)    | Medium        | ある条件下で攻撃者がアプリケーションの機密データにアクセスできるようにする可能性があります。         |
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/2c5c0998-0e74-5a67-124f-0d4686899a31.png) | Low          | アプリケーションは、脆弱性マッピングを可能にする一部のデータを公開する可能性があります。これは、他の脆弱性とともに使用して、アプリケーションを攻撃する可能性があります。          |

### open source security

利用しているライブラリに脆弱性があるかどうかチェックした結果が表示されます。

検知された脆弱性についての情報も細かく表示してくれるので、検索する手間など省けて助かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/1056b40f-03d5-3499-4738-501a74e52353.png)


### code security

コマンドインジェクションの脆弱性がないか、パスワードがハードコーディングされていないかなどチェックした結果が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/cdc10a48-ae70-8376-e0d0-806d6557ccd5.png)

対象の脆弱性をクリックすると該当箇所のコードと右側のペインに修正するときはこんなふうにしたらええんやで、というサンプルも表示してくれます。

### code quality

コードの質をあげるような提案があるかチェックした結果が表示されます。

下記の例では正規表現の書き方をより良い書き方へ提案してくれています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155802/3faeb8d2-d587-ee27-61f2-23daedccfabe.png)


## コードを修正したら都度分析してくれる

VSCode上でコードを修正して保存すると都度分析してくれます。（設定変更可能）

コードをpushした後のCI/CDのフェーズでチェックするだと分析までに結構時間がかかったり、修正したけどまだ脆弱性が検知されつづけていたので追加で修正が必要だったなんてこともあったしたので、ローカルで修正したら都度分析して結果みれるのは個人的にとても便利だなと感じました。


## さいごに

ローカル上で簡単に脆弱性チェックできるSnyk CodeのVSCodeの拡張機能について紹介しました。

めんどうな環境構築もいらずに、VSCodeに拡張機能の追加とSnykへ接続するだけで、とても簡単に脆弱性をチェックすることができ大変便利なので気になる方は是非試してみてください！


## 参考サイト

[Snykコード\-Snykユーザードキュメント](https://docs.snyk.io/products/snyk-code)

[Visual Studio Code extension for Snyk Code \- Snyk User Docs](https://docs.snyk.io/features/integrations/ide-tools/visual-studio-code-extension-for-snyk-code)