frontend-security について
frontend-securityは、フロントエンドのコードベースにある脆弱性や不足している防御策を監査するスキルです。一般的な攻撃パターン、依存関係のリスク、深刻度の分類、修正案を扱います。
主な機能
- 01XSSパターンの検索
- 02CSRF対策の確認
- 03CSPと入力検証の確認
- 04依存関係の脆弱性調査
- 05深刻度別の分類
- 06修正案の提示
活用シーン
- 01フロントエンドコードベースの監査
- 02ReactやDOM操作のXSSリスク確認
- 03フォームとリクエストのCSRFリスク確認
- 04Node.jsとnpm依存関係の評価
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ schalkneethling/ webdev-agent-skills --skill frontend-securityインストール後、Claude Code で/frontend-securityを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/csp-configuration.mdcsrf-protection.mddom-security.mdfile-upload-security.mdframework-patterns.mdinput-validation.mdjwt-security.mdnodejs-npm-security.mdxss-prevention.md詳細
フロントエンドセキュリティ監査スキル
フロントエンドのコードベースを包括的にセキュリティ監査し、脆弱性、悪いプラクティス、不足している保護策を特定します。
監査プロセス
- 危険なパターンをスキャンする - コードベースを検索し、既知の脆弱性を示す兆候を探します
- フレームワーク固有のリスクを確認する - フレームワークのセキュリティを回避するパターンを確認します
- 防御策を検証する - CSP、CSRF トークン、入力検証を確認します
- 依存関係を確認する - npm/node の依存関係に脆弱性がないか確認します
- 調査結果を報告する - 重要度別に分類し、修正方法を提示します
検索対象となる重大な脆弱性パターン
XSS の兆候(検索優先度:高)
# React dangerous patterns
grep -rn "dangerouslySetInnerHTML" --include="*.jsx" --include="*.tsx" --include="*.js"
# Direct DOM manipulation
grep -rn "\.innerHTML\s*=" --include="*.js" --include="*.ts" --include="*.jsx" --include="*.tsx"
grep -rn "\.outerHTML\s*=" --include="*.js" --include="*.ts"
grep -rn "document\.write" --include="*.js" --include="*.ts"
# URL-based injection
grep -rn "location\.href\s*=" --include="*.js" --include="*.ts"
grep -rn "location\.replace" --include="*.js" --include="*.ts"
grep -rn "window\.open" --include="*.js" --include="*.ts"
# Eval and code execution
grep -rn "eval\s*(" --include="*.js" --include="*.ts"
grep -rn "new Function\s*(" --include="*.js" --include="*.ts"
grep -rn "setTimeout\s*(\s*['\"]" --include="*.js" --include="*.ts"
grep -rn "setInterval\s*(\s*['\"]" --include="*.js" --include="*.ts"
# Twig unescaped output
grep -rn "|raw" --include="*.twig" --include="*.html.twig"
grep -rn "{% autoescape false %}" --include="*.twig"
CSRF の兆候
# Forms without CSRF tokens
grep -rn "<form" --include="*.html" --include="*.jsx" --include="*.tsx" --include="*.twig"
# State-changing requests without protection
grep -rn "fetch\s*(" --include="*.js" --include="*.ts" | grep -E "(POST|PUT|DELETE|PATCH)"
grep -rn "axios\.(post|put|delete|patch)" --include="*.js" --include="*.ts"
機密データの露出
# localStorage/sessionStorage with sensitive data
grep -rn "localStorage\." --include="*.js" --include="*.ts"
grep -rn "sessionStorage\." --include="*.js" --include="*.ts"
# Hardcoded secrets
grep -rn "api[_-]?key\s*[:=]" --include="*.js" --include="*.ts" --include="*.env"
grep -rn "secret\s*[:=]" --include="*.js" --include="*.ts"
grep -rn "password\s*[:=]" --include="*.js" --include="*.ts"
参考ドキュメント
調査結果に応じて、以下の参考資料を読み込んでください。
- XSS 脆弱性が見つかった場合:
references/xss-prevention.mdを参照 - CSRF に懸念がある場合:
references/csrf-protection.mdを参照 - DOM 操作に問題がある場合:
references/dom-security.mdを参照 - CSP の確認が必要な場合:
references/csp-configuration.mdを参照 - 入力処理に問題がある場合:
references/input-validation.mdを参照 - Node.js/NPM の監査:
references/nodejs-npm-security.mdを参照 - フレームワーク固有のパターン:
references/framework-patterns.mdを参照 - ファイルアップロードの処理:
references/file-upload-security.mdを参照 - JWT の実装:
references/jwt-security.mdを参照
重要度の分類
CRITICAL - 悪用可能な XSS、認証の回避、シークレットの露出 HIGH - CSRF 保護の欠如、安全でない DOM 操作、SQL インジェクションにつながる要因 MEDIUM - 弱い CSP、セキュリティヘッダーの欠如、不適切な入力検証 LOW - 情報の開示、非推奨の関数、最適とはいえないプラクティス
レポート形式
## Security Audit Report
### Summary
- Critical: X findings
- High: X findings
- Medium: X findings
- Low: X findings
### Critical Findings
#### [CRITICAL-001] Title
- **Location**: file:line
- **Pattern**: Code snippet
- **Risk**: Description of the vulnerability
- **Remediation**: How to fix
- **Reference**: OWASP link
### High Findings
[...]
OWASP の参考リンク
包括的なガイダンスについては、以下の OWASP チートシートを直接参照してください。
- XSS の防止:https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html
- DOM XSS の防止:https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html
- CSRF の防止:https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html
- CSP:https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html
- 入力検証:https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html
- HTML5 セキュリティ:https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html
- DOM クラバリング:https://cheatsheetseries.owasp.org/cheatsheets/DOM_Clobbering_Prevention_Cheat_Sheet.html
- Node.js セキュリティ:https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html
- NPM セキュリティ:https://cheatsheetseries.owasp.org/cheatsheets/NPM_Security_Cheat_Sheet.html
- AJAX セキュリティ:https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html
- ファイルアップロード:https://cheatsheetseries.owasp.org/cheatsheets/File_Upload_Cheat_Sheet.html
- エラー処理:https://cheatsheetseries.owasp.org/cheatsheets/Error_Handling_Cheat_Sheet.html
- JWT セキュリティ:https://cheatsheetseries.owasp.org/cheatsheets/JSON_Web_Token_for_Java_Cheat_Sheet.html
- ユーザーのプライバシー:https://cheatsheetseries.owasp.org/cheatsheets/User_Privacy_Protection_Cheat_Sheet.html
- gRPC セキュリティ:https://cheatsheetseries.owasp.org/cheatsheets/gRPC_Security_Cheat_Sheet.html
コメント
Markdown 対応