Когда ты подключаешь скрипт с внешнего CDN, ты доверяешь этому CDN. Если CDN взломают и подменят файл, твои пользователи получат вредоносный код. SRI решает эту проблему. ## Как это работает ```html ``` Атрибут **crossorigin="anonymous"** обязателен для cross-origin ресурсов, чтобы браузер мог прочитать содержимое файла для проверки хеша. ## Генерация хеша ```bash # В терминале: вычислить SRI-хеш для файла cat library.js | openssl dgst -sha384 -binary | openssl base64 -A # Результат: oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC ``` ```javascript // Программно в Node.js const crypto = require('crypto'); const fs = require('fs'); function generateSRI(filePath, algorithm = 'sha384') { const fileContent = fs.readFileSync(filePath); const hash = crypto.createHash(algorithm).update(fileContent).digest('base64'); return `${algorithm}-${hash}`; } console.log(generateSRI('./library.js')); // sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC ``` ## Поддержка нескольких хешей Можно указать несколько хешей через пробел. Браузер примет файл, если хотя бы один совпадёт (полезно при обновлении файла): ```html ``` ## SRI для CSS Работает точно так же: ```html ``` ## Webpack/Vite автоматизация Webpack плагин автоматически добавляет SRI: ```javascript // webpack.config.js const SriPlugin = require('webpack-subresource-integrity'); module.exports = { output: { crossOriginLoading: 'anonymous' // обязательно для SRI }, plugins: [ new SriPlugin({ hashFuncNames: ['sha384'], enabled: process.env.NODE_ENV === 'production' }) ] }; ``` --- ## 📌 Реальные кейсы **CDN-зависимости**: Bootstrap, jQuery, Lodash с CDN всегда подключай с SRI. Большинство CDN (cdnjs, jsDelivr, unpkg) предоставляют SRI-хеши на своих сайтах. **Supply chain атаки**: В 2018 году взломали npm-пакет `event-stream`, добавив вредоносный код для кражи биткоинов. SRI бы заблокировал загрузку изменённого файла. **CSP + SRI**: можно в Content Security Policy потребовать SRI для всех скриптов: ``` Content-Security-Policy: require-sri-for script style ``` --- ## Частые ошибки ❌ Забыть `crossorigin="anonymous"` для cross-origin ресурсов: ```html ``` ✅ Всегда добавлять crossorigin для внешних ресурсов: ```html ``` ❌ Использовать устаревший алгоритм sha256, когда доступен sha384: ✅ Предпочитать **sha384** или **sha512** как более стойкие. --- ## Резюме - **SRI** проверяет целостность внешних скриптов и стилей через хеш в атрибуте `integrity` - Если хеш не совпадает, браузер **блокирует выполнение** файла - Атрибут **crossorigin="anonymous"** обязателен для cross-origin ресурсов - Защищает от компрометации CDN и supply chain атак - Webpack/Vite плагины автоматизируют генерацию SRI-хешей ---

Что такое Subresource Integrity (SRI)?