DEV Community

Cover image for Frontend Protection: The Browser Static Analysis Standard
Ofri Peretz
Ofri Peretz

Posted on • Edited on • Originally published at ofriperetz.dev

Frontend Protection: The Browser Static Analysis Standard

#javascript #security #browser #eslint

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
Enter fullscreen mode Exit fullscreen mode

Flat Config 

// eslint.config.js
import browserSecurity from 'eslint-plugin-browser-security';

export default [browserSecurity.configs.recommended];
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode 
# 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 .
Enter fullscreen mode Exit fullscreen mode

📦 npm: eslint-plugin-browser-security
📖 Full Rule List

⭐ Star on GitHub

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.

ofriperetz.dev | LinkedIn | GitHub

Top comments (0)