Как подключить сторонний скрипт с проверкой Subresource Integrity

Subresource Integrity проверяет содержимое подключённого файла по хешу. Зафиксируйте версию скрипта, добавьте integrity и проверьте отказ при изменении файла.

Что должно получиться

Страница использует ожидаемый файл, а незапланированная замена не проходит проверку браузера. Для этого в разметке сохраняют хеш конкретного содержимого. Если полученные данные ему не соответствуют, ресурс не используется как обычно.

Проверка совпадения не оценивает качество и безопасность самого кода. Если вы одобрили опасный скрипт и рассчитали для него хеш, совпадение подтвердит именно этот скрипт. Поэтому сначала выбирают доверенный источник и проверяют нужный выпуск, а затем фиксируют его содержимое.

Из чего это складывается

Что именно проверяется

Значение integrity содержит название алгоритма, дефис и результат вычисления в base64. Поддерживаются SHA-256, SHA-384 и SHA-512. Нельзя заменить такое значение обычной контрольной суммой из другой системы или вставить шестнадцатеричную строку без нужного преобразования.

Изменение пробела, комментария или окончания строки может изменить хеш. Считать его нужно по тому файлу, который браузер действительно получит. Если после вычисления сборщик ещё сжимает или переписывает исходный код, порядок подготовки нарушен: фиксируйте окончательный ресурс.

Как это сделать по шагам

1. Выберите скрипт с понятным источником и управляемой версией. Определите, какие функции страницы зависят от его успешного подключения.
2. Получите точный файл из доверенного выпуска. Если поставщик публикует проверяемые данные о целостности, сопоставьте их с выбранной версией.
3. Рассчитайте хеш окончательного файла подходящим инструментом. Сохраните алгоритм, значение и адрес ресурса вместе.
4. Добавьте integrity к подключению. Для ресурса с другого источника настройте crossorigin и убедитесь, что источник разрешает нужную загрузку через CORS.
5. Откройте тестовую страницу и проверьте работу зависимой функции. Изучите ошибки браузера, если ресурс не используется.
6. В тестовой копии измените файл, оставив прежний хеш. Убедитесь, что проверка отклоняет изменённый вариант и интерфейс не сообщает ложный успех.
7. Верните согласованную пару и повторите проверку. Включите обновление хеша в порядок выпуска новой версии.

Как получить значение через OpenSSL

Если OpenSSL доступен в вашей рабочей среде, для файла vendor.js можно использовать команду: openssl dgst -sha384 -binary vendor.js | openssl base64 -A. Она вычисляет SHA-384 в бинарном виде и кодирует результат в base64. К полученной строке для атрибута добавляют префикс sha384-.

Имя vendor.js в команде заменяют именем проверяемого файла. Не вычисляйте хеш по тексту страницы с описанием библиотеки или по архиву целиком, если подключаете отдельный скрипт.

Проверяемый учебный пример

Для отдельного учебного файла demo.js возьмём ровно строку window.demoReady = true; с одним завершающим переводом строки LF, в UTF-8 без BOM. Для этих байтов значение атрибута равно sha384-XmKrMR2rwLkfU6W6XQO16FoWZUjZioQ0325cvKcf8TERbWoS0u/V/YLDgBBtg/X0. При другом окончании строки значение изменится.

Подключение этого учебного файла может выглядеть так: <script src='demo.js' integrity='sha384-XmKrMR2rwLkfU6W6XQO16FoWZUjZioQ0325cvKcf8TERbWoS0u/V/YLDgBBtg/X0' crossorigin='anonymous'></script>. Это хеш конкретного демонстрационного содержимого, а не значение для вашей библиотеки. Для рабочего ресурса вычислите собственное.

Подключение с другого источника

При загрузке с другого источника проверка целостности связана с CORS. Источник определяется схемой, именем хоста и портом: другой поддомен тоже может потребовать CORS. Одного integrity недостаточно: сервер ресурса должен разрешать доступ соответствующим заголовком, а подключение должно использовать подходящий режим. Для обычного публичного скрипта часто применяют crossorigin='anonymous'.

Если поставщик не поддерживает нужное поведение, не пытайтесь убрать защиту браузера. Рассмотрите другой согласованный способ размещения ресурса с учётом условий его использования. Проверьте отдельно ограничения CSP: совпадение хеша SRI само по себе не отменяет другие правила страницы.

Частые ошибки

Закрепить хеш у постоянно меняющегося адреса

Если по одному адресу поставщик отдаёт новые сборки, очередное обновление перестанет совпадать с ожидаемым содержимым. Выбирайте управляемый выпуск и заранее определите порядок обновления.

Пересчитывать хеш после каждого неожиданного отказа

Сначала выясните причину изменения. Автоматическое принятие любого нового содержимого убирает смысл проверки. Сопоставьте файл с ожидаемым выпуском, затем осознанно обновите разметку.

Проверить загрузку, но забыть зависимое действие

Файл может загружать дополнительные ресурсы, которые этим атрибутом не фиксируются автоматически. Разберите состав зависимости и проверьте реальную функцию страницы. Наличие integrity у одного script не означает защиту всех последующих подключений.

Как проверить

• Адрес, версия и хеш относятся к одному окончательному файлу.
• В разметке нет случайного пробела внутри значения хеша.
• Подключение с другого источника проходит требуемые проверки CORS.
• При ожидаемом содержимом нужная функция работает.
• Контрольное изменение в тестовой копии вызывает отказ.
• При отказе страница не утверждает, что зависимая операция завершилась.
• Порядок обновления включает согласованную замену файла и хеша.

Если загрузка не проходит, проверьте правила CORS, политику CSP и порядок выпуска изменений. Помощь с подключением доступна в разделе «Разработка».

Вопросы и ответы

Хеш подтверждает безопасность библиотеки?

Он подтверждает совпадение с ожидаемым содержимым. Оценка источника, кода и необходимого доступа остаётся отдельной задачей.

Почему проверка сломалась после сборки?

Сборщик мог изменить файл после вычисления хеша. Повторите расчёт по окончательному ресурсу и проверьте порядок подготовки.

Можно ли использовать хеш из учебного примера?

Только для указанных байтов демонстрационного файла. Для любого другого содержимого нужно своё значение.

Зачем нужен crossorigin?

Для подключения с другого источника требуется подходящий режим CORS и разрешение на стороне сервера ресурса. Атрибут согласуют с этой настройкой.

SRI заменяет CSP?

Нет. Эти механизмы решают разные задачи и могут действовать одновременно. Проверяйте причину блокировки каждого конкретного ресурса.

Нужно ли проверять отказ вручную?

Да, в отдельной тестовой копии полезно изменить файл без обновления хеша. Так вы увидите и реакцию браузера, и поведение зависимой функции.