# Frontend Security

> Browser-side hardening: XSS, CSP, CORS, SRI, DOM clobbering, iframe sandboxing, Trusted Types — Applies to: when generating HTML / JSX / Vue / Svelte templates; when wiring up response headers in a web app; when adding third-party script tags or CDN resources

- **Type:** Skill
- **Install:** `agentstack add skill-shieldnet-360-secure-vibe-frontend-security`
- **Verified:** Pending review
- **Seller:** [ShieldNet-360](https://agentstack.voostack.com/s/shieldnet-360)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ShieldNet-360](https://github.com/ShieldNet-360)
- **Source:** https://github.com/ShieldNet-360/secure-vibe/tree/main/dist/claude-skills/.claude/skills/frontend-security

## Install

```sh
agentstack add skill-shieldnet-360-secure-vibe-frontend-security
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Frontend Security

Browser-side hardening: XSS, CSP, CORS, SRI, DOM clobbering, iframe sandboxing, Trusted Types

## ALWAYS

- Treat all user/URL/storage data as untrusted. Render via framework escaping (`{}` in JSX/Vue/Svelte, `{{ }}` in templating). For raw HTML use a vetted sanitizer (DOMPurify) with a strict allowlist.
- Send a strict `Content-Security-Policy` header. Minimum production baseline: `default-src 'self'; script-src 'self' 'nonce-'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests`. Use nonces or hashes — never `'unsafe-inline'` for `script-src`.
- Set `Strict-Transport-Security: max-age=63072000; includeSubDomains; preload`, `X-Content-Type-Options: nosniff`, `Referrer-Policy: no-referrer-when-downgrade` or stricter, and `Permissions-Policy` to drop unused features.
- Add `integrity="sha384-..." crossorigin="anonymous"` to every `` and `` loaded from a CDN.
- Add `sandbox="allow-scripts allow-same-origin"` (only the attributes you need) to every ``. Default to no allow flags.
- Use cookies with `Secure; HttpOnly; SameSite=Lax` (or `Strict` for sensitive flows). `__Host-` prefix when there's no subdomain sharing.
- Enable Trusted Types where browser support allows (`Content-Security-Policy: require-trusted-types-for 'script'`) so DOM-sink assignments (`innerHTML`, `setAttribute('src', ...)` for scripts) must be routed through a typed policy.

## NEVER

- Use `dangerouslySetInnerHTML`, `v-html`, `{@html ...}`, `innerHTML =`, or `document.write` with untrusted input.
- Use `eval`, `new Function`, `setTimeout(string)`, `setInterval(string)`, or `Function('return x')`.
- Inject user input into `href`, `src`, `formaction`, `action`, or any URL-bearing attribute without scheme validation (block `javascript:`, `data:`, `vbscript:`).
- Use `target="_blank"` without `rel="noopener noreferrer"` — leaks `window.opener`.
- Trust DOM nodes by id alone. DOM clobbering: an attacker-controlled `` shadows `window.config`.
- Use `postMessage` without checking `event.origin` against an allowlist.
- Store JWTs, refresh tokens, or PII in `localStorage` / `sessionStorage` — any XSS exfiltrates them. Prefer HttpOnly cookies.
- Read or write `document.cookie` from JavaScript for auth cookies — they should be HttpOnly anyway.
- Treat **tightening the HTML sanitizer** as the fix when the exploit rides on content the sanitizer **allows by design** — a valid ``, an ``, or a permitted attribute. The sanitizer is working; the vulnerable behaviour is **downstream** (in-app navigation, a shell / `openExternal` sink, an over-privileged renderer or IPC bridge, a URL sink). Fix the sink / context, not the markup allowlist.

## KNOWN FALSE POSITIVES

- Internal admin tools deliberately rendering Markdown / rich text from trusted authors may use `dangerouslySetInnerHTML` after a sanitizer pass; document the sanitizer call inline.
- Browser extensions sometimes need `'unsafe-eval'` in the extension CSP; user-facing web app CSP should still forbid it.
- WebSocket connections to non-same-origin endpoints are fine when the server performs origin validation.
- A native / WASM **codec, decoder, or loader that is merely registered or referenced** (`setDRACOLoader(...)`, a plugin registration, a lazy import) is **not an active attack surface** unless its binary / asset is actually shipped and the module initialized at runtime. Verify asset-present + module-init + reachable input format before flagging — wiring alone is a false positive (inputs needing the missing decoder simply fail to load).

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ShieldNet-360](https://github.com/ShieldNet-360)
- **Source:** [ShieldNet-360/secure-vibe](https://github.com/ShieldNet-360/secure-vibe)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** yes

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: flagged — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-shieldnet-360-secure-vibe-frontend-security
- Seller: https://agentstack.voostack.com/s/shieldnet-360
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.