Особенности CSP в работе Angular приложений

Вот важная новость с фронта ИИ: erst_dev 10 минут назад Краткое содержание статьи Особенности CSP в работе Angular приложений Средний 13 мин 128 Angular * Я продолжаю писать статьи по темам, с которыми очень долго разбираюсь в силу определённых обстоятельств. В этот раз я по кусочкам собрал огромный пазл, в котором участвуют и браузер, и фреймворк воедино и хочу разложить эти знания по полочкам, разжевать максимально подробно. Опять же пишу для себя, чтобы, когда всё забудется, а это непременно случится, вернуться сюда и быстро всё вспомнить и если эта статья кому-то поможет - это просто прекрасно.

Дополняющим, уточняющим, при этом подробным и понятным комментариям и замечаниям буду только радПлан:Что такое XSS (в общих чертах)Что такое CSS Injection (в общих чертах)Что такое CSPInline код и ‘unsafe-inline’А что такое nonce-<значение>? Конфликт Angular и CSPКак подружить Angular и CSPЧто такое XSS (Cross-Site Scripting) в общих чертахНачнём с фундаментов проблемы. Есть такая веб уязвимость XSS (Cross-Site Scripting).

Технические детали

Я не буду совсем подробно писать про всевозможные варианты осуществления этой атаки (а XSS это и уязвимость, и вид атаки на веб приложение), опишу вершину айсберга для понимания нашей темы. В общих чертах XSS это внедрение вредоносного кода на HTML-страницу, которую открывает другой пользователь, разными способами. Расскажу о самом понятном случае (stored XSS): представьте, что у нас есть сайт-форум, он никак не защищён для простоты и какой-то особо одарённый шутник, назовём его "Хакер", вместо текста сообщения вписал в чат , отправил своё сообщение на сервер, оно сохранилось в БД, затем другой пользователь "Жертва" на этом форуме заходит на эту же страницу и браузер подгружает все сообщения на ней.

Что произойдёт, когда браузер дойдёт до сообщения от "Хакера"? Для этого нужно понять откуда у нас вообще появляется страница сайта. Зайдите на сайт npm, нажмите F12, зайдите во вкладку Network, в фильтрах поставьте "All", чтобы видеть все запросы.

Нажмите на самый первый запрос и вы увидите получение читаемой вами страницы. Что в нём особенного? Почему это браузер решил обработать этот ответ на этот запрос именно парсингом и отрисовкой страницы?

Отраслевые последствия

В разделе Response headers вы увидите вот такой заголовок,Content-Type: text/htmlкоторый вам прислали с сервера. Я не буду сейчас подробно расписывать какие значения может принимать заголовок Content-Type, это опять же отдельная тема для изучения (бесконечная и вечно забывающаяся). В нашем случае нам важно именно это значение text/html.

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

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.