@saltnburnem

#MagnoliaConf

#MagnoliaConf | #DeveloperCommunity

#DeveloperCommunity

@saltnburnem

I ❤️

#MagnoliaConf | #DeveloperCommunity

Shownotes

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Chris DeMars

        @saltnburnem | 🦋 @chrisdemars.net

Senior Developer Advocate

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Know Your JS:

SBOMs for Frontend Devs

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

THE MEN IN BLACK KNOW WHAT'S IN YOUR JAVASCRIPT!!

👽🛸👽🛸👽🛸👽🛸👽🛸👽🛸👽

AND HOW TO FIX IT!

⚠️ Trigger Warning ⚠️

@saltnburnem

Aliens, UFOs, UAPs

#MagnoliaConf | #DeveloperCommunity

What does this?

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Have to do with this?

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

UNEXPLAINABLE

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

How many dependencies does the average JS app have?

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

 npm ls

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Why not list all?

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

 npm ls -all

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Direct

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

"dependencies": {
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "next": "15.3.4"
}

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Transitive

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

"dependencies": {
  "@next/env": "15.3.4"
}

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

npm install ufo-tracker

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

"dependencies": {
  "mib": "1.3.4"
}

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

SBOM

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

SBOM

Software Bill of Materials

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

What is it?

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

An SBOM, or Software Bill of Materials, is a detailed, machine-readable list of all components within a piece of software, including dependencies, metadata, and relationships between components.

- https://medium.com/@tahirbalarabe2/why-every-modern-software-needs-a-software-bill-of-materials-sbom-for-security-04a4fec312c8

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Transparency

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Disclosure

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Disclosure

🛸

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Critical for two MAIN things:

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Critical for two MAIN things:

🔐 Security

✅ Compliance

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

6 Types of SBOMs

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Design

Source

Analyzed

Deployed

 Build

Runtime

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

NOT a lock or package file

🚫

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

BIG PROBLEM

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Typosquatting IS a thing!

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

One of these is NOT like the other!

npm i express
npm i expres

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Importance

Product & Users

AND

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

👽

Component Visibility

👽

Vulnerability Management

👽

Supply Chain Security

👽

Collaboration

👽

Compliance

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

To Care or Not to Care?

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

100% YOU should care!

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Increased requirements for SBOMs

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Client Trust Building

@saltnburnem

👽

Policy Reqs.

👽

Process for older solutions

👽

Storage system for SBOMs

👽

Accessibility to SBOMs

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Syft Install

Recommended

curl -sSfL https://get.anchore.io/syft | sudo sh -s -- -b /usr/local/bin

Brew

brew install syft

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

😉 Didn't forget about Windows!

Chocolatey

choco install syft -y

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Microsoft SBOM Tool

WinGet

winget install Microsoft.SbomTool

@saltnburnem

https://github.com/microsoft/sbom-tool

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

SPDX

&

CycloneDX

@saltnburnem

Two popular formats

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Let's Generate some SBOMs!

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

REGEN SBOMs!

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

SBOM Security

@saltnburnem

Snyk

Grype

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

GitHub Workflow

Current Directory

- name: Scan Project Directory with Grype
	uses: anchore/scan-action@v6
    with:
    path: "." # Scans the current repository root

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

GitHub Workflow

Scan SBOM

- name: Generate SBOM with Syft
	uses: anchore/sbom-action@v0
	with:
		format: "spdx-json"
		output-file: "my-sbom.spdx.json"

- name: Scan SBOM with Grype
	uses: anchore/scan-action@v6
	with:
		sbom: "my-sbom.spdx.json"

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

👽

Component Visibility

👽

Vulnerability Management

👽

Supply Chain Security

👽

Collaboration

👽

Compliance

Recap

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Shownotes

@saltnburnem

#MagnoliaConf | #DeveloperCommunity

Maintained by GlueStack, the compromised packages include react-native-aria/focus, utils, overlays, interactions, toggle, switch, checkbox, radio, button, menu, listbox, tabs, combobox, disclosure, slider, and separator, as well as gluestack-ui/utils.

Why do we need it?

Thanks!

        @saltnburnem | 🦋 @chrisdemars.net