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


363

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?

Réponses:


237

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


2
Je viens d'utiliser le validateur html w3c et j'ai reçu ce message lors de l'utilisation de l'attribut "intégrité":Attribute integrity not allowed on element link at this point.
Tomas Gonzalez

9
@TomasGonzalez Je pense que vous pouvez supposer en toute sécurité que l'outil w3c n'a pas encore été mis à jour pour inclure le support SRI
Josh_at_Savings_Champion

5
FYI: a également déposé un bug avec le validateur: github.com/validator/validator/issues/151
jonathanKingston

72
Mainteneur du W3C HTML Checker (aka validateur) ici. Oui, désolé, le vérificateur ne sait encore rien sur l' integrityattribut. Mais je vais bientôt ajouter un support pour cela, comme demandé dans github.com/validator/validator/issues/151 . Vous voudrez peut-être vous abonner à ce problème pour recevoir une notification à son arrivée.
sideshowbarker

7
OnlineWebCheck.com prend en charge l' integrityattribut (je suis le responsable de ce vérificateur).
Albert Wiersch

112

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:

entrez la description de l'image ici

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.

entrez la description de l'image ici

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.

entrez la description de l'image ici

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


6
Réponse très utile!
Emiel Koning

4
Merci pour votre réponse. J'adore les détails techniques!
Anh Tran

Comment savoir si l'intégrité du fichier est celle qui n'est pas encore manipulée? Aucun conseil?
vadi taslim

@ yon.fun: veuillez ne pas suggérer de modifications pour ajouter vos propres liens. Nous sommes assez sensibles aux éventuels spams ici, même si votre contenu est précieux.
halfer

Devriez-vous inclure l'ISR pour les ressources qui sont de la même origine, et si oui, pourquoi?
Vide il y a

1

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/

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.