link stylesheet: integrity & crossorigin

Приклад:

<link href="/css/bootstrap.min.css" rel="stylesheet" 
      integrity="sha384-QWTKZyjpPEjIS...hW+ALEwIH" 
      crossorigin="anonymous">

• Атрибут integrity гарантує, що CSS-файл не був змінений.

• Атрибут crossorigin="anonymous" забезпечує завантаження ресурсу без облікових даних, якщо він розташований на іншому сервері.

Це поєднання часто використовується для зовнішніх бібліотек (наприклад, CDN).

Елементи integrity і crossorigin у цьому контексті забезпечують додатковий рівень безпеки та правильне завантаження ресурсу, особливо якщо він завантажується з іншого домену.

1. integrity

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

• Формат значення:

  • sha384-<хеш>: Використовується алгоритм SHA-384 для створення хешу.

  • Хеш — це унікальний підпис вмісту файлу.

• Як працює:

  1. Браузер завантажує ресурс за вказаним URL.

  2. Браузер обчислює хеш ресурсу.

  3. Якщо отриманий хеш збігається з вказаним у integrity, браузер використовує ресурс.

  4. Якщо хеші не збігаються, браузер блокує ресурс.

• Приклад:

  integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"

  Тут sha384 — алгоритм хешування, а далі йде сам хеш.

2. crossorigin

Атрибут crossorigin вказує, як здійснювати обмін ресурсами між різними доменами (CORS — Cross-Origin Resource Sharing). Він необхідний, якщо ресурс завантажується з іншого домену або використовується разом із атрибутом integrity.

• Значення:

  • anonymous: Не передає облікові дані (cookies, сесії) при запиті до стороннього ресурсу.

  • use-credentials: Передає облікові дані при запиті, але використовується рідше.

• Як працює:

  • Якщо завантажується ресурс з іншого домену, браузер використовує політику CORS для визначення доступу до ресурсу.

  • anonymous дозволяє безпечне завантаження ресурсу без передачі чутливих даних.

• Приклад:

  crossorigin="anonymous"