@saltnburnem
Detroit Software Developers
Thanks!
#DSDevs | #DeveloperCommunity
@saltnburnem
#DSDevs
#DSDevs | #DeveloperCommunity
#DeveloperCommunity
@saltnburnem
I ❤️
#DSDevs | #DeveloperCommunity
@saltnburnem
#DSDevs | #DeveloperCommunity
https://x.com/detroit_js
Shownotes
@saltnburnem
#DSDevs | #DeveloperCommunity
Chris DeMars
@saltnburnem | 🦋 @chrisdemars.net
Senior Developer Advocate
@saltnburnem
#DSDevs | #DeveloperCommunity
@saltnburnem
#DSDevs | #DeveloperCommunity
Know Your JS:
SBOMs for Frontend Devs
@saltnburnem
#DSDevs | #DeveloperCommunity
THE MEN IN BLACK KNOW WHAT'S IN YOUR JAVASCRIPT!!
👽🛸👽🛸👽🛸👽🛸👽🛸👽🛸👽
and how to fix it
⚠️ Trigger Warning ⚠️
@saltnburnem
Aliens, UFOs, UAPs
#DSDevs | #DeveloperCommunity
What does this?
@saltnburnem
#DSDevs | #DeveloperCommunity
Have to do with this?
@saltnburnem
#DSDevs | #DeveloperCommunity
UNEXPLAINABLE
@saltnburnem
#DSDevs | #DeveloperCommunity
How many dependencies does the average JS app have?
@saltnburnem
#DSDevs | #DeveloperCommunity
npm ls @saltnburnem
#DSDevs | #DeveloperCommunity
@saltnburnem
#DSDevs | #DeveloperCommunity
Why not list all?
@saltnburnem
#DSDevs | #DeveloperCommunity
npm ls -all@saltnburnem
#DSDevs | #DeveloperCommunity
@saltnburnem
#DSDevs | #DeveloperCommunity
Direct
@saltnburnem
#DSDevs | #DeveloperCommunity
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.3.4"
}@saltnburnem
#DSDevs | #DeveloperCommunity
Transitive
@saltnburnem
#DSDevs | #DeveloperCommunity
"dependencies": {
"@next/env": "15.3.4"
}@saltnburnem
#DSDevs | #DeveloperCommunity
npm install ufo-tracker@saltnburnem
#DSDevs | #DeveloperCommunity
"dependencies": {
"mib": "1.3.4"
}@saltnburnem
#DSDevs | #DeveloperCommunity
@saltnburnem
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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.
Top of the Chain
@saltnburnem
Executive Order 14028
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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 expressnpm i expres@saltnburnem
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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/binBrew
brew install syft@saltnburnem
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #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
#DSDevs | #DeveloperCommunity
Shownotes
@saltnburnem
#DSDevs | #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
Copy of Know Your JS: SBOMs for Frontend Devs - 25min
By Chris DeMars
