Generator SRI – atrybut integrity dla script i link

Q: Którego algorytmu użyć?

SHA 384 to typowy wybór i to, co publikuje większość CDN. SHA 256 i SHA 512 też są obsługiwane przez wszystkie nowoczesne przeglądarki. MD5 i SHA 1 nie są dozwolone w SRI.

Q: Hash jest poprawny, a przeglądarka i tak blokuje plik. Dlaczego?

Sprawdź, czy serwer wysyła Access Control Allow Origin i czy znacznik ma crossorigin . Upewnij się też, że CDN serwuje te same bajty: inna wersja, automatyczny minifikator albo brak końcowego znaku nowej linii zmieniają hash.

Q: Czy SRI działa dla obrazów lub fontów?

Atrybut integrity jest obsługiwany w <script i <link rel="stylesheet" oraz w <link rel="preload" lub modulepreload dla tych zasobów . Obrazy i fonty nie mogą go używać.

Generator hashy SRI

Generuj hashe Subresource Integrity (SRI) sha384 dla pliku JavaScript lub CSS i kopiuj gotowe atrybuty integrity i crossorigin – lokalnie w przeglądarce.

Wklej zawartość pliku albo otwórz sam plik: to narzędzie nie pobiera adresów URL. Odczytanie skryptu z innej strony wymagałoby zgody tamtego serwera (CORS) albo naszego serwera, który pobrałby go za ciebie – a nic, co tu hashujesz, nie opuszcza twojej przeglądarki. Hashuj dokładnie ten plik, który będziesz serwować.

Hashuj Wklejony kod Pliki

Zawartość skryptu lub arkusza stylów

Tekst jest hashowany jako UTF-8. Przeglądarki zamieniają windowsowe końce linii (CRLF) na LF we wklejonym tekście, a zmiana jednego bajtu psuje hash: w razie wątpliwości otwórz sam plik.

Algorytmy SHA-256 SHA-384 (zalecany) SHA-512

Znacznik Adres URL zasobu do fragmentu kodu (opcjonalnie) crossorigin

URL jest tylko wpisywany do fragmentu kodu, nigdy nie jest odpytywany. Zostaw puste, aby użyć nazwy pliku.

Sprawdź istniejącą wartość integrity (opcjonalnie)

Jak wygenerować hash SRI

W sekcji Hashuj wybierz Wklejony kod albo Pliki.
Wklej dokładną zawartość skryptu lub arkusza stylów w pole Zawartość skryptu lub arkusza stylów i kliknij Generuj hash SRI albo upuść jeden lub kilka plików .js i .css na pole upuszczania. Hashe aktualizują się podczas pisania.
Zostaw zaznaczony SHA-384 (zalecany) albo dodaj SHA-256 i SHA-512. Każdy zaznaczony algorytm dodaje do wartości jeden token.
Wybierz Znacznik (automatycznie z nazwy pliku, <script>, <script type="module"> lub <link rel="stylesheet">), wpisz Adres URL zasobu do fragmentu kodu (opcjonalnie) i wybierz tryb crossorigin.
Skopiuj wartość integrity albo cały znacznik.
Aby sprawdzić znacznik, którego już używasz, wklej jego wartość albo cały znacznik w pole Sprawdź istniejącą wartość integrity (opcjonalnie).

Do czego służy Subresource Integrity

Gdy strona wczytuje skrypt z CDN, przeglądarka ufa wszystkiemu, co zwróci tamten serwer. Jeśli CDN zostanie przejęty albo plik zmieniony, zmodyfikowany kod działa z pełnym dostępem do twojej strony. Subresource Integrity (W3C SRI) zamyka tę lukę: publikujesz oczekiwany hash pliku w atrybucie integrity, przeglądarka hashuje to, co pobierze, i odmawia uruchomienia skryptu lub zastosowania arkusza stylów, jeśli wartości się różnią.

<script src="https://cdn.example.com/lib.min.js"
        integrity="sha384-H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO"
        crossorigin="anonymous"></script>

Wartość to nazwa algorytmu, myślnik i zakodowany w Base64 skrót bajtów pliku. Powyższy przykład to hash kodu alert('Hello, world.'); ze specyfikacji SRI. Gdy podano kilka hashy, przeglądarki biorą pod uwagę tylko najsilniejszy obecny algorytm i akceptują plik, jeśli pasuje dowolny hash tego algorytmu. Dzięki temu strona może podczas wdrożenia podać dwie wersje pliku.

Dlaczego crossorigin jest wymagany

W przypadku pliku z innego originu przeglądarka może sprawdzić jego integralność tylko wtedy, gdy odpowiedź zostanie pobrana w trybie CORS. Znacznik potrzebuje więc atrybutu crossorigin, a serwer musi odpowiedzieć nagłówkiem Access-Control-Allow-Origin. Dla publicznych CDN używaj anonymous (bez ciasteczek); use-credentials służy do rzadkich, prywatnych zasobów. Bez CORS przeglądarka zablokuje plik, zamiast wczytać go bez sprawdzenia.

Dlaczego to narzędzie nie pobiera adresów URL

Narzędzie hashuje wyłącznie kod, który wkleisz, lub pliki, które otworzysz. Pobranie skryptu z jego adresu w obrębie strony działałoby tylko wtedy, gdy tamten serwer pozwala na odczyty z innych originów, a obejście tego wymagałoby serwera, który pobrałby plik za ciebie – i widziałby też, co hashujesz. Tutaj wszystko działa w twojej przeglądarce. Najprościej pobrać dokładnie ten plik, do którego będziesz się odwoływać (tę samą wersję i ten sam zminifikowany build), i otworzyć go tutaj.

Najczęściej zadawane pytania

Którego algorytmu użyć?

SHA-384 to typowy wybór i to, co publikuje większość CDN. SHA-256 i SHA-512 też są obsługiwane przez wszystkie nowoczesne przeglądarki. MD5 i SHA-1 nie są dozwolone w SRI.

Hash jest poprawny, a przeglądarka i tak blokuje plik. Dlaczego?

Sprawdź, czy serwer wysyła Access-Control-Allow-Origin i czy znacznik ma crossorigin. Upewnij się też, że CDN serwuje te same bajty: inna wersja, automatyczny minifikator albo brak końcowego znaku nowej linii zmieniają hash.

Dlaczego wklejony kod daje inny hash niż plik?

Przeglądarki zamieniają w polach tekstowych windowsowe końce linii (CRLF) na LF, a edytor może dodać lub usunąć znacznik BOM albo końcowy znak nowej linii. Otwórz sam plik, aby zhashować jego dokładne bajty.

Czy potrzebuję SRI dla plików z własnej domeny?

SRI chroni przed zmianami wprowadzonymi po obliczeniu hasha, więc najbardziej przydaje się przy zewnętrznych hostach. Dla własnych plików zwykle wygodniejszy jest bundler, który generuje hashe podczas budowania.

Czy SRI działa dla obrazów lub fontów?

Atrybut integrity jest obsługiwany w <script> i <link rel="stylesheet"> (oraz w <link rel="preload"> lub modulepreload dla tych zasobów). Obrazy i fonty nie mogą go używać.