Quels sont les attributs d'intégrité et d'origines croisées?

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 integrityet crossorigin? Comment affectent-ils le chargement de la feuille de style?

Les deux attributs ont été ajoutés au CDN Bootstrap pour implémenter l' intégrité des sous-ressources .

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 en utilisant 'CORS' qui est maintenant une exigence de vérification SRI lorsqu'elle n'est pas chargée à partir de la 'même origine'. Plus d'infos sur crossorigin

Plus de détails sur l'implémentation des CDN Bootstrap

intégrité - définit la valeur de hachage d'une ressource (comme une somme de contrôle) qui doit être mise en correspondance 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 façon, le navigateur ne chargera pas différentes ressources (par exemple malveillantes). Imaginez une situation dans laquelle vos fichiers JavaScript ont été piratés sur le CDN, et il n'y avait aucun moyen de le savoir. L'attribut d'intégrité empêche le chargement de contenu qui ne correspond pas.

L'ISR non valide sera bloqué (outils de développement Chrome), quelle que soit l'origine croisée. Ci-dessous le cas NON-CORS lorsque l'attribut d'intégrité ne correspond pas:

L'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 sur une origine différente. (Voir CORS (Cross-Origin Resource Sharing) ici: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ). Il modifie efficacement les requêtes HTTP envoyées par le navigateur. Si l'attribut «crossorigin» est ajouté - il en résultera l'ajout de l' origine: <ORIGIN> paire clé-valeur dans la requête HTTP comme indiqué ci-dessous.

crossorigin peut être défini sur «anonyme» ou «utiliser les informations d'identification». Les deux entraîneront l'ajout de l' origine: dans la demande. Ce dernier veillera cependant à ce que les informations d'identification soient vérifiées. Aucun attribut crossorigin dans la balise n'entraînera l'envoi d'une demande sans paire origine: clé-valeur.

Voici un cas lors de la demande de «use-credentials» à 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 l'origine croisée n'est pas définie correctement.

Liens
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML / Élément / lien

Blogs
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity

Techniquement, l' attribut d'intégrité aide à cela - il permet la vérification appropriée de la source de données. Autrement dit, il permet simplement au navigateur de vérifier les numéros dans le bon fichier source avec les montants demandés par le fichier source situé sur le serveur CDN.

En allant un peu plus loin, dans le cas de la valeur de hachage chiffrée établie de cette source et de sa conformité vérifiée avec une valeur prédéfinie dans le navigateur - le code s'exécute et la demande de l'utilisateur est traitée avec succès.

L'attribut Crossorigin aide les développeurs à optimiser les taux de performances CDN, tout en protégeant le code du site Web contre les scripts malveillants.

En particulier, Crossorigin télécharge le code programme du site en mode anonyme, sans télécharger de cookies ni effectuer la procédure d'authentification. De cette façon, il empêche la fuite de données utilisateur lors du premier chargement du site sur un serveur CDN spécifique, que les fraudeurs du réseau peuvent facilement remplacer les adresses.

Source: https://yon.fun/what-is-link-integrity-and-crossorigin/