Compétences Frontend Security Coder
🔒

Frontend Security Coder

Sûr

Sécurisez votre code Frontend

Les applications Frontend sont vulnérables aux attaques XSS, CSRF et autres. Cette compétence génère des modèles de code sécurisés et identifie les vulnérabilités dans vos applications web pour vous protéger contre les vecteurs d'attaque courants.

Prend en charge: Claude Codex Code(CC)
🥉 73 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "Frontend Security Coder". Génère un composant d'entrée sécurisé contre les XSS dans React qui assainit les entrées utilisateur

Résultat attendu:

Un composant React avec un assainissement approprié des entrées utilisant DOMPurify, un encodage de sortie et une validation de props axée sur la sécurité.

Utilisation de "Frontend Security Coder". Écris du code de protection CSRF pour une application JavaScript

Résultat attendu:

Module JavaScript avec un wrapper fetch qui attache automatiquement les tokens CSRF, valide les réponses et gère le rafraîchissement des tokens.

Utilisation de "Frontend Security Coder". Crée un modèle d'authentification sécurisé pour une SPA

Résultat attendu:

Module d'authentification complet utilisant des cookies httpOnly, des refresh tokens avec stockage sécurisé et une gestion de session automatique.

Audit de sécurité

Sûr
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
Fichiers analysés
0
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
100
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

Développement de composants sécurisés

Génère des composants React, Vue ou Angular conscients de la sécurité avec une protection XSS intégrée et une validation des entrées

Revue de code de sécurité

Obtenez une analyse de sécurité détaillée des extraits de code frontend avec une identification spécifique des vulnérabilités et des recommandations de correction

Apprentissage des meilleures pratiques de sécurité

Apprenez des modèles de codage sécurisé et des pratiques pour le développement frontend grâce à des exemples générés et des explications

Essayez ces prompts

Protection XSS de base 
Génère un composant d'entrée sécurisé contre les XSS dans [FRAMEWORK] qui assainit les entrées utilisateur et prévient les attaques par injection de script. Inclut des fonctions d'échappement appropriées.
Gestionnaire de tokens CSRF 
Écris un module de gestion de tokens CSRF pour une application frontend. Inclut la récupération des tokens, la validation sur les requêtes et une logique de rafraîchissement automatique des tokens.
Flux d'authentification sécurisé 
Génère un modèle de flux d'authentification sécurisé pour une application monopage. Inclut les meilleures pratiques de stockage des tokens, la gestion des refresh tokens et une logique de délai d'expiration de session.
Guide de configuration CSP 
Crée une configuration complète de Content Security Policy pour une application web moderne. Inclut des directives pour les scripts, styles, images et appels API.

Bonnes pratiques

  • Validez et assainissez toujours les entrées utilisateur à la fois côté client et côté serveur, même si une validation côté client est présente
  • Utilisez des bibliothèques de sécurité modernes comme DOMPurify pour l'assainissement HTML plutôt que d'écrire des fonctions d'échappement personnalisées
  • Implémentez des en-têtes Content Security Policy pour fournir une couche de défense supplémentaire contre les attaques XSS

Éviter

  • Utiliser innerHTML avec des données fournies par l'utilisateur sans assainissement - cela crée des vulnérabilités XSS directes
  • Stocker des tokens sensibles dans localStorage au lieu de cookies httpOnly - les tokens sont accessibles au JavaScript
  • Désactiver la protection CSRF pour les endpoints API parce que cela ajoute de la complexité - cela expose l'application à la falsification de requêtes cross-site

Foire aux questions

Cette compétence analyse-t-elle ma base de code existante pour les vulnérabilités ?
Non, cette compétence génère du code et des modèles axés sur la sécurité à partir de prompts. Elle n'analyse pas les bases de code externes.
Cette compétence peut-elle remplacer un audit de sécurité ?
Non, cette compétence fournit des recommandations de codage et des modèles. Elle ne peut pas remplacer les audits de sécurité professionnels ou les tests de pénétration.
Quels frameworks cette compétence prend-elle en charge ?
La compétence peut générer du code pour React, Vue, Angular, JavaScript vanilla et d'autres frameworks frontend populaires.
Le code généré fonctionne-t-il à la fois avec le frontend et le backend ?
La compétence se concentre sur les modèles de sécurité frontend. La sécurité backend nécessite des implémentations côté serveur non couvertes par cette compétence.
Comment l'utiliser avec Claude Code ou Codex ?
Activez la compétence et fournissez des prompts spécifiques sur le modèle de sécurité dont vous avez besoin. La compétence générera le code et les explications appropriés.
Les recommandations de sécurité sont-elles à jour ?
La compétence génère des recommandations basées sur des pratiques de sécurité établies. Vérifiez toujours par rapport aux normes de sécurité actuelles et aux directives OWASP.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

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

Réf

main

Structure de fichiers

📄 SKILL.md