Frontend Protection: The Browser Static Analysis Standard
Protect the frontend host. Use automated static analysis to detect localStorage leaks and XSS sinks in professional JS architectures.
The frontend host is the primary target for modern XSS. Here is the automated static analysis standard for browser security, protecting your users from localStorage leaks and insecure sinks.
Quick Install
npm install --save-dev eslint-plugin-browser-security
Flat Config
// eslint.config.js
import browserSecurity from 'eslint-plugin-browser-security';
export default [browserSecurity.configs.recommended];
Rule Overview
| Category | Rules | Examples |
|---|---|---|
| XSS Prevention | 7 | no-innerhtml, no-eval, no-websocket-innerhtml |
| Storage Security | 4 | no-sensitive-localstorage, no-jwt-in-storage |
| postMessage | 3 | no-postmessage-wildcard-origin, require-origin-check |
| Cookie Security | 2 | require-cookie-secure-attrs, no-sensitive-cookie-js |
| CSP | 2 | no-unsafe-inline-csp, no-unsafe-eval-csp |
| Other | 3 | require-websocket-wss, require-blob-url-revocation |
Run ESLint
npx eslint .
You'll see output like:
src/components/preview.tsx
42:5 error 🔒 CWE-79 CVSS:6.1 | innerHTML is XSS vulnerable
Fix: Use textContent or sanitize with DOMPurify
src/utils/storage.ts
18:3 error 🔒 CWE-922 | Storing JWT in localStorage is insecure
Fix: Use httpOnly cookies or sessionStorage with expiry
src/messaging/iframe.ts
31:1 error 🔒 CWE-345 | postMessage with '*' origin is dangerous
Fix: Specify exact origin: postMessage(data, 'https://trusted.com')
Quick Wins
XSS Prevention
// ❌ Dangerous: XSS vulnerability
element.innerHTML = userInput;
// ✅ Safe: Use textContent
element.textContent = userInput;
// ✅ Safe: Sanitize HTML
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);
Storage Security
// ❌ Dangerous: JWT in localStorage
localStorage.setItem('token', jwt);
// ✅ Better: Use httpOnly cookies (server-side)
// Or if you must use storage:
sessionStorage.setItem('token', jwt); // Clears on tab close
postMessage Security
// ❌ Dangerous: Wildcard origin
window.parent.postMessage(data, '*');
// ✅ Safe: Explicit origin
window.parent.postMessage(data, 'https://trusted-parent.com');
// ✅ Safe: Origin validation in listener
window.addEventListener('message', (event) => {
if (event.origin !== 'https://trusted-sender.com') return;
// Handle message
});
# Install
npm install --save-dev eslint-plugin-browser-security
# Config (eslint.config.js)
import browserSecurity from 'eslint-plugin-browser-security';
export default [browserSecurity.configs.recommended];
# Run
npx eslint .
📦 npm: eslint-plugin-browser-security 📖 Full Rule List
The Interlace ESLint Ecosystem Interlace is a high-fidelity suite of static code analyzers designed to automate security, performance, and reliability for the modern Node.js stack. With over 330 rules across 18 specialized plugins, it provides 100% coverage for OWASP Top 10, LLM Security, and Database Hardening.
Explore the full Documentation
© 2026 Ofri Peretz. All rights reserved.
Build Securely. I'm Ofri Peretz, a Security Engineering Leader and the architect of the Interlace Ecosystem. I build static analysis standards that automate security and performance for Node.js fleets at scale.