Au hasard de mes pérégrinations webesques du week-end, je suis tombé sur un utilitaire assez sympathique : SRI Hash Generator.
Subresource integrity, késaco ?
Cet utilitaire permet d’utiliser simplement SRI, qui est une spécification du W3C. Grosso modo, l’idée de SRI est simple : vérifier l’intégrité d’un fichier (CSS ou JavaScript par exemple) qu’on télécharge par exemple depuis un CDN. L’intégrité est faite à l’aide d’un hash (une fonction de hachage cryptographique en bon français), exemple :
<link rel="stylesheet" href="https://rocssti.net/downloads/rocssti-fr.css" integrity="sha384-7e5gIv4ZjCNGuNodi1FRsA2KxKWIp+ambTxw9xGhjpkTIJGneKrLp7j8jHBIYNtD" crossorigin="anonymous" />Le navigateur qui lit ce genre d’appel va recalculer l’intégrité, et, si les valeurs coïncident, va exécuter le script ou la CSS. Si les valeurs ne coïncident pas, le navigateur refusera d’exécuter le script et/ou d’appliquer la CSS.
L’idée à la base de SRI est – si un CDN est compromis – d’empêcher que le vilain code malicieux qui a été inséré dans la bibliothèque que vous utilisez ne vienne se propager sur vos sites.
Exemples
Je me suis amusé à faire deux exemples simples avec Röcssti : chacun appelle Röcssti avec un hash différent (un bon et un bidonné) et essaie d’utiliser une classe de ce dernier.
Comme vous pouvez le voir dans le second cas, c’est radical si votre navigateur supporte SRI, même une pauvre classe n’est pas appliquée.
Peut-être l’aviez-vous vu par exemple sur le CDN de jQuery ?
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>Bon à savoir
Si vous vouliez tester l’outil, pensez à autoriser CORS pour le fichier en question. Cela peut se faire via un .htaccess avec :
Header set Access-Control-Allow-Origin "*"Côté support, c’est ok pour Firefox et Chrome, espérons que cela arrive vite pour les autres.
Pour en savoir plus sur SRI :
Ajout : piqué au vif de ne pas proposer le moindre lien francophone sur ce sujet, j’ai traduit la page sur le MDN en français : SRI, en français !
Ajout : Finalement, j’ai écrit un article sur le sujet sur OpenWeb : SubResource Integrity.
Je n'ai pas bien compris l'étape de vérification.
De ce que je comprend, on intègre la vérification directement dans le code HTML.
J'aimerais pouvoir vérifier par moi même, si le SRI d'un fichier JS correspond au SRI qui a été calculé.