@schalkneethling/toolkit 0.1.5 → 0.3.0

package/skills/frontend-security/references/framework-patterns.md

@@ -0,0 +1,307 @@
+# Framework-Specific Security Patterns
+
+## React Security
+
+### XSS Prevention
+
+```jsx
+// DEFAULT SAFE - React escapes by default
+<div>{userInput}</div>
+
+// DANGEROUS - bypasses escaping
+<div dangerouslySetInnerHTML={{ __html: userInput }} />
+
+// If HTML is required, sanitize first
+import DOMPurify from 'dompurify';
+<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />
+```
+
+### URL Handling
+
+```jsx
+// DANGEROUS - javascript: URLs in href
+<a href={userInput}>Link</a>
+
+// SAFE - validate URL protocol
+function SafeLink({ href, children }) {
+  const safeHref = useMemo(() => {
+    try {
+      const url = new URL(href, window.location.origin);
+      if (['http:', 'https:', 'mailto:'].includes(url.protocol)) {
+        return href;
+      }
+    } catch {}
+    return '#';
+  }, [href]);
+
+  return <a href={safeHref}>{children}</a>;
+}
+```
+
+### State and Props
+
+```jsx
+// DANGEROUS - spreading user-controlled props
+<Component {...userControlledObject} />
+
+// SAFE - explicitly pass allowed props
+<Component
+  title={userControlledObject.title}
+  description={userControlledObject.description}
+/>
+```
+
+### Server-Side Rendering (SSR)
+
+```jsx
+// DANGEROUS - injecting user data into SSR without escaping
+<script>
+  window.__INITIAL_STATE__ = {JSON.stringify(userControlledData)}
+</script>
+
+// SAFE - serialize with escaping
+import serialize from 'serialize-javascript';
+<script
+  dangerouslySetInnerHTML={{
+    __html: `window.__INITIAL_STATE__ = ${serialize(data, { isJSON: true })}`
+  }}
+/>
+```
+
+## Astro Security
+
+### Content Escaping
+
+```astro
+---
+const userInput = Astro.props.userInput;
+---
+
+<!-- SAFE - auto-escaped -->
+<div>{userInput}</div>
+
+<!-- DANGEROUS - bypasses escaping -->
+<div set:html={userInput} />
+
+<!-- If HTML required, sanitize -->
+---
+import DOMPurify from 'dompurify';
+const sanitized = DOMPurify.sanitize(userInput);
+---
+<div set:html={sanitized} />
+```
+
+### Dynamic Imports
+
+```astro
+---
+// DANGEROUS - user-controlled import path
+const component = await import(userInput);
+
+// SAFE - allowlist approach
+const allowedComponents = {
+  'card': () => import('./Card.astro'),
+  'button': () => import('./Button.astro')
+};
+
+const loadComponent = allowedComponents[userInput];
+if (!loadComponent) throw new Error('Invalid component');
+const Component = await loadComponent();
+---
+```
+
+### API Endpoints
+
+```javascript
+// src/pages/api/data.js
+export async function POST({ request }) {
+  // Validate Content-Type
+  const contentType = request.headers.get('content-type');
+  if (!contentType?.includes('application/json')) {
+    return new Response('Invalid content type', { status: 415 });
+  }
+
+  // Validate and sanitize input
+  const body = await request.json();
+  if (!validateInput(body)) {
+    return new Response('Invalid input', { status: 400 });
+  }
+
+  // Process request
+  return new Response(JSON.stringify(result), {
+    headers: { 'Content-Type': 'application/json' }
+  });
+}
+```
+
+## Twig Security
+
+### Output Escaping
+
+```twig
+{# SAFE - auto-escaped for HTML context #}
+{{ userInput }}
+
+{# DANGEROUS - raw bypasses escaping #}
+{{ userInput|raw }}
+
+{# DANGEROUS - autoescape disabled #}
+{% autoescape false %}
+  {{ userInput }}
+{% endautoescape %}
+
+{# Context-specific escaping #}
+{{ userInput|e('html') }}
+{{ userInput|e('js') }}
+{{ userInput|e('css') }}
+{{ userInput|e('url') }}
+{{ userInput|e('html_attr') }}
+```
+
+### Template Inclusion
+
+```twig
+{# DANGEROUS - user-controlled template path #}
+{% include userInput %}
+
+{# SAFE - use allowlist #}
+{% if templateName in ['header', 'footer', 'sidebar'] %}
+  {% include templateName ~ '.html.twig' %}
+{% endif %}
+```
+
+### Sandbox Mode (Symfony)
+
+```yaml
+# config/packages/twig.yaml
+twig:
+  sandbox:
+    policy:
+      tags: ['if', 'for', 'set']
+      filters: ['escape', 'upper', 'lower']
+      methods:
+        Symfony\Component\Routing\Generator\UrlGeneratorInterface: ['generate']
+      properties: []
+      functions: ['path', 'url']
+```
+
+### CSRF in Forms
+
+```twig
+{# Symfony CSRF protection #}
+<form method="post">
+  <input type="hidden" name="_csrf_token" value="{{ csrf_token('form_name') }}">
+  {# form fields #}
+</form>
+```
+
+## Bun Security
+
+### Request Handling
+
+```javascript
+// Bun HTTP server
+Bun.serve({
+  port: 3000,
+  fetch(req) {
+    const url = new URL(req.url);
+
+    // Validate origin for CORS
+    const origin = req.headers.get('origin');
+    if (origin && !isAllowedOrigin(origin)) {
+      return new Response('Forbidden', { status: 403 });
+    }
+
+    // Rate limiting
+    if (isRateLimited(req)) {
+      return new Response('Too Many Requests', { status: 429 });
+    }
+
+    return handleRequest(req);
+  }
+});
+```
+
+### File Handling
+
+```javascript
+// Validate file paths
+function safeReadFile(userPath) {
+  const baseDir = '/app/public';
+  const resolved = Bun.resolveSync(userPath, baseDir);
+
+  if (!resolved.startsWith(baseDir)) {
+    throw new Error('Path traversal detected');
+  }
+
+  return Bun.file(resolved).text();
+}
+```
+
+## HTML5 APIs Security
+
+### Web Storage
+
+```javascript
+// NEVER store sensitive data in localStorage
+localStorage.setItem('token', jwt);  // DANGEROUS
+
+// Use httpOnly cookies for tokens instead
+// Or store in memory with short expiration
+
+// If localStorage is necessary, encrypt
+import { encrypt, decrypt } from './crypto';
+localStorage.setItem('data', encrypt(sensitiveData, key));
+```
+
+### postMessage
+
+```javascript
+// Always validate origin and data
+window.addEventListener('message', (event) => {
+  // Validate origin
+  const allowedOrigins = ['https://trusted.com'];
+  if (!allowedOrigins.includes(event.origin)) return;
+
+  // Validate data structure
+  if (typeof event.data !== 'object') return;
+  if (!['action1', 'action2'].includes(event.data.type)) return;
+
+  handleMessage(event.data);
+});
+
+// Always specify target origin when sending
+iframe.contentWindow.postMessage(data, 'https://specific-origin.com');
+// NEVER use '*' for sensitive data
+```
+
+### WebSockets
+
+```javascript
+// Validate WebSocket origin
+const wss = new WebSocket.Server({
+  server,
+  verifyClient: ({ origin, req }, callback) => {
+    const allowed = ['https://myapp.com'];
+    callback(allowed.includes(origin));
+  }
+});
+
+// Validate messages
+wss.on('connection', (ws) => {
+  ws.on('message', (data) => {
+    try {
+      const msg = JSON.parse(data);
+      if (!isValidMessage(msg)) {
+        ws.close(1008, 'Invalid message');
+        return;
+      }
+      handleMessage(msg);
+    } catch {
+      ws.close(1008, 'Invalid JSON');
+    }
+  });
+});
+```
+
+OWASP Reference: https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html

package/skills/frontend-security/references/input-validation.md

@@ -0,0 +1,232 @@
+# Input Validation Reference
+
+## Validation Strategy
+
+**Always validate on the server.** Client-side validation improves UX but provides no security.
+
+### Allowlist vs Denylist
+
+```javascript
+// PREFERRED: Allowlist (accept known good)
+function validateUsername(input) {
+  const allowedPattern = /^[a-zA-Z0-9_]{3,20}$/;
+  return allowedPattern.test(input);
+}
+
+// AVOID: Denylist (block known bad)
+function validateInput(input) {
+  const blocked = ['<script>', 'javascript:', 'onerror'];
+  return !blocked.some(bad => input.includes(bad)); // Easily bypassed
+}
+```
+
+## Common Validation Patterns
+
+### Email
+
+```javascript
+// Basic validation (server should still verify)
+function validateEmail(email) {
+  // Simple pattern - not comprehensive but catches most issues
+  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return pattern.test(email) && email.length <= 254;
+}
+
+// Use built-in browser validation
+const input = document.createElement('input');
+input.type = 'email';
+input.value = email;
+return input.checkValidity();
+```
+
+### URL
+
+```javascript
+function validateUrl(input) {
+  try {
+    const url = new URL(input);
+    return ['http:', 'https:'].includes(url.protocol);
+  } catch {
+    return false;
+  }
+}
+
+// For user-facing URLs, also check for malicious patterns
+function validateSafeUrl(input) {
+  const url = validateUrl(input);
+  if (!url) return false;
+
+  // Block data: and javascript: schemes
+  const dangerous = ['javascript:', 'data:', 'vbscript:'];
+  return !dangerous.some(scheme => input.toLowerCase().startsWith(scheme));
+}
+```
+
+### Numbers
+
+```javascript
+function validateInteger(input, min, max) {
+  const num = parseInt(input, 10);
+  if (isNaN(num)) return false;
+  if (num.toString() !== input.toString()) return false; // Reject "123abc"
+  return num >= min && num <= max;
+}
+
+function validateDecimal(input, min, max, decimals) {
+  const num = parseFloat(input);
+  if (isNaN(num)) return false;
+  if (num < min || num > max) return false;
+
+  const parts = input.split('.');
+  if (parts.length > 2) return false;
+  if (parts[1] && parts[1].length > decimals) return false;
+
+  return true;
+}
+```
+
+### Date
+
+```javascript
+function validateDate(input) {
+  const date = new Date(input);
+  return date instanceof Date && !isNaN(date);
+}
+
+function validateDateRange(input, minDate, maxDate) {
+  const date = new Date(input);
+  if (isNaN(date)) return false;
+  return date >= minDate && date <= maxDate;
+}
+```
+
+### Phone Numbers
+
+```javascript
+// International format
+function validatePhone(input) {
+  // E.164 format: +[country][number], max 15 digits
+  const pattern = /^\+[1-9]\d{1,14}$/;
+  return pattern.test(input.replace(/[\s\-()]/g, ''));
+}
+```
+
+## Sanitization Functions
+
+### HTML Entities
+
+```javascript
+function escapeHtml(input) {
+  const map = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#x27;',
+    '/': '&#x2F;'
+  };
+  return String(input).replace(/[&<>"'/]/g, char => map[char]);
+}
+```
+
+### SQL (Use Parameterized Queries Instead)
+
+```javascript
+// WRONG - never build SQL strings
+const query = `SELECT * FROM users WHERE name = '${userInput}'`;
+
+// RIGHT - use parameterized queries
+const query = 'SELECT * FROM users WHERE name = ?';
+db.query(query, [userInput]);
+```
+
+### Path Traversal Prevention
+
+```javascript
+const path = require('path');
+
+function validateFilePath(userPath, baseDir) {
+  const baseCanonical = path.resolve(baseDir);
+  const resolved = path.resolve(baseDir, userPath);
+  const relativePath = path.relative(baseCanonical, resolved);
+
+  // Ensure resolved path stays inside the base directory
+  if (relativePath.startsWith('..') || path.isAbsolute(relativePath)) {
+    throw new Error('Path traversal detected');
+  }
+
+  return resolved;
+}
+```
+
+## Framework Validation
+
+### Node.js with Joi
+
+```javascript
+const Joi = require('joi');
+
+const userSchema = Joi.object({
+  username: Joi.string().alphanum().min(3).max(30).required(),
+  email: Joi.string().email().required(),
+  age: Joi.number().integer().min(0).max(150),
+  website: Joi.string().uri({ scheme: ['http', 'https'] })
+});
+
+function validateUser(data) {
+  const { error, value } = userSchema.validate(data);
+  if (error) throw new Error(error.details[0].message);
+  return value;
+}
+```
+
+### Express Validator
+
+```javascript
+const { body, validationResult } = require('express-validator');
+
+app.post('/user',
+  body('email').isEmail().normalizeEmail(),
+  body('password').isLength({ min: 8 }),
+  body('age').isInt({ min: 0, max: 150 }),
+  (req, res) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+    // Process valid input
+  }
+);
+```
+
+### Zod (TypeScript)
+
+```typescript
+import { z } from 'zod';
+
+const UserSchema = z.object({
+  username: z.string().min(3).max(30).regex(/^[a-zA-Z0-9_]+$/),
+  email: z.string().email(),
+  age: z.number().int().min(0).max(150).optional(),
+  website: z.string().url().optional()
+});
+
+type User = z.infer<typeof UserSchema>;
+
+function validateUser(data: unknown): User {
+  return UserSchema.parse(data);
+}
+```
+
+## Validation Checklist
+
+- [ ] Validate all input on the server
+- [ ] Use allowlist validation when possible
+- [ ] Validate data type, length, format, and range
+- [ ] Reject unexpected input rather than sanitizing
+- [ ] Use parameterized queries for database operations
+- [ ] Validate file uploads (type, size, content)
+- [ ] Canonicalize paths before validation
+- [ ] Log validation failures for monitoring
+
+OWASP Reference: https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html