Baseline-Scanner

Scanner_Test

As a bug bounty hunter, I spend much of my time exploring the web for behaviors that break, misbehave, or leave users vulnerable. One of the most common sources of instability is inconsistent or outdated browser support.

What inspired me about this project is the opportunity to proactively help developers identify and avoid unstable, stranded, or non-cross-platform features , the kind that often lead to poor experiences or even security vulnerabilities.

Additionally, this project is built in JavaScript a language I am currently learning while in PC AGE computer trade school making it both a technical challenge and a valuable learning opportunity.

What It Does

Baseline Scanner is a command-line tool that:

Scans JavaScript/TypeScript/JSX source code
Detects usage of web platform features that are not included in the Web Baseline
Flags these risky or unstable features in a clear, color-coded report
Helps developers write more stable, compatible, and secure code

It uses:

@babel/parser and @babel/traverse to parse and walk modern source code
@mdn/browser-compat-data for cross-browser feature support
compute-baseline to calculate whether a feature is "Baseline" (stable and widely supported)

How We Built It

The tool was built using:

Node.js as the runtime environment
@babel/parser and @babel/traverse to handle syntax trees for modern JavaScript, TypeScript, and JSX
@mdn/browser-compat-data and compute-baseline to verify baseline compatibility
Chalk for formatting terminal output (warnings, file paths, messages)

The scanning process works by:

Walking through a target directory recursively
Parsing each JavaScript/TS/JSX file into an AST
Detecting usage of known web platform features (e.g., navigator.share, BigInt)
Looking up each feature in the Baseline dataset
Reporting any usage that falls outside the "baseline" scope

Challenges We Ran Into

The biggest challenge was time I found out about this competition less than 24 hours before the deadline.

Other challenges:

Mapping real-world code (e.g., navigator.share) to the correct entries in MDN's browser compatibility data
Accurately detecting features through static code analysis (handling nesting, imports, computed properties)
Maintaining performance and simplicity while parsing and analyzing complex ASTs

Accomplishments That We're Proud Of

Successfully built and released a working CLI tool under extreme time pressure
Used Babel to parse modern JavaScript, JSX, and TypeScript
Connected static analysis to real-world browser data
Aligned with the Baseline initiative to improve cross-browser compatibility and security
Created a tool that I, and other developers, can immediately use for web security auditing

What We Learned

How to parse and traverse modern JavaScript code using Babel's AST tools
How to utilize the @mdn/browser-compat-data and compute feature baseline status
The structure of compatibility data and the difficulty of defining "safe" web features
That building developer tooling involves balancing precision, performance, and usability

What's Next for Baseline Scanner

ESLint Plugin: WEB EXTENTION
HTML & CSS Analysis: Scan for HTML tags, attributes, and CSS properties not in Baseline
CI Integration: Generate machine-readable JSON/HTML reports for automated pipelines
Documentation Links: Include MDN links and fix suggestions in scan

Mathematical Justification

Let:

$F$ be the set of all JavaScript features used in a given codebase.
$B \subset F$ be the subset of features that are considered part of the Web Baseline.

Then, the goal of the scanner is to compute:

$$ F_{\text{non-baseline}} = F \setminus B $$

Where $F_{\text{non-baseline}}$ is the set of all features used that are not part of the Baseline.

The scanner flags each $f \in F_{\text{non-baseline}}$ as potentially unsafe or unstable for production