BOM View

ソフトウェア部品表（SBOM）ファイルからソフトウェア依存関係を表示する、シンプルで静的なWebアプリケーションです。静的サイトであるため、GitLab Pages、GitHub Pages、Netlifyなどの静的Webホスティングサービスに簡単にホストできます。

機能

SBOMビューア: CycloneDX/SPDX JSON形式のSBOMからコンポーネントを、検索可能なわかりやすいテーブルで表示します。
動的読み込み: サイトを再構築することなく、SBOMの追加と表示が可能です。
オンデマンド脆弱性スキャン: osv.devデータベースを使用して、個々のパッケージまたはSBOM全体の既知の脆弱性をスキャンできます。さらに、BOM Viewは、GrypeやTrivyなどのツールで生成されたCycloneDX SBOM内にすでに含まれている（「組み込み」）脆弱性も表示できます。
- 脆弱性を含むSBOMの生成例:
  - Trivy: trivy image <image> --format=cyclonedx --output=sbom.json --scanners vuln
  - Grype: grype <image> --output cyclonedx-json > sbom.json
- 注意: この機能は現在、CycloneDX SBOMでのみサポートされています。
OpenSSF Scorecards: OpenSSF Scorecardからのセキュリティスコアでパッケージデータを充実させ、サプライチェーンセキュリティの状況に関する洞察を提供します。

サポートされている形式

現在、BOM ViewはJSON形式のCycloneDXおよびSPDXをサポートしています。これらはsyftなどのツールで生成できます。

サイトへのSBOMの追加

このアプリケーションは、実行時にSBOMを動的に読み込むように設計されています。独自のSBOMを追加するために、プロジェクトを再構築する必要はありません。デプロイされた静的サイトのルートディレクトリ（例：ページジョブで提供されるdistまたはpublicフォルダ）で、以下の手順に従ってください。

sbomsディレクトリを作成: まだ存在しない場合は、sbomsという名前のディレクトリを作成します。
SBOMを追加: CycloneDX/SPDX JSONファイルをsbomsディレクトリにコピーします。
インデックスファイルを更新: sbomsディレクトリ内にindex.jsonというファイルを作成または更新します。このファイルは、どのSBOMが利用可能かをアプリケーションに伝えます。これは、そのディレクトリ内のSBOMのファイル名をそれぞれ文字列として持つ、単一のJSON配列を含む必要があります。

例えば、my-app.jsonとanother-lib.jsonがある場合、index.jsonファイルは次のようになります:
```
[
  "my-app.json",
  "another-lib.json"
]
```

アプリケーションはindex.jsonを取得してSBOM選択ドロップダウンを設定し、選択された対応するファイルを読み込みます。

GitLab Pages CI/CDの例

以下は、ビルド済みリリースを取得し、SBOMを抽出し、デプロイメント用に動的にindex.jsonを作成する.gitlab-ci.yml設定の例です。

stages:
  - sbom
  - deploy

create_sbom:
  stage: sbom
  image: alpine:3.23.2
  before_script:
    - apk add syft
  script:
    - mkdir sboms
    - syft alpine:3.19 -o cyclonedx-json=sboms/alpine-cyclone.json
  artifacts:
    paths:
      - sboms

pages:
  stage: deploy
  image: alpine:3.23.2
  before_script:
    - apk add curl jq
  script:
    - curl -L https://github.com/hristiy4n/bom-view/releases/download/v0.4.0/bom-view-v0.4.0-dist.tar.gz | tar zx
    - mv dist public
    - mkdir public/sboms
    - cp sboms/* public/sboms
    - |
      find sboms -maxdepth 1 -type f -name '*.json' ! -name 'index.json' \
      | sed 's|.*/||' \
      | sort \
      | jq -R . | jq -s . > public/sboms/index.json
  needs:
    - job: create_sbom
  artifacts:
    paths:
      - public

この設定の実際の例は、こちらで確認できます: https://security-dashboard-a9b4f8.gitlab.io/

必要なディレクトリ構造

最終的なデプロイメントディレクトリは、以下の構造を持つ必要があります:

dist/
├── assets/
│   └── ... (CSSおよびJSファイル)
├── index.html
└── sboms/
    ├── index.json
    ├── sbom1.json
    ├── sbom2.json
    └── ...