# frontend-security-coder

Субагент для безопасного клиентского кода: гасит XSS, настраивает CSP и проверяет работу с DOM. Пригодится, когда пишете или ревьюите фронтенд.

- субагент · `type=agent` · Claude Code, Codex, Cursor · ★ 41729
- Автор: Seth Hobson
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/wshobson/agents/tree/HEAD/plugins/frontend-mobile-security/agents/frontend-security-coder.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/agents/frontend-security-coder

## Что делает

Субагент разбирается в клиентской безопасности: предотвращение XSS, безопасная работа с DOM, Content Security Policy, защита от кликджекинга и открытых редиректов. Он пишет код, а не только аудитит: подсказывает, где `textContent` вместо `innerHTML`, как подключить DOMPurify, как собрать строгую CSP с nonce.

Внутри — набор тем: санитизация пользовательского контента, контекстное кодирование, безопасные редиректы, хранение токенов, SRI и Trusted Types. Модель — `sonnet`. Автор прямо разводит роли: этот агент для правок в коде, а для аудита и threat modeling есть отдельный `security-auditor`.

Защиту от кликджекинга агент советует включать только в продакшене или в standalone-приложении, а в разработке, когда страница живёт в iframe, ослаблять или отключать — иначе предпросмотр ломается. Установка в Claude идёт через маркетплейс, файл агента ложится в `.claude/agents/frontend-security-coder.md`.

## Установка

### Claude Code (родная платформа)

1. **Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add wshobson/agents
```
В чате агента (не в терминале):
```text
/plugin install frontend-mobile-security@claude-code-workflows
```

2. **Вручную: положить файлы**
- Файл: `.claude/agents/frontend-security-coder.md` — Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию

### Codex

**Вручную: положить файлы**
- Файл: `.codex/agents/frontend-security-coder.toml` — Codex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/agents/frontend-security-coder.md` — Cursor понимает и .claude/agents/

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/wshobson/agents/tree/HEAD/plugins/frontend-mobile-security/agents/frontend-security-coder.md

## Когда брать
- убрать XSS в местах, где в DOM вставляется пользовательский HTML
- настроить CSP с nonce и вынести инлайновые скрипты
- проверить санитизацию markdown и rich-text редактора
- закрыть открытые редиректы и утечку через referrer
- разобрать хранение JWT и таймаут сессии

## Примеры запросов агенту
- проверь этот компонент на XSS и предложи безопасную замену innerHTML
- настрой CSP с nonce для нашего приложения и убери unsafe-inline
- сделай ревью кода формы загрузки файлов на клиентские уязвимости

## Похожие
- [csp-bypass-advanced](https://affpapa.org/nevibecode/skills/csp-bypass-advanced.md) — скилл · 3600 установок
- [xss-cross-site-scripting](https://affpapa.org/nevibecode/skills/xss-cross-site-scripting.md) — скилл · 3900 установок
- [security](https://affpapa.org/nevibecode/skills/security.md) — скилл · 1900 установок
- [Next.js Security Scan](https://affpapa.org/nevibecode/skills/nextjs-security-scan.md) — скилл · 553 установки
- [backend-security-coder](https://affpapa.org/nevibecode/skills/backend-security-coder.md) — скилл · 1000 установок
- [security-auditor](https://affpapa.org/nevibecode/skills/ovachiever-security-auditor.md) — скилл · 780 установок

Из того же набора: [wshobson/agents](https://affpapa.org/nevibecode/by/wshobson/agents.md) — 342 карточки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md