React & NPM Specialization
Relevant source files
The following files were used as context for generating this wiki page:
The React & NPM Specialization module within the Enhanced Security Scanner is a specialized suite of detection rules and analysis logic designed to address the unique security challenges of the JavaScript/TypeScript ecosystem. It focuses on identifying vulnerabilities specific to React component lifecycles, state management, and the integrity of the npm supply chain.
This specialization is integrated into the scanner's multi-phase scanning strategy, ensuring that framework-specific context is preserved while reducing false positives through context-aware filtering. It covers critical areas such as React Hook misconfigurations, insecure data persistence, and malicious npm package behaviors.
Sources: CHANGELOG.md:15-18, README.md:25-32
React Security Analysis
The scanner employs specific rulesets to analyze React-specific code patterns, focusing on hooks, the Context API, and DOM manipulation. This analysis identifies risks where sensitive data might be exposed in client-side code or where improper hook usage could lead to security or reliability bugs.
Hook and State Security
The scanner targets common patterns where developers may inadvertently expose secrets or create stale closures. Specifically, it looks for hardcoded credentials within hooks and monitors useEffect dependency arrays to prevent logic errors.
The diagram shows how the scanner bifurcates React analysis into secret detection and functional integrity checks.
| Rule ID | Severity | Focus Area | Description |
|---|---|---|---|
react-hardcoded-api-key-in-hook | ERROR | Secrets | Detects strings over 20 chars assigned to variables like API_KEY/TOKEN inside hooks. |
react-unsafe-useeffect-deps | WARNING | Code Quality | Detects missing dependencies in useEffect which can cause stale closure bugs. |
react-context-api-secret-exposure | ERROR | Secrets | Identifies hardcoded secrets within the createContext initialization. |
Sources: rules/react/hooks.yml:1-32, rules/react/hooks.yml:71-88
Client-Side Injection and Persistence
A major focus of the React specialization is the prevention of Cross-Site Scripting (XSS) and insecure data storage. The scanner specifically checks for the use of dangerouslySetInnerHTML and the storage of sensitive tokens in localStorage.
- XSS Prevention: The scanner flags any use of
dangerouslySetInnerHTMLthat is not wrapped in aDOMPurify.sanitize()call. - Storage Security: Patterns that attempt to save
jwt,token, orauthstrings intolocalStoragetrigger warnings, recommending secure alternatives like HttpOnly cookies.
Sources: rules/react/hooks.yml:43-69, README.md:105-110
NPM Supply Chain Security
The npm specialization extends beyond code analysis into the configuration and lifecycle of the package ecosystem. This includes detecting malicious package behaviors and supply chain attacks like typosquatting.
Malicious Package Detection
The scanner analyzes package.json and project structures to identify indicators of compromise or supply chain risk. This includes identifying "typosquatting" by calculating the Levenshtein distance between popular packages (e.g., jest vs next) and flagging suspicious scripts.
This flow illustrates the multi-vector approach to npm security, covering both metadata (dependencies) and execution (scripts).
Sources: rules/npm/security.yml:1-38, SECURITY_REVIEW.md:139-150
NPM Script Vulnerabilities
Specific rules target the scripts section of package.json to prevent code injection and data leaks.
- Network Access: Detects
curl,wget, orfetchwithinpostinstallscripts, which are common vectors for malicious data exfiltration. - Environment Leaks: Flags the use of
npm_environment variables in scripts to prevent accidental exposure of build-time secrets. - Command Injection: Specifically monitors for
eval()usage or unvalidated inputs in npm commands.
Sources: rules/npm/security.yml:1-38, SECURITY_REVIEW.md:28-45
Technical Debt and Dependency Lifecycle
The specialization includes a "Technical Debt" analyzer that tracks the health of the npm dependency tree. This system identifies:
- Outdated Packages: Dependencies that have newer versions available.
- End-of-Life (EOL): Packages that are no longer maintained (e.g.,
moment.js). - Upgrade Paths: Automated reporting on the difficulty and necessity of upgrades.
Sources: CHANGELOG.md:19-20, QUICK_START.md:225-235
Summary of Specialization Capabilities
The React & NPM Specialization provides a comprehensive security layer for modern web applications by combining static analysis of framework patterns with supply chain intelligence.
| Feature | Target | Goal |
|---|---|---|
| Hook Analysis | React Hooks | Prevent secret exposure and stale closures |
| Injection Shield | JSX Elements | Enforce sanitization for dynamic HTML |
| Supply Chain Guard | package.json | Detect typosquatting and malicious scripts |
| Debt Tracking | npm Dependencies | Identify EOL and outdated packages |
Sources: CHANGELOG.md:15-21, README.md:34-45