Каковы атрибуты целостности и происхождения?

Bootstrapcdn недавно изменил свои ссылки. Теперь он выглядит следующим образом:

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'; return false;" 
rel="stylesheet" 
integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
crossorigin="anonymous">

Что означают атрибуты integrity и crossorigin? Как они влияют на загрузку таблицы стилей?

Ответ 1

Оба атрибута были добавлены в Bootstrap CDN для реализации Integrity Subresource.

Subresource Integrity определяет механизм, с помощью которого пользовательские агенты могут проверять, что извлеченный ресурс был доставлен без неожиданной манипуляции Справка

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

Атрибут Crossorigin присутствует, когда запрос загружается с использованием "CORS", который теперь является требованием проверки SRI, когда он не загружен из "того же самого происхождения". Дополнительная информация о crossorigin

Подробнее о внедрении CDNs Bootstrap

Ответ 2

целостность - определяет хеш-значение ресурса (например, контрольной суммы), который должен соответствовать браузеру для его выполнения. Хеш гарантирует, что файл не был изменен и содержит ожидаемые данные. Таким образом, браузер не будет загружать другой (например, вредоносный) ресурс. Представьте себе ситуацию, в которой ваши файлы JavaScript были взломаны на CDN, и не было никакой возможности узнать это. Атрибут целостности предотвращает загрузку содержимого, которое не соответствует.

Неверный SRI будет заблокирован (Chrome Developer-Tools), независимо от перекрестного происхождения. Ниже случай NON-CORS, когда атрибут целостности не совпадает:

Целостность можно рассчитать, используя: https://www.srihash.org/ Или введите в консоли (ссылка):

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

crossorigin - определяет параметры, используемые при загрузке ресурса с сервера из другого источника. (См. CORS (Обмен ресурсами между источниками) здесь: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). Это эффективно изменяет HTTP-запрос, отправленный браузером. Если добавлен атрибут 'crossorigin' - это приведет к добавлению origin: & lt; ORIGIN & gt; пары ключ-значение в HTTP-запрос, как показано ниже.

Параметр crossorigin может быть установлен как "анонимный" или "использовать учетные данные". И то и другое приведет к добавлению origin: в запрос. Последний, однако, обеспечит проверку учетных данных. Отсутствие перекрестного атрибута в теге приведет к отправке запроса без источника: пара ключ-значение.

Вот случай, когда запрашивается "use-credentials" из 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>

Браузер может отменить запрос, если неправильно задано перекрестное происхождение.

Ссылки
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Блоги
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity