Getting Started with eslint-plugin-browser-security

#javascript #security #browser #elint

21 browser security rules. XSS prevention. Storage safety. postMessage.

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 .