Quels sont les attributs d'intégrité et de crossorigin?
Bootstrapcdn a récemment changé ses liens. Cela ressemble maintenant à ceci:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
crossorigin="anonymous">
Que signifient les attributs integrity et crossorigin? Comment affectent-ils le chargement de la feuille de style?
Les deux attributs ont été ajoutés à Bootstrap CDN pour être mis en œuvre Intégrité de la sous-source .
L’intégrité des sous-ressources définit un mécanisme par lequel les agents utilisateurs peuvent vérifier qu’une ressource extraite a été livrée sans manipulation inattendue Référence
L'attribut d'intégrité permet au navigateur de vérifier la source du fichier pour s'assurer que le code n'est jamais chargé si la source a été manipulée.
L'attribut Crossorigin est présent lorsqu'une demande est chargée à l'aide de 'CORS', ce qui est désormais une exigence de la vérification SRI lorsqu'elle n'est pas chargée à partir de la même origine. Plus d'infos sur le crossorigin
Integrity - définit la valeur de hachage d'une ressource (telle qu'une somme de contrôle) à laquelle il faut faire correspondre pour que le navigateur l'exécute. Le hachage garantit que le fichier n'a pas été modifié et contient les données attendues. De cette manière, le navigateur ne chargera pas différentes ressources (malveillantes, par exemple). Imaginez une situation dans laquelle vos fichiers JavaScript ont été piratés sur le CDN et qu’il n’y avait aucun moyen de le savoir. L'attribut d'intégrité empêche le chargement de contenu qui ne correspond pas.
Les IRS non valides seront bloqués (outils de développement Chrome), indépendamment de l'origine croisée. Au-dessous de cas non-CORS lorsque l'attribut d'intégrité ne correspond pas:
Intégrité peut être calculée en utilisant: https://www.srihash.org/ ou en tapant dans la console ( lien ):
openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A
crossorigin - définit les options utilisées lorsque la ressource est chargée à partir d'un serveur d'origine différente. (Voir CORS (Partage de ressources d'origine croisée) ici: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ). Il modifie efficacement la requête HTTP envoyée par le navigateur. Si l'attribut "crossorigin" est ajouté - cela entraînera l'ajout de la paire Origine: <Origine> dans la requête HTTP, comme indiqué ci-dessous.
crossorigin peut être défini sur "anonymous" ou "use-credentials". Les deux entraîneront l'ajout de Origin: dans la demande. Ce dernier veillera toutefois à ce que les informations d'identification soient vérifiées. Aucun attribut crossorigin dans la balise ne donnera lieu à une demande d'envoi sans paire Origine: clé-valeur.
Voici un cas lorsque vous demandez des "informations d'identification" à CDN:
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="use-credentials"></script>
Un navigateur peut annuler la demande si crossorigin est mal défini.
Liens
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
Blogs
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity