المهارات Frontend Security Coder
🔒

Frontend Security Coder

آمن

Sichern Sie Ihren Frontend-Code

Frontend-Anwendungen sind anfällig für XSS, CSRF und andere Angriffe. Diese Skill generiert sichere Code-Muster und identifiziert Schwachstellen in Ihren Webanwendungen, um vor gängigen Angriffsvektoren zu schützen.

يدعم: Claude Codex Code(CC)
📊 70 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "Frontend Security Coder". Generate a XSS-safe input component in React that sanitizes user input

النتيجة المتوقعة:

Eine React-Komponente mit ordnungsgemäßer Eingabebereinigung mit DOMPurify, Ausgabe-Kodierung und sicherheitsfokussierter Prop-Validierung.

استخدام "Frontend Security Coder". Write CSRF protection code for a JavaScript application

النتيجة المتوقعة:

JavaScript-Modul mit Fetch-Wrapper, das automatisch CSRF-Tokens anfügt, Antworten validiert und Token-Aktualisierung handhabt.

استخدام "Frontend Security Coder". Create a secure authentication pattern for a SPA

النتيجة المتوقعة:

Vollständiges Authentifizierungsmodul mit httpOnly-Cookies, Refresh-Tokens mit sicherem Speicher und automatischer Sitzungsverwaltung.

التدقيق الأمني

آمن
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
المحتوى
31
المجتمع
100
الأمان
83
الامتثال للمواصفات

ماذا يمكنك بناءه

Sichere Komponentenentwicklung

Generieren Sie sicherheitsbewusste React-, Vue- oder Angular-Komponenten mit integriertem XSS-Schutz und Eingabevalidierung

Sicherheits-Code-Review

Erhalten Sie detaillierte Sicherheitsanalysen von Frontend-Code-Snippets mit spezifischer Schwachstellenidentifikation und Remediation-Anleitungen

Lernen von Sicherheits-Best-Practices

Lernen Sie sichere Codierungsmuster und -praktiken für die Frontend-Entwicklung durch generierte Beispiele und Erklärungen

جرّب هذه الموجهات

Grundlegender XSS-Schutz 
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.
Sicherer Authentifizierungsfluss 
Generate a secure authentication flow pattern for a single-page application. Include token storage best practices, refresh token handling, and session timeout logic.
CSP-Konfigurationsanleitung 
Create a comprehensive Content Security Policy configuration for a modern web application. Include directives for scripts, styles, images, and API calls.

أفضل الممارسات

  • Validieren und bereinigen Sie Benutzereingaben immer sowohl client- als auch serverseitig, auch wenn eine clientseitige Validierung vorhanden ist
  • Verwenden Sie moderne Sicherheitsbibliotheken wie DOMPurify für HTML-Bereinigung, anstatt eigene Escape-Funktionen zu schreiben
  • Implementieren Sie Content-Security-Policy-Header, um eine zusätzliche Schutzschicht gegen XSS-Angriffe zu bieten

تجنب

  • Verwendung von innerHTML mit benutzerbereitgestellten Daten ohne Bereinigung - dies erzeugt direkte XSS-Schwachstellen
  • Speichern sensibler Tokens in localStorage statt in httpOnly-Cookies - Tokens sind für JavaScript zugänglich
  • Deaktivieren des CSRF-Schutzes für API-Endpunkte, weil es Komplexität hinzufügt - dies setzt die Anwendung Cross-Site-Request-Forgery-Angriffen aus

الأسئلة المتكررة

Durchsucht diese Skill meine bestehende Codebasis nach Schwachstellen?
Nein, diese Skill generiert sicherheitsfokussierten Code und Muster aus Prompts. Sie analysiert keine externen Codebasen.
Kann diese Skill ein Sicherheitsaudit ersetzen?
Nein, diese Skill bietet Codierungsanleitung und Muster. Sie kann professionelle Sicherheitsaudits oder Penetrationstests nicht ersetzen.
Welche Frameworks unterstützt diese Skill?
Die Skill kann Code für React, Vue, Angular, Vanilla JavaScript und andere gängige Frontend-Frameworks generieren.
Funktioniert der generierte Code sowohl mit Frontend als auch Backend?
Die Skill konzentriert sich auf Frontend-Sicherheitsmuster. Backend-Sicherheit erfordert serverseitige Implementierungen, die von dieser Skill nicht abgedeckt werden.
Wie verwende ich dies mit Claude Code oder Codex?
Aktivieren Sie die Skill und stellen Sie spezifische Prompts zu dem Sicherheitsmuster, das Sie benötigen. Die Skill generiert entsprechenden Code und Erklärungen.
Sind die Sicherheitsempfehlungen aktuell?
Die Skill generiert Empfehlungen basierend auf etablierten Sicherheitspraktiken. Verifizieren Sie diese immer gegenüber aktuellen Sicherheitsstandards und OWASP-Richtlinien.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md