Content Security Policy (CSP) avec Vue
En-têtes CSP, scripts fondés sur un nonce, politiques fondées sur un hachage et configuration CSP de Vite
Content Security Policy (CSP) avec Vue est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Qu’est-ce que CSP
La politique de sécurité du contenu est un en-tête de réponse HTTP qui indique au navigateur quelles sources de scripts, de styles, d’images et de connexions sont autorisées. Elle constitue une solide deuxième ligne de défense contre XSS : même les scripts injectés sont bloqués si leur source n’est pas autorisée.
L’en-tête
CSP est transmis via l’en-tête de réponse Content-Security-Policy. Chaque directive répertorie les sources autorisées pour un type de ressource.
Content-Security-Policy: default-src 'self'; script-src 'self';Restreindre les sources de scripts
La directive script-src contrôle les sources depuis lesquelles les scripts peuvent être chargés. La limiter à 'self' bloque les scripts intégrés et ceux de tiers qu’un attaquant pourrait injecter.
Content-Security-Policy: script-src 'self' https://cdn.trusted.com;Éviter unsafe-inline
'unsafe-inline' autorise les scripts intégrés et les attributs de gestionnaires d’événements — exactement ce qu’exploitent les attaques XSS. Une politique stricte l’omet afin que le code intégré injecté ne puisse pas s’exécuter.
Éviter unsafe-eval
'unsafe-eval' autorise eval et le constructeur Function. La version d’exécution de Vue 3 n’en a pas besoin (les modèles sont précompilés) : vous pouvez donc, et devriez, l’omettre.
Scripts intégrés fondés sur un nonce
Lorsque vous avez réellement besoin d’un script intégré, attribuez-lui un nonce aléatoire propre à chaque réponse et répertoriez ce nonce dans la politique. Seuls les scripts portant le nonce correspondant s’exécutent.
<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
// allowed because nonce matches
</script>Pourquoi les nonces sont préférables à unsafe-inline
Un nonce est imprévisible et change à chaque réponse : un attaquant qui injecte un script ne peut donc pas le deviner. Les scripts intégrés continuent ainsi de fonctionner sans le risque généralisé associé à unsafe-inline.
CSP et styles Vue
Vue et de nombreuses bibliothèques d’interface injectent des styles à l’exécution. Autorisez-les avec style-src et un nonce ou un condensat, ou extrayez le CSS dans des fichiers afin que style-src 'self' suffise.
Content-Security-Policy: style-src 'self';Extension de nonce CSP de Vite pour le développement
Le serveur de développement de Vite injecte des scripts, ce qui peut entrer en conflit avec une CSP stricte. Une extension de nonce CSP appose un nonce correspondant sur les balises injectées par Vite pendant le développement.
// vite.config.ts
import { defineConfig } from "vite";
export default defineConfig({
html: {
cspNonce: "DEV_NONCE"
}
});connect-src pour les API
Limitez les destinations auxquelles l’application peut effectuer des requêtes avec connect-src, afin que du code injecté ne puisse pas exfiltrer de données vers un domaine contrôlé par un attaquant.
Content-Security-Policy: connect-src 'self' https://api.example.com;Mode de rapport uniquement
Déployez CSP progressivement avec Content-Security-Policy-Report-Only, qui signale les violations sans les bloquer. Vous pouvez ainsi ajuster la politique avant de l’appliquer.
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;Vérification rapide
Quelle valeur de directive CSP devez-vous éviter pour conserver une protection forte contre XSS ?
Récapitulatif
CSP est un en-tête HTTP qui restreint les sources autorisées pour les scripts, les styles et les connexions, et bloque le code injecté même si une attaque XSS passe entre les mailles du filet. Évitez unsafe-inline et unsafe-eval ; utilisez des nonces propres à chaque réponse pour les scripts intégrés nécessaires et une extension de nonce CSP de Vite pendant le développement. Déployez d’abord le mode de rapport uniquement avant de l’appliquer.
Questions Fréquemment Posées
La leçon « Content Security Policy (CSP) avec Vue » est-elle gratuite ?
Oui — le texte complet de « Content Security Policy (CSP) avec Vue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Content Security Policy (CSP) avec Vue » ?
En-têtes CSP, scripts fondés sur un nonce, politiques fondées sur un hachage et configuration CSP de Vite Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Content Security Policy (CSP) avec Vue » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Prévention des XSS dans Vue
- Content Security Policy (CSP) avec Vue
- Protection contre les CSRF dans les SPA Vue
- Modèles d’authentification sécurisée