Dans le paysage en constante évolution de la sécurité Web, la politique de sécurité du contenu (CSP) est apparue comme un outil puissant pour aider les développeurs à protéger leurs applications contre diverses formes d'attaques, en particulier entre sites. Scripts (XSS). Ce blog vous présentera les principes fondamentaux de CSP, comment le mettre en œuvre et fournira des exemples concrets pour vous aider à maîtriser son utilisation.

Qu'est-ce que la politique de sécurité du contenu (CSP) ?

La politique de sécurité du contenu (CSP) est une fonctionnalité de sécurité qui permet de prévenir toute une série d'attaques en contrôlant les ressources qu'un site Web est autorisé à charger et à exécuter. En définissant un CSP, vous pouvez spécifier quels scripts, styles et autres ressources peuvent être chargés, réduisant ainsi considérablement le risque d'attaques XSS et par injection de données.

Pourquoi utiliser CSP ?

1. Atténuer les attaques XSS : En limitant les sources à partir desquelles les scripts peuvent être chargés, CSP aide à empêcher les attaquants d'injecter des scripts malveillants.

2. Contrôler le chargement des ressources : CSP vous permet de contrôler à partir duquel votre site charge des ressources telles que des images, des scripts, des feuilles de style, etc.

3. Empêcher l'injection de données : CSP peut aider à prévenir les attaques visant à injecter des données indésirables dans votre site.

Structure de base d'un CSP

Un CSP est défini à l'aide de l'en-tête HTTP Content-Security-Policy. Voici un exemple simple de ce à quoi pourrait ressembler un en-tête CSP :

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'

Dans cette politique :

default-src 'self' : Par défaut, autorisez uniquement les ressources de la même origine.
script-src 'self' https://trusted.cdn.com : Autoriser les scripts de la même origine et un CDN de confiance.
style-src 'self' 'unsafe-inline' : Autoriser les styles de la même origine et les styles en ligne.

Implémentation de CSP dans votre application JavaScript

Étape 1 : définissez votre politique

Commencez par déterminer les ressources que votre application doit charger. Cela inclut les scripts, les styles, les images, les polices, etc.

Étape 2 : ajoutez l’en-tête CSP à votre serveur

Si vous utilisez un serveur Express.js, vous pouvez définir l'en-tête CSP comme suit :

const express = require('express');
const helmet = require('helmet');
const app = express();

app.use(helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "https://trusted.cdn.com"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", "data:"],
    }
}));

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Étape 3 : Testez votre CSP

Une fois votre CSP en place, testez-le minutieusement. Utilisez les outils de développement du navigateur pour vérifier si des ressources sont bloquées. Ajustez la stratégie si nécessaire pour garantir que votre application fonctionne correctement tout en restant sécurisée.

Exemple : implémentation de CSP dans un exemple de projet

Considérons une simple page HTML qui charge des scripts et des styles à partir d'un CDN fiable.

    
Content Security Policy Example
    

Dans cet exemple :

• Seules les ressources de la même origine (« soi ») sont autorisées par défaut.
• Les scripts sont autorisés depuis la même origine et depuis le CDN cdnjs.cloudflare.com.
• Les styles en ligne sont autorisés (« unsafe-inline »), mais cela doit être évité si possible pour une meilleure sécurité.

Conseils pour un CSP solide

1. Évitez « unsafe-inline » et « unsafe-eval » : Ceux-ci autorisent les scripts et les styles en ligne, qui peuvent être exploités. Utilisez plutôt des stratégies basées sur le nonce ou le hachage.

2. Utilisez le mode Rapport uniquement : Commencez par Content-Security-Policy-Report-Only pour enregistrer les violations sans appliquer la stratégie, ce qui vous permet d'affiner la stratégie.

3. Mettre régulièrement à jour le CSP : À mesure que votre application évolue, assurez-vous que votre CSP est mis à jour pour refléter les nouveaux besoins en ressources et les meilleures pratiques de sécurité.

Conclusion

La mise en œuvre d'une politique de sécurité du contenu robuste est une étape essentielle pour sécuriser vos applications JavaScript contre une série d'attaques. En comprenant les principes fondamentaux du CSP et en suivant les meilleures pratiques, vous pouvez améliorer considérablement la sécurité de vos applications Web. Commencez par une politique de base, testez-la minutieusement et itérez pour atteindre l'équilibre parfait entre fonctionnalité et sécurité.