スキル Frontend Security Coder
🔒

Frontend Security Coder

安全

フロントエンドコードをセキュリティ強化する

フロントエンドアプリケーションは XSS、CSRF、その他の攻撃に対して脆弱です。このスキルは安全なコードパターンを生成し、ウェブアプリケーションの脆弱性を特定することで、一般的な攻撃ベクトルから保護します。

対応: Claude Codex Code(CC)
📊 70 十分
1

スキルZIPをダウンロード

2

Claudeでアップロード

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

3

オンにして利用開始

テストする

「Frontend Security Coder」を使用しています。 ユーザー入力をサニタイズする XSS 対策済みの入力コンポーネントを React で生成する

期待される結果:

DOMPurify を使用した適切な入力サニタイゼーション、出力エンコーディング、セキュリティ重視のプロパティ検証を備えた React コンポーネント。

「Frontend Security Coder」を使用しています。 JavaScript アプリケーション向けの CSRF 保護コードを作成する

期待される結果:

CSRF トークンを自動的に添付し、レスポンスを検証し、トークン更新を処理する fetch ラッパーを備えた JavaScript モジュール。

「Frontend Security Coder」を使用しています。 SPA 向けの安全な認証パターンを作成する

期待される結果:

httpOnly クッキー、安全なストレージを備えたリフレッシュトークン、自動セッション管理を使用した完全な認証モジュール。

セキュリティ監査

安全
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
コンテンツ
32
コミュニティ
100
セキュリティ
83
仕様準拠

作れるもの

安全なコンポーネント開発

組み込みの XSS 保護と入力検証を備えた、セキュリティに配慮した React、Vue、Angular コンポーネントを生成する

セキュリティコードレビュー

特定の脆弱性特定と修正ガイダンスを含む、フロントエンドコードスニペットの詳細なセキュリティ分析を取得する

セキュリティベストプラクティス学習

生成された例と説明を通じて、フロントエンド開発の安全なコーディングパターンとプラクティスを学ぶ

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

基本的な XSS 保護 
[FRAMEWORK] でユーザー入力をサニタイズし、スクリプトインジェクション攻撃を防止する XSS 対策済みの入力コンポーネントを生成してください。適切なエスケープ関数を含めてください。
CSRF トークンハンドラー 
フロントエンドアプリケーション向けの CSRF トークン管理モジュールを作成してください。トークン取得、リクエスト時の検証、自動トークン更新ロジックを含めてください。
安全な認証フロー 
シングルページアプリケーション向けの安全な認証フローパターンを生成してください。トークン保存のベストプラクティス、リフレッシュトークン処理、セッションタイムアウトロジックを含めてください。
CSP 設定ガイド 
現代のウェブアプリケーション向けの包括的なコンテンツセキュリティポリシー設定を作成してください。スクリプト、スタイル、画像、API 呼び出し向けのディレクティブを含めてください。

ベストプラクティス

  • クライアントサイドの検証が存在していても、必ずクライアント側とサーバー側の両方でユーザー入力を検証・サニタイズすること
  • 独自のエスケープ関数を作成するのではなく、DOMPurify などの最新のセキュリティライブラリを HTML サニタイゼーションに使用すること
  • コンテンツセキュリティポリシーヘッダーを実装して、XSS 攻撃に対する追加の防御層を提供すること

回避

  • サニタイゼーションなしにユーザー提供データを innerHTML で使用する - これは直接 XSS 脆弱性を作成する
  • httpOnly クッキーの代わりに localStorage に機密トークンを保存する - トークンは JavaScript からアクセス可能になる
  • 複雑さを増すという理由で API エンドポイントの CSRF 保護を無効にする - これはアプリケーションをクロスサイトリクエストフォージェリにさらす

よくある質問

このスキルは既存のコードベースをスキャンして脆弱性を特定しますか？
いいえ、このスキルはプロンプトからセキュリティに焦点を当てたコードとパターンを生成するものであり、外部のコードベースを分析するものではありません。
このスキルはセキュリティ監査の代わりになりますか？
いいえ、このスキルはコーディングガイダンスとパターンを提供するものであり、専門的なセキュリティ監査やペネトレーションテストの代わりにはなりません。
このスキルはどのフレームワークをサポートしていますか？
このスキルは React、Vue、Angular、バニラ JavaScript、その他の人気のあるフロントエンドフレームワーク向けのコードを生成できます。
生成されたコードはフロントエンドとバックエンドの両方で機能しますか？
このスキルはフロントエンドセキュリティパターンに焦点を当てています。バックエンドセキュリティには、このスキルではカバーしないサーバーサイドの実装が必要です。
Claude Code や Codex でこれを使用するにはどうすればよいですか？
スキルをアクティブにして、必要なセキュリティパターンに関する具体的なプロンプトを提供してください。スキルが適切なコードと説明を生成します。
セキュリティ推奨事項は最新のものですか？
このスキルは確立されたセキュリティプラクティスに基づいて推奨事項を生成します。必ず現在のセキュリティ標準と OWASP ガイドラインに対して検証してください。

開発者の詳細

作成者

sickn33

ライセンス

MIT

リポジトリ

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

参照

main

ファイル構成

📄 SKILL.md