SBOMgen

Title

Introduction

This tutorial illustrates how to produce an SBOM from Webpack projects using the CycloneDX-Webpack plugin.

Requirements

• Node.js >= 14
• Npm or Yarn
• Webpack ^5
• Webpack project

Installation

Run the relevant command within your project:

Npm

npm i -D @cyclonedx/webpack-plugin

Yarn

yarn add -D @cyclonedx/webpack-plugin

Usage

In your webpack.config.json file, add the following code blocks:

const { CycloneDxWebpackPlugin } = require('@cyclonedx/webpack-plugin');

/** @type {import('@cyclonedx/webpack-plugin').CycloneDxWebpackPluginOptions} */
const cycloneDxWebpackPluginOptions = {
  specVersion: '1.6', 
  reproducibleResults: false,
  outputLocation: './bom', //can be customized
  includeWellknown: true,
  wellknownLocation: './.well-known', //generate SBOM to a well known location 
  rootComponentAutodetect: true, //set to false if you wish to set rootComponent manually.
  rootComponentType: 'application', 
  rootComponentName: undefined, //define if you wish to set rootComponent manually.
  rootComponentVersion: undefined, //define if you wish to set rootComponent manually.
  rootComponentBuildSystem: undefined, //define if you wish to set rootComponent manually.
  rootComponentVCS: undefined, //define if you wish to set rootComponent manually.
  collectEvidence: true
}

within the module.exports section, add the following plugins: section:

module.exports = {
  // other code goes here
  plugins: [
    new CycloneDxWebpackPlugin(cycloneDxWebpackPluginOptions)
  ]
}

Build the project, and a directory of the outputLocation: value (in this case, bom/) directory should appear in your build dist/ directory, containing SBOMs bom.json and bom.xml.

Further features to the SBOM root component, e.g. name, version, build system, version control can be implemented by customizing the rootComponent* variables, after setting rootComponentAutodetect: to false.

Notes

• Installing the plugin with the format @cyclonedx/webpack-plugin may throw errors, which can be rectified by installing the plugin with the format @cyclonedx/webpack-plugin@latest or @cyclonedx/webpack-plugin@4.0.1 (with 4.0.1 being the latest version as of writing this tutorial).

Example SBOM

This section illustrates CycloneDX JSON and XML SBOMs of the CycloneDX-Webpack plugin simple example code, created via CycloneDX-Webpack plugin.

Simple Example (JSON)

Simple Example (XML)

References

• CycloneDX. (n.d.). GitHub - CycloneDX/cyclonedx-webpack-plugin: Generate CycloneDX Software Bill of Materials (SBOM) from webpack bundles at compile time. GitHub. https://github.com/CycloneDX/cyclonedx-webpack-plugin

This site is open source. Improve this page.