GitHub code scanning 結果を VS Code で確認できる SARIF Viewer 拡張

| 2 min read
Author: masahiro-kondo masahiro-kondoの画像

以前「GitHub の脆弱性検出機能 Code scanning alerts と CodeQL について」という記事で Code scanning alerts を設定して確認する方法を紹介しました。

先日 VS Code (と Codespaces) で動作する VS Code 拡張 SARIF Viewer for Visual Studio Code についてのブログが公開されました。

View GitHub code scanning findings directly in VS Code and GitHub Codespaces | The GitHub Blog

SARIF Viewer 拡張を使用すると、Scanning 結果を VS Code 上で確認することができます。

Information

SARIF(Static Analysis Results Interchange Format)は、静的解析結果を交換するための標準フォーマットです。

Static Analysis Results Interchange Format (SARIF) Version 2.0

Sarif Viewer - Visual Studio Marketplace

VS Code に SARIF Viewer 拡張をインストールし、Code scanning を有効にしているリポジトリを開くと、自動検出して以下のような通知が表示されます。

Connect をクリックして、GitHub と接続すると、SARIF Results パネルが開き、VS Code 内で結果をブラウズすることができます。

SARIF Results パネル

.vscode/settings.json に以下の設定が保存されました。この設定を書いておけば、起動時にコネクトしてくれます。

{
"sarif-viewer.connectToGithubCodeScanning": "on"
}

VS Code ではスキャン結果とコード箇所を連動させて閲覧できます。この例では、URL の正規表現で . がエスケープされていないためにより多くのホスト名とマッチしてしまうという脆弱性の指摘でした。

VSCode上でのアラート表示

GitHub 上でもアラートが表示されていました。

GitHubでのアラート表示

ということでコードを修正して commit / push します。CodeQL のワークフローが実行され、GitHub 側のスキャン結果が更新されました。

再スキャン結果

VS Code の SARIF Results の Refresh results をクリックすると、こちらでも Alert が表示されなくなりました。

VSCode上の再スキャン結果

冒頭のブログの説明にはこうあります。

(コードスキャンの)結果を IDE に取り込むことで、開発者はコンテキストを切り替えずに作業できます。そして修正がいったん GitHub にプッシュされると GitHub Code scanning が確認してマージに青信号を出すことができます。Pull Request scanning と IDE での結果のコンビネーションにより、脆弱性の防止はさらにシームレスになります。

確かに静的コード分析の結果はレポートをわざわざ開いて確認しない開発者も多いので、手元の IDE で確認できるようにすると対応も捗りそうですね。

豆蔵デベロッパーサイト - 先週のアクセスランキング
  1. Nuxt3入門(第1回) - Nuxtがサポートするレンダリングモードを理解する (2022-09-25)
  2. 自然言語処理初心者が「GPT2-japanese」で遊んでみた (2022-07-08)
  3. GitHub Codespaces を使いはじめる (2022-05-18)
  4. Jest再入門 - 関数・モジュールモック編 (2022-07-03)
  5. ORマッパーのTypeORMをTypeScriptで使う (2022-07-27)
  6. Nuxt3入門(第4回) - Nuxtのルーティングを理解する (2022-10-09)
  7. Nuxt3入門(第3回) - ユニバーサルフェッチでデータを取得する (2022-10-06)
  8. 第1回 OpenAPI Generator を使ったコード生成 (2022-06-04)
  9. Nuxt3入門(第8回) - Nuxt3のuseStateでコンポーネント間で状態を共有する (2022-10-28)
  10. Nuxt3入門(第2回) - 簡単なNuxtアプリケーションを作成する (2022-10-02)