secure-coding-rules 2.0.0

package/src/templates/frontend/csp.md

@@ -0,0 +1,146 @@
+# Content Security Policy Rules
+
+> Frontend Security - Content Security Policy (CSP)
+
+## Rules
+
+### 1. Implement a Strict CSP
+- **DO**: Define a Content-Security-Policy header that restricts script sources. Start with `default-src 'self'` and add specific directives as needed.
+- **DON'T**: Use a permissive CSP (`default-src *`) or skip CSP entirely.
+- **WHY**: CSP is the strongest browser-level defense against XSS. A strict policy prevents execution of injected scripts even if an XSS vulnerability exists.
+
+### 2. Use Nonce-Based or Hash-Based Script Loading
+- **DO**: Generate a unique cryptographic nonce per request and apply it to all `<script>` tags via `nonce` attribute. Set `script-src 'nonce-<value>'` in the CSP header.
+- **DON'T**: Use `'unsafe-inline'` or `'unsafe-eval'` in `script-src`.
+- **WHY**: `'unsafe-inline'` defeats the purpose of CSP. Nonces ensure only server-generated scripts execute.
+
+### 3. Restrict Object and Frame Sources
+- **DO**: Set `object-src 'none'` and `frame-ancestors 'self'` (or specific origins) to prevent plugin abuse and clickjacking.
+- **DON'T**: Allow unrestricted embedding of your site in iframes or loading of Flash/Java plugins.
+- **WHY**: Plugins can bypass other security controls. Unrestricted framing enables clickjacking attacks.
+
+### 4. Enable CSP Reporting
+- **DO**: Set `report-uri` or `report-to` directives to collect CSP violation reports. Monitor them for XSS attempts and policy issues.
+- **DON'T**: Deploy CSP without monitoring. Use `Content-Security-Policy-Report-Only` for testing before enforcement.
+- **WHY**: CSP reports reveal real attack attempts and policy misconfigurations without breaking the application.
+
+### 5. Avoid Overly Broad Whitelists
+- **DO**: Whitelist specific origins (e.g., `script-src 'self' https://cdn.specific.com`). Use `strict-dynamic` with nonces for dynamically loaded scripts.
+- **DON'T**: Whitelist entire CDN domains like `*.cloudflare.com` or `*.googleapis.com` that host arbitrary user content.
+- **WHY**: Broad domain whitelists can be bypassed using JSONP endpoints or user-uploaded scripts on those domains.
+
+### 6. Apply CSP to All Response Types
+- **DO**: Set CSP headers on HTML responses, error pages, and API responses that might be rendered by browsers.
+- **DON'T**: Only apply CSP to your main pages, leaving error pages, login pages, or admin panels unprotected.
+- **WHY**: Attackers target pages without CSP protection. Consistent application ensures no gaps.
+
+## Code Examples
+
+### Bad Practice
+```javascript
+// Permissive CSP that provides minimal protection
+app.use((req, res, next) => {
+  res.setHeader("Content-Security-Policy", "default-src *; script-src * 'unsafe-inline' 'unsafe-eval'");
+  next();
+});
+
+// Inline script without nonce (blocked by strict CSP)
+// <script>doSomething();</script>
+```
+
+### Good Practice
+```javascript
+import crypto from "node:crypto";
+
+// Strict nonce-based CSP middleware
+function cspMiddleware(req, res, next) {
+  const nonce = crypto.randomBytes(16).toString("base64");
+  res.locals.cspNonce = nonce;
+
+  const csp = [
+    `default-src 'self'`,
+    `script-src 'nonce-${nonce}' 'strict-dynamic'`,
+    `style-src 'self' 'nonce-${nonce}'`,
+    `img-src 'self' data: https:`,
+    `font-src 'self'`,
+    `connect-src 'self' https://api.example.com`,
+    `frame-ancestors 'self'`,
+    `object-src 'none'`,
+    `base-uri 'self'`,
+    `form-action 'self'`,
+    `report-uri /csp-report`,
+  ].join("; ");
+
+  res.setHeader("Content-Security-Policy", csp);
+  next();
+}
+
+app.use(cspMiddleware);
+
+// CSP violation report endpoint
+app.post("/csp-report", express.json({ type: "application/csp-report" }), (req, res) => {
+  const report = req.body["csp-report"];
+  logger.warn({
+    type: "csp_violation",
+    blockedUri: report["blocked-uri"],
+    violatedDirective: report["violated-directive"],
+    documentUri: report["document-uri"],
+    sourceFile: report["source-file"],
+    lineNumber: report["line-number"],
+  });
+  res.sendStatus(204);
+});
+
+// HTML template using nonce
+function renderPage(res, content) {
+  return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8">
+      <link rel="stylesheet" href="/styles/main.css" nonce="${res.locals.cspNonce}">
+    </head>
+    <body>
+      ${content}
+      <script nonce="${res.locals.cspNonce}" src="/js/app.js"></script>
+    </body>
+    </html>
+  `;
+}
+
+// Next.js CSP configuration (next.config.js)
+const nextConfig = {
+  async headers() {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: [
+              "default-src 'self'",
+              "script-src 'self' 'unsafe-inline'", // Next.js requires unsafe-inline; use nonce in custom server
+              "style-src 'self' 'unsafe-inline'",
+              "img-src 'self' data: https:",
+              "font-src 'self'",
+              "object-src 'none'",
+              "frame-ancestors 'self'",
+            ].join("; "),
+          },
+        ],
+      },
+    ];
+  },
+};
+```
+
+## Quick Checklist
+- [ ] CSP header set on all HTML responses
+- [ ] `default-src 'self'` as baseline
+- [ ] `script-src` uses nonces or hashes (no `'unsafe-inline'` or `'unsafe-eval'`)
+- [ ] `object-src 'none'` set to block plugins
+- [ ] `frame-ancestors` set to prevent clickjacking
+- [ ] `base-uri 'self'` to prevent base tag hijacking
+- [ ] CSP reporting configured and monitored
+- [ ] `Content-Security-Policy-Report-Only` used for testing before enforcement
+- [ ] No overly broad CDN domain whitelists

package/src/templates/frontend/csrf-protection.md

@@ -0,0 +1,151 @@
+# CSRF Protection Security Rules
+
+> Frontend Security - Cross-Site Request Forgery (CSRF) Defense
+
+## Rules
+
+### 1. Implement Anti-CSRF Tokens
+- **DO**: Generate a unique, unpredictable CSRF token per session or per request. Include it in every state-changing request.
+- **DON'T**: Rely on cookies alone for authentication of state-changing requests.
+- **WHY**: CSRF attacks exploit the browser's automatic cookie inclusion. Tokens add a second factor that attackers cannot obtain cross-origin.
+
+### 2. Use SameSite Cookie Attribute
+- **DO**: Set `SameSite=Strict` for session cookies where possible, or `SameSite=Lax` as a minimum.
+- **DON'T**: Use `SameSite=None` without `Secure` flag, or omit the SameSite attribute entirely.
+- **WHY**: SameSite prevents browsers from sending cookies with cross-origin requests, providing a strong defense-in-depth layer.
+
+### 3. Verify Origin and Referer Headers
+- **DO**: On the server, validate `Origin` or `Referer` headers match your domain for state-changing requests.
+- **DON'T**: Accept requests without origin validation, especially for API endpoints that modify data.
+- **WHY**: Origin/Referer verification is a supplementary defense that blocks cross-origin form submissions and fetch requests.
+
+### 4. Use Custom Request Headers for APIs
+- **DO**: Require a custom header (e.g., `X-Requested-With`) for all API requests. Simple forms cannot set custom headers.
+- **DON'T**: Accept state-changing requests that could originate from simple HTML forms without additional verification.
+- **WHY**: Browsers enforce that cross-origin requests with custom headers trigger a CORS preflight, which fails unless explicitly allowed.
+
+### 5. Separate Read and Write Operations
+- **DO**: Use GET only for read operations. Use POST, PUT, PATCH, DELETE for state-changing operations.
+- **DON'T**: Use GET requests for actions that modify data (e.g., `/api/delete-account?confirm=true`).
+- **WHY**: GET requests can be triggered by `<img>` tags, links, and redirects, making them trivially exploitable for CSRF.
+
+### 6. Implement Double-Submit Cookie Pattern When Stateless
+- **DO**: Set a random value in a cookie and require the same value in a request header or body. Compare both server-side.
+- **DON'T**: Use a predictable or static value for the double-submit token.
+- **WHY**: This pattern works without server-side token storage, suitable for stateless APIs and SPAs.
+
+## Code Examples
+
+### Bad Practice
+```javascript
+// State-changing GET request
+app.get("/api/transfer", authenticate, async (req, res) => {
+  await transferFunds(req.user.id, req.query.to, req.query.amount);
+  res.json({ success: true });
+});
+
+// No CSRF protection on form submission
+app.post("/api/change-email", authenticate, async (req, res) => {
+  await db.updateEmail(req.user.id, req.body.email);
+  res.json({ success: true });
+});
+
+// SameSite not set
+res.cookie("session", token, { httpOnly: true, secure: true }); // Missing SameSite
+```
+
+### Good Practice
+```javascript
+import crypto from "node:crypto";
+
+// CSRF token generation and validation middleware
+function csrfProtection() {
+  return (req, res, next) => {
+    // Generate token for GET requests
+    if (req.method === "GET") {
+      const token = crypto.randomBytes(32).toString("hex");
+      req.session.csrfToken = token;
+      res.locals.csrfToken = token;
+      return next();
+    }
+
+    // Validate token for state-changing requests
+    const token = req.headers["x-csrf-token"] ?? req.body._csrf;
+    if (!token || token !== req.session.csrfToken) {
+      return res.status(403).json({ error: "Invalid CSRF token" });
+    }
+    next();
+  };
+}
+
+// Apply CSRF protection
+app.use(csrfProtection());
+
+// Secure cookie with SameSite
+res.cookie("session", token, {
+  httpOnly: true,
+  secure: true,
+  sameSite: "strict",
+  maxAge: 3600_000,
+  path: "/",
+});
+
+// Origin validation middleware
+function validateOrigin(allowedOrigins) {
+  return (req, res, next) => {
+    if (["GET", "HEAD", "OPTIONS"].includes(req.method)) return next();
+    const origin = req.headers.origin ?? req.headers.referer;
+    if (!origin) {
+      return res.status(403).json({ error: "Missing origin header" });
+    }
+    const requestOrigin = new URL(origin).origin;
+    if (!allowedOrigins.includes(requestOrigin)) {
+      return res.status(403).json({ error: "Invalid origin" });
+    }
+    next();
+  };
+}
+
+app.use(validateOrigin(["https://myapp.example.com"]));
+
+// Frontend: Include CSRF token in requests
+async function securePost(url, data) {
+  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
+  return fetch(url, {
+    method: "POST",
+    credentials: "same-origin",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRF-Token": csrfToken,
+      "X-Requested-With": "fetch",
+    },
+    body: JSON.stringify(data),
+  });
+}
+
+// Double-submit cookie pattern for SPAs
+function doubleSubmitCsrf() {
+  return (req, res, next) => {
+    if (["GET", "HEAD", "OPTIONS"].includes(req.method)) {
+      const token = crypto.randomBytes(32).toString("hex");
+      res.cookie("csrf", token, { sameSite: "strict", secure: true });
+      return next();
+    }
+    const cookieToken = req.cookies.csrf;
+    const headerToken = req.headers["x-csrf-token"];
+    if (!cookieToken || cookieToken !== headerToken) {
+      return res.status(403).json({ error: "CSRF validation failed" });
+    }
+    next();
+  };
+}
+```
+
+## Quick Checklist
+- [ ] CSRF tokens included in all state-changing requests
+- [ ] Session cookies set with `SameSite=Strict` or `SameSite=Lax`
+- [ ] `Origin` / `Referer` headers validated server-side
+- [ ] GET requests never used for state-changing operations
+- [ ] Custom headers required for API requests (`X-Requested-With`)
+- [ ] CSRF tokens are cryptographically random and per-session
+- [ ] Frontend fetch/axios includes CSRF token in headers

package/src/templates/frontend/secure-state.md

@@ -0,0 +1,167 @@
+# Secure State Management and DOM Security Rules
+
+> Frontend Security - Safe State Management and DOM Manipulation
+
+## Rules
+
+### 1. Never Store Sensitive Data in Client-Side State
+- **DO**: Store only non-sensitive UI state in the browser. Keep tokens in `HttpOnly` cookies managed by the server.
+- **DON'T**: Store JWTs, API keys, passwords, or PII in `localStorage`, `sessionStorage`, Redux/Zustand stores, or global variables.
+- **WHY**: All client-side storage is accessible via XSS. A single XSS vulnerability exposes all data in `localStorage` and JavaScript state.
+
+### 2. Sanitize Data Before DOM Insertion
+- **DO**: Use `textContent` for text, framework bindings for dynamic content, and DOMPurify for user-generated HTML.
+- **DON'T**: Use `innerHTML`, `outerHTML`, `document.write()`, or jQuery's `.html()` with any user-influenced data.
+- **WHY**: Unsafe DOM APIs parse strings as HTML, enabling XSS through injected `<script>` tags, event handlers, or malicious attributes.
+
+### 3. Validate postMessage Communication
+- **DO**: Always check `event.origin` against an allowlist. Validate the message schema before processing.
+- **DON'T**: Accept messages from any origin or use `targetOrigin: "*"` when sending sensitive data.
+- **WHY**: Without origin validation, any page can send messages to your application, enabling XSS and data injection attacks.
+
+### 4. Avoid Exposing Sensitive State in URLs
+- **DO**: Use POST requests for sensitive data. Keep tokens and PII out of URL parameters and fragments.
+- **DON'T**: Pass tokens, session IDs, or sensitive data in URL query strings or hash fragments.
+- **WHY**: URLs are logged in browser history, server logs, referrer headers, and analytics tools, leaking sensitive data.
+
+### 5. Implement Immutable State Updates
+- **DO**: Use immutable update patterns (spread operator, `structuredClone()`, Immer). Never mutate state directly.
+- **DON'T**: Modify state objects directly or share mutable references between components.
+- **WHY**: Mutable state causes unpredictable UI updates, race conditions, and can mask security-relevant state changes (e.g., permission levels).
+
+### 6. Secure Third-Party Widget Integration
+- **DO**: Load third-party widgets in sandboxed `<iframe>` elements with minimal `allow` attributes. Use `sandbox` attribute.
+- **DON'T**: Load third-party scripts directly into your page's DOM context.
+- **WHY**: Third-party scripts have full access to the page's DOM, cookies, and state. A compromised widget compromises your entire application.
+
+### 7. Clear Sensitive State on Logout and Navigation
+- **DO**: Clear all sensitive in-memory state, revoke tokens, and invalidate sessions when users log out.
+- **DON'T**: Leave sensitive data in memory or storage after logout or session expiry.
+- **WHY**: Residual state can be accessed by subsequent users on shared devices or by malicious scripts after session expiry.
+
+## Code Examples
+
+### Bad Practice
+```javascript
+// Storing JWT in localStorage
+localStorage.setItem("authToken", response.token);
+
+// Direct DOM manipulation with user data
+document.getElementById("bio").innerHTML = user.bio;
+
+// postMessage without origin check
+window.addEventListener("message", (event) => {
+  updateProfile(event.data); // Accepts from any origin
+});
+
+// Sending sensitive data via postMessage to any origin
+parent.postMessage({ token: authToken }, "*");
+
+// Sensitive data in URL
+window.location.href = `/dashboard?token=${authToken}&ssn=${user.ssn}`;
+
+// Mutating state directly
+state.user.role = "admin"; // Direct mutation
+```
+
+### Good Practice
+```javascript
+// Auth tokens in HttpOnly cookies (set by server, not accessible via JS)
+// Server-side:
+res.cookie("session", sessionToken, {
+  httpOnly: true,
+  secure: true,
+  sameSite: "strict",
+  maxAge: 3600_000,
+});
+
+// Client-side: cookies are sent automatically, no JS storage needed
+async function fetchProfile() {
+  return fetch("/api/profile", { credentials: "same-origin" });
+}
+
+// Safe DOM update
+document.getElementById("bio").textContent = user.bio;
+
+// Secure postMessage with origin validation
+const TRUSTED_ORIGINS = new Set(["https://trusted-widget.example.com"]);
+
+window.addEventListener("message", (event) => {
+  if (!TRUSTED_ORIGINS.has(event.origin)) return;
+  const schema = z.object({ type: z.string(), payload: z.unknown() });
+  const result = schema.safeParse(event.data);
+  if (!result.success) return;
+  handleValidatedMessage(result.data);
+});
+
+// Send with specific target origin
+widgetFrame.contentWindow.postMessage(
+  { type: "theme", value: "dark" },
+  "https://trusted-widget.example.com" // Specific origin, not "*"
+);
+
+// Immutable state updates (React example)
+function userReducer(state, action) {
+  switch (action.type) {
+    case "UPDATE_PROFILE":
+      return { ...state, profile: { ...state.profile, ...action.payload } };
+    case "LOGOUT":
+      return { ...initialState }; // Reset to clean state
+    default:
+      return state;
+  }
+}
+
+// Sandboxed third-party widget
+function ThirdPartyWidget({ src }) {
+  return (
+    <iframe
+      src={src}
+      sandbox="allow-scripts allow-same-origin"
+      referrerPolicy="no-referrer"
+      loading="lazy"
+      style={{ border: "none" }}
+      title="Widget"
+    />
+  );
+}
+
+// Comprehensive logout
+async function secureLogout() {
+  await fetch("/api/logout", { method: "POST", credentials: "same-origin" });
+  // Clear any client-side state
+  sessionStorage.clear();
+  // Reset application state
+  store.dispatch({ type: "RESET" });
+  // Navigate to prevent back-button access
+  window.location.replace("/login");
+}
+
+// Clear sensitive data from memory (for sensitive forms)
+function SecureForm() {
+  const [formData, setFormData] = useState({ cardNumber: "", cvv: "" });
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    try {
+      await submitPayment(formData);
+    } finally {
+      setFormData({ cardNumber: "", cvv: "" }); // Clear immediately after use
+    }
+  }
+
+  return <form onSubmit={handleSubmit}>{/* form fields */}</form>;
+}
+```
+
+## Quick Checklist
+- [ ] No JWTs, API keys, or PII in `localStorage` or `sessionStorage`
+- [ ] Auth tokens stored in `HttpOnly`, `Secure`, `SameSite` cookies
+- [ ] `textContent` used instead of `innerHTML` for user data
+- [ ] `postMessage` handlers validate `event.origin` against allowlist
+- [ ] `postMessage` sends specify exact `targetOrigin` (not `"*"`)
+- [ ] No sensitive data in URL parameters or hash fragments
+- [ ] Immutable state update patterns used consistently
+- [ ] Third-party widgets loaded in sandboxed iframes
+- [ ] All sensitive state cleared on logout
+- [ ] Shared device considerations addressed (no residual state)

package/src/templates/frontend/xss-prevention.md

@@ -0,0 +1,125 @@
+# XSS Prevention Security Rules
+
+> Frontend Security - Cross-Site Scripting (XSS) Defense
+
+## Rules
+
+### 1. Never Use `innerHTML` or `dangerouslySetInnerHTML` with User Input
+- **DO**: Use `textContent` for plain text insertion. Use a trusted sanitization library (DOMPurify) when HTML rendering is absolutely necessary.
+- **DON'T**: Assign user-controlled strings to `innerHTML`, `outerHTML`, or React's `dangerouslySetInnerHTML`.
+- **WHY**: Direct HTML insertion is the primary XSS vector. Any unsanitized markup can execute arbitrary JavaScript in the user's browser.
+
+### 2. Leverage Framework Auto-Escaping
+- **DO**: Use React JSX expressions `{variable}`, Vue template interpolation `{{ variable }}`, or Angular template binding `{{ variable }}` which auto-escape by default.
+- **DON'T**: Bypass framework escaping mechanisms unless absolutely necessary and with sanitized input.
+- **WHY**: Modern frameworks escape output by default, preventing the majority of XSS attacks without extra effort.
+
+### 3. Sanitize Rich Text and Markdown
+- **DO**: Use DOMPurify with a strict allowlist of tags and attributes when rendering user-generated HTML or Markdown.
+- **DON'T**: Trust Markdown-to-HTML conversion output without post-sanitization. Never allow `<script>`, `<iframe>`, event handlers, or `javascript:` URIs.
+- **WHY**: Markdown parsers may produce raw HTML. Even "safe" tags can carry malicious attributes like `onerror` or `onload`.
+
+### 4. Validate and Sanitize URLs
+- **DO**: Validate that user-provided URLs use `https:` or `http:` protocols. Reject `javascript:`, `data:`, and `vbscript:` URIs.
+- **DON'T**: Render user-supplied URLs in `href`, `src`, or `action` attributes without protocol validation.
+- **WHY**: `javascript:` URIs execute code when clicked or loaded, bypassing typical XSS defenses.
+
+### 5. Avoid Dynamic Code Execution
+- **DO**: Use static templates and data binding. Parse JSON with `JSON.parse()`.
+- **DON'T**: Use `eval()`, `Function()`, `setTimeout(string)`, or `setInterval(string)` with any data derived from user input.
+- **WHY**: Dynamic code execution converts data into code, the fundamental cause of injection attacks.
+
+### 6. Escape Data in Non-HTML Contexts
+- **DO**: Apply context-specific encoding when inserting data into JavaScript strings, CSS values, or URL parameters.
+- **DON'T**: Assume HTML escaping is sufficient for all contexts. Each context (JS, CSS, URL) needs its own encoding.
+- **WHY**: HTML-encoded data inserted into a `<script>` block or inline CSS can still execute as code.
+
+### 7. Implement DOM-Based XSS Prevention
+- **DO**: Treat all client-side data sources (URL parameters, `location.hash`, `document.referrer`, `postMessage`) as untrusted. Validate before use.
+- **DON'T**: Read from `window.location`, `document.cookie`, or `localStorage` and insert directly into the DOM.
+- **WHY**: DOM-based XSS occurs entirely in the browser without server involvement, bypassing server-side sanitization.
+
+## Code Examples
+
+### Bad Practice
+```javascript
+// Direct innerHTML with user input
+document.getElementById("output").innerHTML = userComment;
+
+// React dangerouslySetInnerHTML without sanitization
+function Comment({ body }) {
+  return <div dangerouslySetInnerHTML={{ __html: body }} />;
+}
+
+// javascript: URI in href
+function UserLink({ url, label }) {
+  return <a href={url}>{label}</a>; // url could be "javascript:alert(1)"
+}
+
+// DOM-based XSS via URL hash
+const name = decodeURIComponent(window.location.hash.slice(1));
+document.getElementById("greeting").innerHTML = `Hello, ${name}!`;
+
+// eval with user data
+const config = eval(`(${searchParams.get("config")})`);
+```
+
+### Good Practice
+```javascript
+import DOMPurify from "dompurify";
+
+// Safe text insertion
+document.getElementById("output").textContent = userComment;
+
+// React with DOMPurify for rich content
+function Comment({ body }) {
+  const sanitized = DOMPurify.sanitize(body, {
+    ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p", "br", "ul", "ol", "li"],
+    ALLOWED_ATTR: ["href", "title"],
+  });
+  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
+}
+
+// Safe URL validation
+function isValidUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return ["https:", "http:"].includes(parsed.protocol);
+  } catch {
+    return false;
+  }
+}
+
+function UserLink({ url, label }) {
+  const safeUrl = isValidUrl(url) ? url : "#";
+  return <a href={safeUrl} rel="noopener noreferrer">{label}</a>;
+}
+
+// Safe DOM-based rendering
+const name = decodeURIComponent(window.location.hash.slice(1));
+const greeting = document.getElementById("greeting");
+greeting.textContent = `Hello, ${name}!`; // textContent, not innerHTML
+
+// Safe postMessage handling
+window.addEventListener("message", (event) => {
+  if (event.origin !== "https://trusted-domain.com") return; // Origin check
+  const data = typeof event.data === "string" ? JSON.parse(event.data) : event.data;
+  // Validate schema before use
+  if (typeof data.action === "string" && typeof data.value === "string") {
+    handleMessage(data);
+  }
+});
+
+// Safe JSON parsing instead of eval
+const config = JSON.parse(searchParams.get("config") ?? "{}");
+```
+
+## Quick Checklist
+- [ ] No `innerHTML` or `dangerouslySetInnerHTML` with unsanitized user input
+- [ ] DOMPurify used for any user-generated HTML/Markdown rendering
+- [ ] Framework auto-escaping relied upon for standard output
+- [ ] User-provided URLs validated for safe protocols (`https:`, `http:`)
+- [ ] No `eval()`, `Function()`, or `setTimeout(string)` with user data
+- [ ] `postMessage` handlers validate `event.origin`
+- [ ] URL parameters, hash, and referrer treated as untrusted input
+- [ ] Context-specific encoding applied (HTML, JS, CSS, URL contexts)