12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Snykを使ってセキュリティにまつわる記事を投稿しよう!【PR】SnykAdvent Calendar 2021

Day 12

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

Posted at

はじめに

こちらの記事はアドベントカレンダーSnykを使ってセキュリティにまつわる記事を投稿しよう!【PR】Snykの12日目として投稿しています。

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

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

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

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

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

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

image.png

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

image.png

VSCodeとSnykを接続

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

image.png

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

image.png

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

image.png

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

image.png

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

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

image.png

Snyk上でTokenを取得

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

image.png

VSCodeにtokenを設定

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

image.png

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

image.png

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

image.png

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

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

今回はSnyk labsにあるnodejs-goofを利用します。これは脆弱性を含んだデモアプリケーションのコードになります。

Snyk labsにはNode.js以外にもJavaやDockerなどの脆弱性を含んだサンプルが用意されています。

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

image.png

  • open source security
  • code security
  • code quality

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

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

アイコン セキュリティ緊急度 説明
image.png Critical 攻撃者が機密データにアクセスし、アプリケーションでコードを実行できるようにする可能性があります。
image.png High 攻撃者がアプリケーションの機密データにアクセスできるようにする可能性があります。
image.png Medium ある条件下で攻撃者がアプリケーションの機密データにアクセスできるようにする可能性があります。
image.png Low アプリケーションは、脆弱性マッピングを可能にする一部のデータを公開する可能性があります。これは、他の脆弱性とともに使用して、アプリケーションを攻撃する可能性があります。

open source security

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

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

image.png

code security

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

image.png

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

code quality

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

下記の例では正規表現の書き方をより良い書き方へ提案してくれています。
image.png

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

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

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

さいごに

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

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

参考サイト

Snykコード-Snykユーザードキュメント

Visual Studio Code extension for Snyk Code - Snyk User Docs

12
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?