スキル Frontend Security Coder
🔒

Frontend Security Coder

安全

Secure Your Frontend Code

Frontend applications are vulnerable to XSS, CSRF, and other attacks. This skill generates secure code patterns and identifies vulnerabilities in your web applications to protect against common attack vectors.

対応: Claude Codex Code(CC)
🥉 73 ブロンズ
1

スキルZIPをダウンロード

2

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

3

オンにして利用開始

テストする

「Frontend Security Coder」を使用しています。 Generate a XSS-safe input component in React that sanitizes user input

期待される結果:

A React component with proper input sanitization using DOMPurify, output encoding, and security-focused prop validation.

「Frontend Security Coder」を使用しています。 Write CSRF protection code for a JavaScript application

期待される結果:

JavaScript module with fetch wrapper that automatically attaches CSRF tokens, validates responses, and handles token refresh.

「Frontend Security Coder」を使用しています。 Create a secure authentication pattern for a SPA

期待される結果:

Complete authentication module using httpOnly cookies, refresh tokens with secure storage, and automatic session management.

セキュリティ監査

安全
v1 • 2/25/2026

This is a prompt-only skill that generates frontend security content. No executable code was detected. The skill provides security guidance through natural language prompts without any system-level access, network calls, or file operations. Risk score is 0/100.

0
スキャンされたファイル
0
解析された行数
0
検出結果
1
総監査数
セキュリティ問題は見つかりませんでした
監査者: claude

品質スコア

38
アーキテクチャ
100
保守性
87
コンテンツ
50
コミュニティ
100
セキュリティ
83
仕様準拠

作れるもの

Secure Component Development

Generate security-aware React, Vue, or Angular components with built-in XSS protection and input validation

Security Code Review

Get detailed security analysis of frontend code snippets with specific vulnerability identification and remediation guidance

Security Best Practices Learning

Learn secure coding patterns and practices for frontend development through generated examples and explanations

これらのプロンプトを試す

Basic XSS Protection 
Generate a XSS-safe input component in [FRAMEWORK] that sanitizes user input and prevents script injection attacks. Include proper escaping functions.
CSRF Token Handler 
Write a CSRF token management module for a frontend application. Include token retrieval, validation on requests, and automatic token refresh logic.
Secure Authentication Flow 
Generate a secure authentication flow pattern for a single-page application. Include token storage best practices, refresh token handling, and session timeout logic.
CSP Configuration Guide 
Create a comprehensive Content Security Policy configuration for a modern web application. Include directives for scripts, styles, images, and API calls.

ベストプラクティス

  • Always validate and sanitize user input on both client and server sides, even if client-side validation is present
  • Use modern security libraries like DOMPurify for HTML sanitization rather than writing custom escaping functions
  • Implement Content Security Policy headers to provide an additional layer of defense against XSS attacks

回避

  • Using innerHTML with user-provided data without sanitization - this creates direct XSS vulnerabilities
  • Storing sensitive tokens in localStorage instead of httpOnly cookies - tokens are accessible to JavaScript
  • Disabling CSRF protection for API endpoints because it adds complexity - this exposes the application to cross-site request forgery

よくある質問

Does this skill scan my existing codebase for vulnerabilities?
No, this skill generates security-focused code and patterns from prompts. It does not analyze external codebases.
Can this skill replace a security audit?
No, this skill provides coding guidance and patterns. It cannot replace professional security audits or penetration testing.
What frameworks does this skill support?
The skill can generate code for React, Vue, Angular, vanilla JavaScript, and other popular frontend frameworks.
Does the generated code work with both frontend and backend?
The skill focuses on frontend security patterns. Backend security requires server-side implementations not covered by this skill.
How do I use this with Claude Code or Codex?
Activate the skill and provide specific prompts about the security pattern you need. The skill will generate appropriate code and explanations.
Are the security recommendations up to date?
The skill generates recommendations based on established security practices. Always verify against current security standards and OWASP guidelines.

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-security-coder

参照

main

ファイル構成

📄 SKILL.md