Overview

Description

This plugin provides Browser-specific security rules to prevent XSS and other client-side attacks. By using this plugin, you can proactively identify and mitigate security risks across your entire codebase.

Philosophy

Interlace fosters strength through integration. Instead of stacking isolated rules, we interlace security directly into your workflow to create a resilient fabric of code. We believe tools should guide rather than gatekeep, providing educational feedback that strengthens the developer with every interaction.

Getting Started

• To check out the guide, visit eslint.interlace.tools. 📚
• 要查看中文 指南, 请访问 eslint.interlace.tools. 📚
• 가이드 문서는 eslint.interlace.tools에서 확인하실 수 있습니다. 📚
• ガイドは eslint.interlace.toolsでご確認ください。 📚
• Para ver la guía, visita eslint.interlace.tools. 📚
• للاطلاع على الدليل، قم بزيارة eslint.interlace.tools. 📚

npm install eslint-plugin-browser-security --save-dev

💡 What You Get

• 21 security rules targeting browser-specific vulnerabilities
• XSS prevention via DOM manipulation and dynamic content detection
• Storage security preventing sensitive data exposure in localStorage/sessionStorage/IndexedDB
• Cross-origin protection with postMessage origin validation
• LLM-optimized messages with CWE references and auto-fix suggestions
• OWASP Top 10 coverage for browser security patterns

🎯 Why This Plugin?

Modern browser applications face unique security challenges across storage APIs, cross-origin communication, and dynamic content rendering. This plugin provides static analysis rules specifically designed for browser security patterns:

• XSS Prevention: Detects dangerous DOM manipulation patterns
• Storage Security: Prevents sensitive data exposure in localStorage/sessionStorage/IndexedDB
• Cross-Origin Protection: Validates postMessage origin checks
• Cookie Security: Identifies insecure cookie handling in JavaScript
• LLM-Optimized: All rules include AI-friendly remediation guidance

🔍 Detection Examples

❌ Vulnerable Code

// XSS via innerHTML
element.innerHTML = userInput;

// Code injection via eval
eval(dynamicCode);

// JWT in localStorage (XSS can steal it)
localStorage.setItem('token', jwt);

// postMessage without origin check
window.addEventListener('message', (event) => {
  processData(event.data); // Anyone can send messages!
});

✅ Secure Code

// Safe text assignment
element.textContent = userInput;

// Or sanitize before HTML insertion
element.innerHTML = DOMPurify.sanitize(userInput);

// Use HttpOnly cookies for auth tokens (set by server)
// Server: Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Strict

// Origin validation
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted-domain.com') return;
  processData(event.data);
});

⚙️ Configuration Presets

🤖 LLM-Optimized Messages

All rules include structured remediation guidance designed for AI assistants:

[browser-security/no-innerhtml] XSS vulnerability: Direct HTML assignment detected.

📋 CONTEXT:
  • Pattern: element.innerHTML = unsanitizedInput
  • Risk: Any script in unsanitizedInput will execute

🛠️ REMEDIATION:
  Option A (Preferred): Use textContent for plain text
    element.textContent = userInput;

  Option B: Sanitize before insertion
    element.innerHTML = DOMPurify.sanitize(userInput);

📚 References:
  • CWE-79: https://cwe.mitre.org/data/definitions/79.html
  • OWASP XSS Prevention: https://owasp.org/...

By providing this structured context (CWE, OWASP, Fix), we enable AI tools to reason about the security flaw rather than hallucinating. This allows Copilot/Cursor to suggest the exact correct fix immediately.

Rules

Legend

🔗 Related ESLint Plugins

Part of the Interlace ESLint Ecosystem — AI-native security plugins with LLM-optimized error messages:

📄 License

MIT © Ofri Peretz