@schalkneethling/calavera-skill-frontend-security 0.2.0-next.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Schalk Neethling
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/calavera-artifact.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://calavera.schalkneethling.com/schemas/calavera-artifact.schema.json",
+  "schemaVersion": 1,
+  "id": "skill-frontend-security",
+  "type": "skill",
+  "displayName": "Frontend security",
+  "payload": "payload/frontend-security",
+  "compatibility": {
+    "calavera": ">=2.2.0 <3"
+  }
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@schalkneethling/calavera-skill-frontend-security",
+  "version": "0.2.0-next.2",
+  "description": "Frontend security artifact for Calavera.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/schalkneethling/create-project-calavera.git",
+    "directory": "packages/artifacts/skill-frontend-security"
+  },
+  "files": [
+    "calavera-artifact.json",
+    "payload"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./calavera-artifact.json",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}

package/payload/frontend-security/SKILL.md

@@ -0,0 +1,57 @@
+---
+name: frontend-security
+description: Audit frontend codebases for security vulnerabilities and bad practices. Use when performing security reviews, auditing code for XSS/CSRF/DOM vulnerabilities, checking Content Security Policy configurations, validating input handling, reviewing file upload security, or examining Node.js/NPM dependencies. Target frameworks include web platform (vanilla HTML/CSS/JS), React, Astro, Twig templates, Node.js, and Bun. Based on OWASP security guidelines.
+---
+
+# Frontend Security Audit Skill
+
+Audit frontend-adjacent code by mapping trust boundaries, tracing untrusted data into dangerous
+sinks, and using searches as supporting evidence. Cover browser/frontend concerns first, then route
+related server, package, authentication, and upload findings to the relevant reference.
+
+## Workflow
+
+1. Map routes, rendering models, APIs, authentication/session boundaries, third-party scripts,
+   uploads, package-manager entry points, and deployment assumptions.
+2. List untrusted sources such as URL parameters, forms, storage, `postMessage`, responses, files,
+   cookies, headers, and package metadata. Trace them to DOM, navigation, command, filesystem,
+   database, network, and log sinks.
+3. Load `references/audit-workflow.md` for focused evidence searches. Treat matches as leads, not
+   proof; use AST-aware tooling where syntax or multiline structure matters.
+4. Review output encoding, sanitization, CSP, CSRF, token storage, input validation, uploads,
+   dependencies, and framework escape hatches.
+5. Rate the confirmed finding from exploitability, impact, reachability, required privileges, user
+   interaction, data sensitivity, and compensating controls.
+6. Report the affected trust boundary, evidence, exploit scenario, severity rationale, remediation,
+   and authoritative reference using the template in `references/audit-workflow.md`.
+
+## Reference Routing
+
+| Finding area                                               | Load                                 |
+| ---------------------------------------------------------- | ------------------------------------ |
+| Browser XSS, unsafe URLs, tabnabbing, HTML injection       | `references/xss-prevention.md`       |
+| DOM sinks, clobbering, postMessage, client storage         | `references/dom-security.md`         |
+| CSP headers, nonces, hashes, Trusted Types                 | `references/csp-configuration.md`    |
+| Cookie auth, forms, state-changing requests                | `references/csrf-protection.md`      |
+| URL, number, date, schema, and path validation             | `references/input-validation.md`     |
+| React, Astro, Twig, SSR, hydration, templates              | `references/framework-patterns.md`   |
+| Uploads, downloads, archives, quarantine                   | `references/file-upload-security.md` |
+| JWT lifecycle, storage, fingerprints, refresh flows        | `references/jwt-security.md`         |
+| Node runtime, npm supply chain, scripts, command execution | `references/nodejs-npm-security.md`  |
+
+Name boundaries precisely, for example “browser-to-API CSRF,” “frontend-triggered upload
+processing,” or “package-script supply-chain risk.” State scope limits: route deep backend
+authorization, database, infrastructure, malware, and incident-response work to specialists.
+
+## Severity
+
+- **Critical**: likely high-impact exploit such as unauthenticated account takeover, privileged
+  stored XSS, production credential exposure, or reachable remote code execution.
+- **High**: plausible exploit with meaningful user, data, integrity, or supply-chain impact.
+- **Medium**: real weakness with limited reach, prerequisites, lower sensitivity, or meaningful
+  compensating controls.
+- **Low**: hard-to-exploit or defense-in-depth gap, deprecated pattern, or hygiene issue.
+
+Always record why the project-specific evidence supports the chosen severity. Consider attacker
+capability, interaction, privileges, production reachability, persistence, blast radius, and
+existing controls. Do not assign severity from a search result alone.

package/payload/frontend-security/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Frontend Security"
+  short_description: "Audit browser code for security vulnerabilities."
+  default_prompt: "Use $frontend-security to audit this frontend code for security risks."

package/payload/frontend-security/references/audit-workflow.md

@@ -0,0 +1,57 @@
+# Security Audit Evidence and Reporting
+
+## Evidence Searches
+
+Start broad, then narrow to the project's languages and trust boundaries. Prefer AST-aware tools or
+Semgrep when syntax or multiline structure matters.
+
+```bash
+FRONTEND_GLOBS='*.{js,jsx,ts,tsx,mjs,cjs,mts,cts,astro,vue,svelte,html,htm,twig,njk,ejs,hbs,mdx}'
+rg -n "dangerouslySetInnerHTML|innerHTML|outerHTML|insertAdjacentHTML|document\\.write|DOMParser" --glob "$FRONTEND_GLOBS"
+rg -n "location\\.(href|assign|replace)|window\\.open|javascript:|data:text/html" --glob "$FRONTEND_GLOBS"
+rg -n "\\beval\\s*\\(|new Function\\s*\\(|set(?:Timeout|Interval)\\s*\\(\\s*['\"]" --glob "$FRONTEND_GLOBS"
+rg -n "<form|method=[\"']post|fetch\\(|axios\\.|Authorization|Bearer|refresh[_-]?token|jwt" --glob "$FRONTEND_GLOBS"
+rg -n "localStorage|sessionStorage|indexedDB|document\\.cookie" --glob "$FRONTEND_GLOBS"
+rg -n -i "api[_-]?key|client[_-]?secret|password|private[_-]?key" --glob "$FRONTEND_GLOBS" --glob "*.env*"
+rg -n "multer|busboy|formidable|Content-Disposition|extractAllTo|adm-zip|yauzl" --glob "$FRONTEND_GLOBS" --glob "package.json"
+rg -n '"(preinstall|install|postinstall|prepare)"|child_process|exec\\(|execFile\\(|spawn\\(' --glob "package.json" --glob "*.{js,ts,mjs,cjs,mts,cts,sh,yml,yaml,toml,json}"
+```
+
+Follow representative matches from an untrusted source to a sensitive sink before reporting them.
+
+## Report Template
+
+```markdown
+## Security Audit Report
+
+### Summary
+
+- Critical: X
+- High: X
+- Medium: X
+- Low: X
+
+#### [SEVERITY-001] Finding title
+
+- **Location**: file:line
+- **Trust boundary**: source to sink
+- **Evidence**: confirmed code path
+- **Exploit scenario**: attacker capability and path
+- **Risk**: concrete impact
+- **Severity rationale**: exploitability, reachability, impact, and controls
+- **Remediation**: focused fix
+- **Reference**: authoritative guidance
+```
+
+## References
+
+- [XSS Prevention](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
+- [DOM XSS Prevention](https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html)
+- [CSRF Prevention](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)
+- [Content Security Policy](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html)
+- [Input Validation](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html)
+- [DOM Clobbering Prevention](https://cheatsheetseries.owasp.org/cheatsheets/DOM_Clobbering_Prevention_Cheat_Sheet.html)
+- [Node.js Security](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html)
+- [File Upload](https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html)
+- [Error Handling](https://cheatsheetseries.owasp.org/cheatsheets/Error_Handling_Cheat_Sheet.html)
+- [JWT Security](https://cheatsheetseries.owasp.org/cheatsheets/JSON_Web_Token_for_Java_Cheat_Sheet.html)

package/payload/frontend-security/references/csp-configuration.md

@@ -0,0 +1,262 @@
+# Content Security Policy Reference
+
+## Strict CSP Configuration
+
+### Nonce-Based (Recommended)
+
+```http
+Content-Security-Policy:
+  default-src 'self';
+  script-src 'nonce-{per_request_nonce}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+  form-action 'self';
+  frame-ancestors 'none';
+```
+
+Implementation:
+
+```javascript
+// Generate unique nonce per request
+const crypto = require("crypto");
+const nonce = crypto.randomBytes(16).toString("base64");
+
+// Set header
+res.setHeader(
+  "Content-Security-Policy",
+  [
+    "default-src 'self'",
+    `script-src 'nonce-${nonce}' 'strict-dynamic'`,
+    "object-src 'none'",
+    "base-uri 'none'",
+    "form-action 'self'",
+    "frame-ancestors 'none'",
+  ].join("; "),
+);
+
+// Include nonce in script tags
+res.send(`<script nonce="${nonce}">/* safe code */</script>`);
+```
+
+### Hash-Based (For Static Scripts)
+
+```http
+Content-Security-Policy:
+  default-src 'self';
+  script-src 'sha256-{hash}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+  form-action 'self';
+  frame-ancestors 'none';
+```
+
+Generate hash:
+
+```bash
+echo -n 'console.log("hello");' | openssl sha256 -binary | openssl base64
+```
+
+## Essential Directives
+
+| Directive         | Purpose                       | Recommended Value                              |
+| ----------------- | ----------------------------- | ---------------------------------------------- |
+| `default-src`     | Fallback for other directives | `'self'`                                       |
+| `script-src`      | JavaScript sources            | `'nonce-{per_request_nonce}' 'strict-dynamic'` |
+| `style-src`       | CSS sources                   | `'self'` or nonce/hash-based styles            |
+| `img-src`         | Image sources                 | `'self' data: https:`                          |
+| `font-src`        | Font sources                  | `'self'`                                       |
+| `connect-src`     | AJAX/WebSocket/Fetch          | `'self' https://api.example.com`               |
+| `frame-src`       | iframe sources                | `'none'` or specific origins                   |
+| `object-src`      | Plugin content                | `'none'`                                       |
+| `base-uri`        | Base URL restrictions         | `'none'`                                       |
+| `form-action`     | Form submission targets       | `'self'`                                       |
+| `frame-ancestors` | Who can embed page            | `'self'` or `'none'`                           |
+
+## Framework Integration
+
+### Express.js
+
+```javascript
+const crypto = require("crypto");
+const helmet = require("helmet");
+
+// Nonce middleware
+app.use((req, res, next) => {
+  res.locals.nonce = crypto.randomBytes(16).toString("base64");
+  next();
+});
+
+app.use(
+  helmet.contentSecurityPolicy({
+    directives: {
+      defaultSrc: ["'self'"],
+      scriptSrc: [(req, res) => `'nonce-${res.locals.nonce}'`, "'strict-dynamic'"],
+      styleSrc: ["'self'", (req, res) => `'nonce-${res.locals.nonce}'`],
+      imgSrc: ["'self'", "data:", "https:"],
+      objectSrc: ["'none'"],
+      baseUri: ["'none'"],
+      formAction: ["'self'"],
+      frameAncestors: ["'self'"],
+    },
+  }),
+);
+```
+
+### Astro
+
+```javascript
+// astro.config.mjs
+import { defineConfig } from "astro/config";
+
+// Development-only fallback. Prefer production headers from your hosting edge,
+// adapter middleware, or server response so each request can receive a fresh
+// nonce and avoid unsafe-inline.
+export default defineConfig({
+  vite: {
+    plugins: [
+      {
+        name: "dev-csp-plugin",
+        apply: "serve",
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            res.setHeader(
+              "Content-Security-Policy",
+              "default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'none'; form-action 'self'; frame-ancestors 'none';",
+            );
+            next();
+          });
+        },
+      },
+    ],
+  },
+});
+```
+
+### Meta Tag (Fallback)
+
+```html
+<meta
+  http-equiv="Content-Security-Policy"
+  content="default-src 'self'; script-src 'self' 'sha256-<base64-script-hash>'; object-src 'none'; base-uri 'none';"
+/>
+```
+
+**Note**: Meta tag CSP cannot set `frame-ancestors`, `report-uri`, or `sandbox`.
+Use hashes for static fallback pages. Use a response header when you need a
+per-request nonce.
+
+## Report-Only Mode
+
+Test policies without enforcement:
+
+```http
+Content-Security-Policy-Report-Only:
+  default-src 'self';
+  script-src 'nonce-{per_request_nonce}' 'strict-dynamic';
+  object-src 'none';
+  base-uri 'none';
+  form-action 'self';
+  frame-ancestors 'none';
+  report-uri /csp-report;
+```
+
+Report endpoint (apply a rate limiter before parsing and logging public reports):
+
+```javascript
+function sanitizeReportUrl(value) {
+  if (typeof value !== "string") return undefined;
+  try {
+    const url = new URL(value);
+    url.search = "";
+    url.hash = "";
+    return url.href.slice(0, 512);
+  } catch {
+    return value.slice(0, 128);
+  }
+}
+
+app.post(
+  "/csp-report",
+  cspReportLimiter,
+  express.json({ type: "application/csp-report", limit: "16kb" }),
+  (req, res) => {
+    const report = req.body?.["csp-report"];
+    if (!report || typeof report !== "object" || Array.isArray(report)) {
+      return res.status(204).end();
+    }
+    const directive = report["violated-directive"];
+    console.warn("CSP Violation:", {
+      blockedUri: sanitizeReportUrl(report["blocked-uri"]),
+      violatedDirective: typeof directive === "string" ? directive.slice(0, 128) : undefined,
+      documentUri: sanitizeReportUrl(report["document-uri"]),
+    });
+    res.status(204).end();
+  },
+);
+```
+
+## Common Violations and Fixes
+
+### Inline Scripts
+
+```html
+<!-- Violation: inline script -->
+<script>
+  alert("hello");
+</script>
+
+<!-- Fix: add a fresh per-response nonce generated by the server -->
+<script nonce="{per_request_nonce}">
+  alert("hello");
+</script>
+
+<!-- Or: move to external file -->
+<script src="/js/app.js"></script>
+```
+
+### Inline Event Handlers
+
+```html
+<!-- Violation: inline event handler -->
+<button onclick="handleClick()">Click</button>
+
+<!-- Fix: use addEventListener -->
+<button id="myBtn">Click</button>
+<script nonce="{per_request_nonce}">
+  document.getElementById("myBtn").addEventListener("click", handleClick);
+</script>
+```
+
+### Inline Styles
+
+```html
+<!-- Violation: style attribute -->
+<div style="color: red;">Text</div>
+
+<!-- Fix: use classes -->
+<div class="text-red">Text</div>
+
+<!-- Or: add a fresh per-response nonce to style tags -->
+<style nonce="{per_request_nonce}">
+  .text-red {
+    color: red;
+  }
+</style>
+```
+
+Never copy a literal nonce value. A nonce must be unpredictable and unique for
+each response that contains nonce-authorized inline script or style.
+
+## Security Headers Companion
+
+Deploy CSP with these additional headers:
+
+```http
+X-Content-Type-Options: nosniff
+X-Frame-Options: DENY
+X-XSS-Protection: 0
+Referrer-Policy: strict-origin-when-cross-origin
+Permissions-Policy: geolocation=(), microphone=(), camera=()
+```
+
+OWASP Reference: https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html