Ранее я писал о веб-безопасности на высоком уровне и о способах повышения безопасности и уменьшения уязвимостей, не зависящих от фреймворка.
Теперь я хочу погрузиться немного глубже в уязвимости. В этой небольшой заметке мы рассмотрим подделку межсайтовых запросов (CSRF) и встроенную помощь, которую вы получаете при использовании Angular.
Защита от подделки межсайтовых запросов (CSRF)
В предыдущем посте вы узнали, что атака CSRF происходит, когда агитатор использует вашу активную сессию на доверенном сайте для выполнения несанкционированных действий. Мы также узнали, что браузеры имеют встроенную поддержку для смягчения атак с помощью атрибутов SameSite в cookies, проверки подлинности запроса на бэкенде и потенциальной отправки фронтендом маркера CSRF на бэкенд для каждого запроса.
Стратегии смягчения последствий в основном требуют работы на стороне сервера, за исключением отправки маркера CSRF, где клиент должен отправить маркер обратно таким образом, чтобы бэкенд мог его проверить.
При использовании CSRF-токенов необходимо привязать токен к сессии пользователя, чтобы бэкенд мог подтвердить запрос. Наиболее распространенными способами являются шаблоны Synchronizer Token Pattern и Double Submit Cookie.
Шаблон синхронизатора маркеров
Шаблон синхронизирующего маркера требует, чтобы бэкенд хранил информацию о сессии пользователя и сопоставлял ее с маркером CSRF для проверки достоверности. Этот шаблон может использоваться в SPA, но лучше подходит для веб-приложений, использующих формы с post-методами для запросов, таких как:
<form action="https://myfavekdramas.com/fave-form" method="POST">
<label for="name">What is your favorite K-Drama?</label>
<input type="text" id="name" name="name">
<button>Save my favorite K-Drama</button>
</form>
Отправка этой формы POSTs на https://myfavekdramas.com/fave-form с использованием типа содержимого application/x-www-form-urlencoded. CSRF особенно восприимчив при использовании неJSON данных.
Шаблон двойной отправки cookie
К сожалению, этот шаблон не подразумевает двойное печенье — это двойная подача. Печальные новости для любителей шоколадного печенья. 🍪🍪😢 Но есть и хорошая новость: шаблон «Двойная отправка печенья» не требует от бэкенда отслеживания сессии пользователя до CSRF-токена.
В этом шаблоне CSRF-токен является отдельным файлом cookie от идентификатора сессии пользователя. Клиент отправляет CSRF-токен в каждом запросе, а бэкенд проверяет соответствие значений куки CSRF-токена и токена в запросе. Этот паттерн более распространен для SPA.
Поддержка CSRF в Angular
Angular имеет встроенную поддержку разновидности шаблона Double Submit Cookie Pattern, где CSRF-токен автоматически добавляется в качестве HTTP-заголовка для каждого запроса бэкенда, если у вас есть CSRF-токен в cookie. Отлично!
Модуль HttpClientXsrfModule автоматически добавляет перехватчик для ваших HTTP-запросов. Перехватчик получает CSRF-токен из куки сессии с именем XSRF-TOKEN и добавляет значение токена к исходящим запросам в HTTP-заголовке с именем X-XSRF-TOKEN. Затем ваш бэкенд отвечает за проверку соответствия значений cookie и HTTP-заголовка.
Чтобы добавить этот удобный помощник, добавьте HttpClientModule и HttpClientXsrfModule в массив imports вашего модуля.
Если вам не нравятся имена по умолчанию, у вас есть возможность настроить имена cookie и HTTP-заголовка следующим образом:
imports: [
HttpClientModule,
HttpClientXsrfModule.withOptions({
cookieName: 'Pecan-Sandies',
headerName: 'Top-Of-Page'
})
]
Узнайте больше о CSRF и создании приложений с помощью Angular
Следите за четвертым и последним постом этой серии, в котором мы погрузимся в тему межсайтового скриптинга (XSS) и узнаем, как встроенные механизмы безопасности Angular защищают нас.
Если вам понравилась эта статья, возможно, вас заинтересуют эти ссылки.
- Безопасность: Документация по защите XSRF от Angular
- Как построить микрофронтенды с помощью федерации модулей в Angular
- Три способа конфигурирования модулей в вашем приложении Angular
Не забывайте следить за нами в Twitter и подписываться на наш канал YouTube, чтобы получить еще больше отличных уроков. Мы также будем рады услышать вас! Пожалуйста, оставляйте комментарии ниже, если у вас есть вопросы или вы хотите поделиться тем, какой учебник вы хотели бы увидеть следующим.