BOM View

A simple, static web application for displaying software dependencies from Software Bill of Materials (SBOM) files. Being a static site, it can be easily hosted on any static web hosting service, such as GitLab Pages, GitHub Pages, or Netlify.

Features

• SBOM Viewer: Displays components from CycloneDX/SPDX JSON SBOMs in a clear, searchable table.
• Dynamic Loading: Add and display SBOMs without rebuilding the site.
• On-Demand Vulnerability Scanning: Scan individual packages or an entire SBOM for known vulnerabilities using the osv.dev database. Additionally, BOM View can display vulnerabilities that are already included ("baked-in") within CycloneDX SBOMs generated by tools like Grype or Trivy.
  • Examples of generating SBOMs with vulnerabilities:
    • Trivy: trivy image <image> --format=cyclonedx --output=sbom.json --scanners vuln
    • Grype: grype <image> --output cyclonedx-json > sbom.json
  • Note: This feature is currently supported only for CycloneDX SBOMs.
• OpenSSF Scorecards: Enriches package data with security scores from OpenSSF Scorecard, providing insights into supply chain security posture.

Supported Formats

Currently, BOM View supports CycloneDX and SPDX formats in JSON. These can be generated by tools like syft.

Adding SBOMs to Your Site

This application is designed to load SBOMs dynamically at runtime. To add your own SBOMs, you do not need to rebuild the project. Follow these steps in your deployed static site's root directory (e.g., the dist or public folder served by your pages job).

1. Create the sboms directory: If it doesn't already exist, create a directory named sboms.

2. Add Your SBOMs: Copy your CycloneDX/SPDX JSON files into the sboms directory.

3. Update the Index File: Create or update a file named index.json inside the sboms directory. This file tells the application which SBOMs are available. It must contain a single JSON array of strings, where each string is the filename of an SBOM in that directory.

   For example, if you have my-app.json and another-lib.json, the index.json file should look like this:

   root@kitploit:~

   [
     "my-app.json",
     "another-lib.json"
   ]
   

The application will then fetch the index.json to populate the SBOM selection dropdown and load the corresponding file when selected.

Example GitLab Pages CI/CD

Below is an example .gitlab-ci.yml configuration that fetches a pre-built release, extracts SBOMs, and dynamically creates the index.json for deployment.

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

You can see a live example of this configuration in action here: https://security-dashboard-a9b4f8.gitlab.io/

Required Directory Structure

Your final deployment directory should have the following structure:

dist/
├── assets/
│   └── ... (CSS and JS files)
├── index.html
└── sboms/
    ├── index.json
    ├── sbom1.json
    ├── sbom2.json
    └── ...