Générateur de hachage SRI

Comment générer un hachage SRI

1. Le mode SRI est sélectionné. Sous Hachages, cochez sha256, sha384 et/ou sha512 ; sha384 est coché par défaut.
2. Déposez les fichiers .js ou .css avec Entrée réglé sur Fichier. Le type de balise suit l’extension du fichier.
3. Ou, avec Entrée sur Texte, collez le contenu du fichier dans Contenu du fichier (à coller), choisissez la Balise (<script> ou <link rel="stylesheet">) et saisissez le Chemin ou l’URL depuis laquelle le fichier sera servi.
4. Copiez la valeur integrity ou la Balise HTML complète. Si plusieurs algorithmes sont cochés, ils apparaissent séparés par des espaces dans un seul attribut.

Déposer le fichier est plus fiable que de coller son contenu. Une zone de texte du navigateur convertit les fins de ligne CRLF en LF, et un saut de ligne final manquant ou en trop change le hachage ; l’outil vous rappelle ces deux points.

Ce qu’est la valeur integrity

Une valeur SRI est le nom de l’algorithme, un tiret, puis l’empreinte Base64 des octets exacts du fichier. Pour un fichier app.js contenant une seule ligne, console.log('hello');, suivie d’un saut de ligne :

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

Sans le saut de ligne final, la même ligne donne sha384-v393mDht/MNBowq0Z9UpetDvKE6u6EdCihklP1GZs66vL1YCFm1Z4Q4wJtb94rY9. Le navigateur télécharge le fichier, hache le corps reçu (après avoir retiré la compression de transfert gzip ou Brotli : la compression ne change donc rien) et refuse de l’exécuter ou de l’appliquer si aucun hachage listé ne correspond.

Quand SRI vaut la peine

SRI vous protège quand quelqu’un d’autre sert votre code : un CDN public, l’hébergeur d’un widget tiers, un bucket de stockage partagé avec d’autres équipes. Si ce serveur est compromis et le fichier remplacé, les navigateurs bloquent le fichier modifié au lieu de l’exécuter sur vos pages.

Il convient aux fichiers qui ne changent jamais à une URL donnée, comme library@1.2.3/dist/lib.min.js. Il ne convient pas :

• aux URL comme /latest/ ou @1 qui suivent les nouvelles versions ;
• aux réponses qui varient selon le navigateur ou la région, comme certains CSS de polices web qui servent des règles @font-face différentes selon le user agent ;
• aux scripts que l’éditeur met à jour sur place volontairement, comme beaucoup de chargeurs d’analytics et de chat. Avec ceux-là, il faut choisir entre SRI et les mises à jour de l’éditeur.

Pour vos propres fichiers sur votre propre domaine, SRI apporte peu : un attaquant capable de modifier le fichier peut généralement modifier aussi le HTML. Une Content Security Policy est alors le meilleur outil ; le générateur de nonce CSP et les hachages CSP de SHA-256 en Base64 couvrent ce versant.

CORS et l’attribut crossorigin

Un fichier d’une autre origine avec un attribut integrity doit être récupéré en mode CORS, et le serveur doit l’autoriser avec Access-Control-Allow-Origin (généralement * pour les CDN publics). C’est ce que demande crossorigin="anonymous" ; la balise générée l’inclut toujours. Sans CORS, le navigateur ne peut pas lire les octets pour les hacher et bloque le fichier, avec un message de console qui indique l’échec d’intégrité ou de CORS.

Les fichiers de même origine n’ont pas besoin de l’attribut, mais il ne fait pas de mal.

Générer des hachages SRI pendant le build

Au-delà de quelques fichiers, calculez les hachages dans votre étape de build :

openssl dgst -sha384 -binary app.js | openssl base64 -A

const crypto = require("crypto");
const fs = require("fs");

const integrity = "sha384-" +
  crypto.createHash("sha384").update(fs.readFileSync("app.js")).digest("base64");
console.log(integrity);

Les deux affichent la valeur eEqgsNuD… ci-dessus pour le fichier d’exemple. Les bundlers ont souvent un plugin qui écrit l’attribut dans le HTML à votre place, ce qui garde les hachages synchronisés avec chaque build. Pour vérifier une valeur reçue, déposez le fichier ici et comparez ; la comparaison est exacte, caractère par caractère.

FAQ