Tutoriels pratiques Sécurité

Comment ajouter l'intégrité des sous-ressources aux scripts et feuilles de style

Protégez vos pages d'un fichier de CDN falsifié : calculez l'empreinte du fichier exact, ajoutez les attributs integrity et crossorigin, vérifiez que le navigateur bloque une copie modifiée et prévoyez les mises à jour.

Dernière vérification :

AdSense Placeholder
Slot: header_reference_page
Sur cette page

Étapes

  1. Figez une version exacte du fichier

    Pointez vers une URL précise et versionnée, jamais vers un alias « latest » susceptible de changer. Téléchargez le fichier ou ouvrez l'URL pour calculer l'empreinte des octets exacts que recevront les navigateurs.

  2. Calculez l'empreinte

    Déposez le fichier ou collez son texte dans le générateur de hachage SRI et choisissez sha384 (sha256 et sha512 conviennent aussi). Il renvoie la valeur sous la forme sha384- suivie de l'empreinte en Base64.

  3. Ajoutez integrity et crossorigin

    Placez la valeur dans l'attribut integrity et ajoutez crossorigin="anonymous". Les fichiers d'une autre origine exigent l'attribut CORS, sinon la vérification ne peut pas s'exécuter.

  4. Vérifiez que la falsification est bloquée

    Modifiez un caractère dans une copie locale, faites pointer la balise vers elle et rechargez : la console doit signaler une ressource bloquée. Rétablissez ensuite le bon fichier.

  5. Prévoyez les mises à jour

    Quand vous mettez à jour la bibliothèque, calculez une nouvelle empreinte et changez ensemble la version de l'URL et l'attribut. Dans une chaîne de build, générez les empreintes automatiquement.

Ce dont vous avez besoin

L'URL ou le fichier exact d'un script ou d'une feuille de style chargé depuis une autre origine, et la possibilité de modifier la page.

Exemple

Pour un script dont tout le contenu est alert('Hello, world.');, l'empreinte sha384 a été vérifiée avec OpenSSL (openssl dgst -sha384 -binary fichier | openssl base64 -A). La balise ressemble à ceci :

<script src="https://cdn.example.com/app.js" integrity="sha384-H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO" crossorigin="anonymous"></script>

Ce que font les attributs

  • integrity porte une ou plusieurs empreintes ; le navigateur accepte le fichier si l'une correspond. Ajoutez une seconde empreinte pour déployer une mise à jour.
  • crossorigin="anonymous" demande le fichier sans identifiants et permet au navigateur de le lire. Le serveur doit envoyer Access-Control-Allow-Origin (la plupart des CDN le font).
  • SRI fonctionne avec <script> et <link rel="stylesheet"> (et les préchargements).
  • Il ne protège ni les scripts injectés dynamiquement ni la page elle-même.

Essayez ces outils

Générateur de Hash SRI

Générez des hashes d'intégrité des sous-ressources (SRI) pour un script ou une feuille de style.

Générateur de Hachage

Générez des hachages MD5, SHA-1, SHA-256 et SHA-512 à partir de n'importe quel texte, calculés localement avec l'API Web Crypto.

Générateur d'en-tête CSP

Créez une chaîne d'en-tête Content-Security-Policy à partir d'une liste de directives courantes.

Analyseur d'En-têtes de Sécurité

Vérifiez les en-têtes HTTP de sécurité d'un site (HSTS, Content-Security-Policy, X-Content-Type-Options, Referrer-Policy.

Voir aussi

  • Glossaire Intégrité des sous-ressources (SRI)
    L'intégrité des sous-ressources est une fonction du navigateur qui vérifie un script ou une feuille de style avec une empreinte que vous.
  • Glossaire Politique de sécurité du contenu (CSP)
    Une politique de sécurité du contenu est un en-tête HTTP qui indique au navigateur de quelles sources une page peut charger scripts.
  • Glossaire CDN
    Un CDN (réseau de diffusion de contenu) est un réseau mondial de serveurs qui stocke des copies d'un site et les sert au plus près de.
  • Guide Comment fonctionne le hachage
    Ce que fait une fonction de hachage, l'effet avalanche avec une vraie sortie SHA-256, quels algorithmes restent sûrs.
  • Aide-mémoire Aide-mémoire des directives Content Security Policy
    Toutes les directives CSP Level 3, ce qu'elles contrôlent et leur repli, les mots-clés de source.
  • Aide-mémoire Aide-mémoire des commandes OpenSSL
    Les commandes OpenSSL réellement utilisées : empreintes et octets aléatoires, clés, demandes de certificat, lecture de certificats.

Questions fréquemment posées

Le navigateur refuse d'exécuter le script ou d'appliquer la feuille de style et consigne une erreur dans la console. Votre page continue de se charger, mais sans ce fichier ; testez donc le cas d'échec.

Cela apporte peu, car quelqu'un qui peut modifier le fichier peut généralement modifier la page aussi. C'est surtout utile pour les fichiers tiers d'un CDN.

Retour aux tutoriels pratiques
AdSense Placeholder
Slot: footer_leaderboard