**Проблема без SRI:** Если CDN скомпрометирован или DNS подменён, атакующий может подставить свой JavaScript-файл вместо легитимного. Браузер загрузит и выполнит вредоносный код без вопросов. **Как работает SRI:** ```html ``` Если содержимое файла изменилось (даже один байт), хеш не совпадёт и браузер заблокирует загрузку. **Генерация хеша:** ```bash # Через openssl cat library.js | openssl dgst -sha384 -binary | openssl base64 -A # sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC # Через shasum shasum -b -a 384 library.js | awk '{ print $1 }' | xxd -r -p | base64 ``` ```javascript // Генерация в Node.js const crypto = require('crypto'); const fs = require('fs'); const fileContent = fs.readFileSync('library.js'); const hash = crypto.createHash('sha384').update(fileContent).digest('base64'); console.log(`sha384-${hash}`); ``` **SRI для CSS:** ```html ``` **Множественные хеши (fallback при обновлении):** ```html ``` **Атрибут crossorigin обязателен:** ```html ``` **Автоматизация в Webpack:** ```javascript // webpack.config.js const SriPlugin = require('webpack-subresource-integrity'); module.exports = { output: { crossOriginLoading: 'anonymous', // добавляет crossorigin к тегам }, plugins: [ new SriPlugin({ hashFuncNames: ['sha384'], enabled: process.env.NODE_ENV === 'production', }), ], }; ``` --- ## 📌 Реальные кейсы **Взлом CDN (реальный инцидент с Polyfill.io):** В 2024 году домен `polyfill.io` был продан, и новый владелец начал внедрять вредоносный код через CDN. Миллионы сайтов, подключавших `polyfill.io` без SRI, оказались уязвимы. Сайты с SRI были защищены: хеш не совпадал, браузер блокировал скрипт. **Fallback при блокировке SRI:** ```html ``` --- ## Частые ошибки ❌ Забывать `crossorigin="anonymous"` при использовании SRI: ```html ``` ✅ Всегда добавляй `crossorigin="anonymous"`: ```html ``` ❌ Не обновлять хеш при обновлении библиотеки: ```html ``` ✅ Автоматизируй генерацию SRI через build tools (Webpack, Vite). --- ## Резюме - SRI проверяет целостность файлов с CDN по хешу - Защищает от компрометации CDN, DNS-спуфинга и подмены файлов - Атрибут `crossorigin="anonymous"` обязателен для cross-origin - Автоматизируй генерацию хешей через build tools - Реальный кейс: взлом polyfill.io затронул миллионы сайтов без SRI ---

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