Генератор SRI-хешу

Q: Який алгоритм використовувати?

SHA 384 – звичайний вибір, і саме його публікує більшість CDN. SHA 256 і SHA 512 також підтримують усі сучасні браузери. MD5 і SHA 1 у SRI не дозволені.

Q: Мій хеш правильний, але браузер усе одно блокує файл. Чому?

Перевірте, чи сервер надсилає Access Control Allow Origin і чи тег має crossorigin . Також переконайтеся, що CDN віддає ті самі байти: інша версія, автоматичний мініфікатор чи відсутній кінцевий перенос рядка змінюють хеш.

Q: Чому вставлений код дає інший хеш, ніж файл?

Браузери перетворюють закінчення рядків Windows CRLF на LF у текстових полях, а редактор може додати чи прибрати маркер порядку байтів або кінцевий перенос рядка. Відкрийте сам файл, щоб хешувати його точні байти.

Q: Чи працює SRI для зображень або шрифтів?

Атрибут integrity підтримується в <script і <link rel="stylesheet" а також у <link rel="preload" чи modulepreload для них . Зображення та шрифти його використовувати не можуть.

Згенеруйте SRI-хеші sha384 (Subresource Integrity) для файлу JavaScript чи CSS і скопіюйте готові атрибути integrity та crossorigin. Усе локально.

Вставте вміст файлу або відкрийте сам файл: цей інструмент не завантажує URL-адреси. Для читання скрипта з іншого сайту потрібен був би дозвіл цього сервера (CORS) або наш власний сервер, який отримав би його за вас, а те, що ви хешуєте тут, ніколи не залишає ваш браузер. Хешуйте саме той файл, який ви надаватимете.

Хешувати Вставлений код Файли

Вміст скрипта чи таблиці стилів

Текст хешується як UTF-8. Браузери перетворюють закінчення рядків Windows (CRLF) на LF у вставленому тексті, а один змінений байт ламає хеш: якщо сумніваєтеся, відкрийте сам файл.

Алгоритми SHA-256 SHA-384 (рекомендовано) SHA-512

Тег URL ресурсу для фрагмента (необов’язково) crossorigin

URL лише записується у фрагмент, його ніколи не запитують. Залиште поле порожнім, щоб використати назву файлу.

Перевірити наявне значення integrity (необов’язково)

Як згенерувати SRI-хеш

У розділі Хешувати виберіть Вставлений код або Файли.
Вставте точний вміст скрипта чи таблиці стилів у поле Вміст скрипта чи таблиці стилів і натисніть Згенерувати SRI-хеш або перетягніть один чи кілька файлів .js та .css в зону для файлів. Хеші оновлюються під час введення.
Залиште позначеним SHA-384 (рекомендовано) або додайте SHA-256 і SHA-512. Кожен позначений алгоритм додає до значення один токен.
Виберіть Тег (автоматично за назвою файлу, <script>, <script type="module"> або <link rel="stylesheet">), введіть URL ресурсу для фрагмента (необов’язково) і виберіть режим crossorigin.
Скопіюйте значення integrity або повний тег.
Щоб перевірити тег, який ви вже використовуєте, вставте його значення або весь тег у Перевірити наявне значення integrity (необов’язково).

Що робить Subresource Integrity

Коли сторінка завантажує скрипт із CDN, браузер довіряє всьому, що повертає цей сервер. Якщо CDN зламано або файл змінено, змінений код виконується з повним доступом до вашої сторінки. Subresource Integrity (SRI від W3C) закриває цю прогалину: ви публікуєте очікуваний хеш файлу в атрибуті integrity, браузер хешує те, що завантажив, і відмовляється виконувати скрипт чи застосовувати таблицю стилів, якщо ці два значення відрізняються.

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

Значення складається з назви алгоритму, дефіса та закодованого в Base64 дайджесту байтів файлу. Цей приклад – хеш alert('Hello, world.'); зі специфікації SRI. Коли вказано кілька хешів, браузери зважають лише на найсильніший наявний алгоритм і приймають файл, якщо збігається будь-який хеш цього алгоритму. Так сайт може перелічити дві версії файлу під час поступового розгортання.

Чому потрібен crossorigin

Для файлу з іншого джерела браузер може перевірити його цілісність лише тоді, коли відповідь отримано в режимі CORS, тому тег потребує атрибута crossorigin, а сервер має відповідати заголовком Access-Control-Allow-Origin. Для публічних CDN використовуйте anonymous (без cookie); use-credentials призначений для рідкісних приватних ресурсів. Без CORS браузер блокує файл, а не завантажує його без перевірки.

Чому цей інструмент не завантажує URL

Цей інструмент лише хешує код, який ви вставляєте, або файли, які відкриваєте. Завантаження скрипта за його URL на самій сторінці спрацювало б лише тоді, коли той сервер дозволяє читання з інших джерел, а щоб обійти це, потрібен був би сервер, який отримав би файл за вас і так само побачив би, що ви хешуєте. Усе тут виконується у вашому браузері. Найпростіший спосіб – завантажити точний файл, на який ви посилатиметеся (ту саму версію й ту саму мініфіковану збірку), і відкрити його тут.

Поширені запитання

Який алгоритм використовувати?

SHA-384 – звичайний вибір, і саме його публікує більшість CDN. SHA-256 і SHA-512 також підтримують усі сучасні браузери. MD5 і SHA-1 у SRI не дозволені.

Мій хеш правильний, але браузер усе одно блокує файл. Чому?

Перевірте, чи сервер надсилає Access-Control-Allow-Origin і чи тег має crossorigin. Також переконайтеся, що CDN віддає ті самі байти: інша версія, автоматичний мініфікатор чи відсутній кінцевий перенос рядка змінюють хеш.

Чому вставлений код дає інший хеш, ніж файл?

Браузери перетворюють закінчення рядків Windows (CRLF) на LF у текстових полях, а редактор може додати чи прибрати маркер порядку байтів або кінцевий перенос рядка. Відкрийте сам файл, щоб хешувати його точні байти.

Чи потрібен SRI для файлів на моєму домені?

Він захищає від змін, унесених після обчислення хешу, тому найважливіший для сторонніх хостів. Для власних файлів зазвичай простіше використати збирач, який генерує хеші під час збірки.

Чи працює SRI для зображень або шрифтів?

Атрибут integrity підтримується в <script> і <link rel="stylesheet"> (а також у <link rel="preload"> чи modulepreload для них). Зображення та шрифти його використовувати не можуть.