Jakie są atrybuty integralności i crossorigin?


362

Bootstrapcdn ostatnio zmienił swoje linki. Teraz wygląda to tak:

<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">

Co oznaczają atrybuty integrityi crossorigin? Jak wpływają na ładowanie arkusza stylów?

Odpowiedzi:


237

Oba atrybuty zostały dodane do Bootstrap CDN w celu zaimplementowania integralności podśrodka .

Podrzędność Integralność definiuje mechanizm, za pomocą którego agenci użytkownika mogą zweryfikować, że pobrany zasób został dostarczony bez nieoczekiwanej manipulacji. Odwołanie

Atrybut integralności umożliwia przeglądarce sprawdzenie źródła pliku, aby upewnić się, że kod nigdy nie zostanie załadowany, jeśli źródłem manipulowano źródłem.

Atrybut crossorigin jest obecny, gdy żądanie jest ładowane przy użyciu „CORS”, co jest teraz wymogiem sprawdzania SRI, gdy nie jest ładowane z „tego samego źródła”. Więcej informacji na temat crossorigin

Więcej szczegółów na temat implementacji CDN Bootstrap


2
Właśnie użyłem sprawdzania poprawności HTML w3c i otrzymałem ten komunikat, używając atrybutu „integralność”:Attribute integrity not allowed on element link at this point.
Tomas Gonzalez

9
@TomasGonzalez Myślę, że można bezpiecznie założyć, że narzędzie w3c nie zostało jeszcze zaktualizowane i zawiera obsługę SRI
Josh_at_Savings_Champion


72
Opiekun W3C HTML Checker (aka validator) tutaj. Tak, przepraszam, moduł sprawdzający nie wie jeszcze nic o integrityatrybucie. Ale wkrótce dodam obsługę tego, zgodnie z żądaniem w github.com/validator/validator/issues/151 . Możesz więc zasubskrybować ten problem, aby otrzymywać powiadomienia o wylądowaniu.
sideshowbarker

7
OnlineWebCheck.com obsługuje integrityatrybut (jestem opiekunem tego kontrolera).
Albert Wiersch

112

integralność - określa wartość skrótu zasobu (np. sumy kontrolnej), którą należy dopasować, aby przeglądarka go wykonała. Hash zapewnia, że ​​plik nie został zmodyfikowany i zawiera oczekiwane dane. W ten sposób przeglądarka nie będzie ładować różnych (np. Złośliwych) zasobów. Wyobraź sobie sytuację, w której twoje pliki JavaScript zostały zhakowane w CDN i nie było możliwości, aby to wiedzieć. Atrybut integralności zapobiega ładowaniu treści, które nie są zgodne.

Nieprawidłowy SRI zostanie zablokowany (narzędzia dla programistów Chrome), niezależnie od pochodzenia. Poniżej przypadku NON-CORS, gdy atrybut integralności nie jest zgodny:

wprowadź opis zdjęcia tutaj

Integralność można obliczyć za pomocą: https://www.srihash.org/ Lub wpisując w konsoli ( link ):

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

crossorigin - określa opcje używane, gdy zasób jest ładowany z serwera innego pochodzenia. (Zobacz CORS (wspólne udostępnianie zasobów) tutaj: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ). Skutecznie zmienia żądania HTTP wysyłane przez przeglądarkę. Jeśli zostanie dodany atrybut „crossorigin” - spowoduje to dodanie pary klucz-wartość pochodzenia <ORIGIN> do żądania HTTP, jak pokazano poniżej.

wprowadź opis zdjęcia tutaj

crossorigin może być ustawiony na „anonimowy” lub „poświadczenia użytkowania”. Oba spowodują dodanie pochodzenia: do żądania. Ten ostatni zapewni jednak sprawdzenie poświadczeń. Brak atrybutu crossorigin w tagu spowoduje wysłanie żądania bez źródła: pary klucz-wartość.

Oto przypadek, gdy żądamy „poświadczeń użytkowania” od 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>

Przeglądarka może anulować żądanie, jeśli niepoprawnie ustawiono crossorigin.

wprowadź opis zdjęcia tutaj

Linki
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML / Element / link

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


6
Bardzo przydatna odpowiedź!
Emiel Koning

4
Dzięki za odpowiedź. Uwielbiam szczegóły techniczne!
Anh Tran

Jak możemy stwierdzić, czy integralność pliku nie jest jeszcze modyfikowana? Jakakolwiek rada?
vadi taslim

@ yon.fun: nie sugeruj edycji, aby dodać własne linki. Jesteśmy bardzo wrażliwi na ewentualny spam, nawet jeśli Twoje treści są cenne.
halfer

1

Technicznie atrybut Integrity pomaga właśnie w tym - umożliwia prawidłową weryfikację źródła danych. Oznacza to, że pozwala jedynie przeglądarce zweryfikować liczby w odpowiednim pliku źródłowym z kwotami żądanymi przez plik źródłowy znajdujący się na serwerze CDN.

Sięgając nieco głębiej, w przypadku ustalonej zaszyfrowanej wartości skrótu tego źródła i jej sprawdzonej zgodności z predefiniowaną wartością w przeglądarce - kod jest wykonywany, a żądanie użytkownika jest pomyślnie przetwarzane.

Atrybut Crossorigin pomaga programistom zoptymalizować wydajność CDN, chroniąc jednocześnie kod witryny przed złośliwymi skryptami.

W szczególności Crossorigin pobiera kod programu witryny w trybie anonimowym, bez pobierania plików cookie ani wykonywania procedury uwierzytelniania. W ten sposób zapobiega wyciekom danych użytkownika podczas pierwszego ładowania strony na konkretny serwer CDN, który oszustów sieciowych może łatwo zastąpić adresy.

Źródło: https://yon.fun/what-is-link-integrity-and-crossorigin/

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.