Snyk CodeとVSCodeで開発中コードのセキュリティスキャンをやってみた

#Snyk

#VSCode拡張機能

今泉大樹

2022.07.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、AWS事業本部コンサルティング部に所属している今泉(@bun76235104)です。

みなさんは、DevSecOpsしたいですか？私はしたいです。

昨今、ソフトウェア開発のライフサイクルの早い段階からセキュリティに取り組むShift-Leftという考え方が重要になってきていますが、今回は Snyk CodeとVSCodeの拡張機能を使って、コードのセキュリティスキャンを行うことで、開発中に危険なコードを検出できるようにしてみました。

参考: 「(私のように)セキュリティを何から始めれば良いか分からない開発者の方へ」というセッションを視聴しました！ | DevelopersIO

Snyk Codeとは

Snykが提供しているサービスの一つで、コードのセキュリティスキャンを行えます。

詳細はSnyk Code - Snyk User Docsをご参照ください。

さまざまなIDEとの連携も提供されており(IDE plugins | Snyk)、今回はVSCodeを使ってセキュリティスキャンを行ってみようと思います。

なお、今回はSnykのアカウント作成などを既に行っているものとして、検証を進めております。

アカウント作成などはGetting started - Snyk User Docsをご参照ください。

SnykCLIをインストールする方法

まずVSCodeの拡張機能を使う前に、snykコマンドを利用できるように準備します。

OSに応じて公式の手順に従ったインストールを行います。

私の場合Macを利用しているためHombebrewを利用しました。

brew tap snyk/tap
brew install snyk

インストールできたら確認のため以下コマンドを実行します

snyk --version

これでバージョンの情報が出力されればOKです。

以下コマンドでSnykアカウントの認証をしておきましょう。

snyk auth

Organizationsの切り替え方法

snykはデフォルトのOrganizationを利用しようとしますので、会社でOrganizationを作っている場合などは設定を行う必要があります。

筆者の場合、デフォルト設定のままsnyk code test コマンドを実行してしまい、以下の様に出力されていました。

$ snyk code test
> Snyk Code is not supported for org: enable in Settings > Snyk Code

(別Orgの設定画面をみながら)あれ〜有効になっているのになぁ・・・みたいな時間を過ごしてしまいました。

設定方法などはHow to select the organization to use in the CLI – Support Portal | Snykをご参照ください。

SnykのVSCode拡張の設定方法

まずSnykの拡張機能をVSCodeでインストールします。

拡張機能のマーケットで「snyk」と検索することで見つかります。

2022年7月26日現在,Snyk Security - Code and Open Source Dependencies - Visual Studio Marketplaceが公式の拡張機能のようですのでインストールを行います。

vscode_snyk_extension

インストールが完了すると、VSCodeのサイドバーにSnykのマークが現れますのでクリックし、Connect VS Code with Snyk をクリックします。

snyk_vscode_login

ブラウザで以下の様な画面に遷移するので Authenticate をクリックします。

snyk_vscode_web_login

VSCodeのSnykの画面にて以下のように Thanks for connectiong with Snyk. と表示されていればログイン完了です。

snyk_vscode_logged_in

なお、この画面において以下の様にOrganizationでSnyk Code が有効になっていない旨表示されておりますが、筆者の場合すでに有効化されたOrganizationが用意されていたのでOrganizationの切り替えを行う必要がありました。

(デフォルトのOrganizationでSnyk Codeを有効にしたい場合、画面のナビゲーションに従って有効化すれば良いかと思われます。)

snyk_vscode_org_description

VSCodeのSnyk拡張の設定を行う場合、コマンドパレットを表示(Macの場合 cmd + shift + p を押下)して、Snyk: Settings を実行することで設定画面が開きます。

設定画面の Snyk Advanced: Organization でOrganizationの orgslugname を入力します。 (説明欄に記載されている通りSnykダッシュボードのURLの https://app.snyk.io/org/[orgslugname] orgslugname の部分が設定値となります)

snyk_vscode_org_settings

ここまで設定を終えて、VSCodeをリロードすることで準備が整いました。

snyk_vscode_setting_complete

サンプルプロジェクトで脆弱性を検知してみた

ここで公式が用意してくださっているサンプルプロジェクトを git clone します。

snyk-labs/nodejs-goof: Super vulnerable todo list applicationからcloneできます。

なお、その他言語のサンプルなどもSnyk Labsから探すことができます。

git clone して、コマンドパレットから Snyk: Rescan コマンドを実行することで以下の様に危険なコードが検出されました。

snyk_scanend_list

検出された結果をクリックすることで、どのような理由で検出され、どのように修正することが望ましいかなどを表示してくれます

snyk_code_detail

この場合、詳細に表示されたアドバイスに従って無害化を行うように修正したところスキャン結果から消えました。

before

Todo.findById(req.params.id, function (err, todo) {

    try {
      todo.remove(function (err, todo) {
        if (err) return next(err);
        res.redirect('/');
      });
    } catch (e) {
    }
  });

after

// injectionSanitizeがパラメーターの無害化用の処理と見なしてください
  const id = injectionSanitize(req.params.id)
  Todo.findById(id, function (err, todo) {

    try {
      todo.remove(function (err, todo) {
        if (err) return next(err);
        res.redirect('/');
      });
    } catch (e) {
    }
  });
};