CSRF (Cross-Site Request Forgery) – атака, при которой злоумышленник вынуждает браузер жертвы отправить нежелательный запрос с учётными данными пользователя. Типичный способ защиты – валидация CSRF токена на сервере, сопоставленного с сессией пользователя. Чтобы механизм работал, токен должен передаваться с каждым запросом, включая те, что отправляются через JavaScript.
Если токен хранится в meta-теге, его можно извлечь и добавить в заголовки запросов. Например, при использовании fetch:
Пример:
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
fetch('/some-endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': token
},
body: JSON.stringify({ key: 'value' })
});В случае XMLHttpRequest токен добавляется аналогично:
const xhr = new XMLHttpRequest();
xhr.open('POST', '/some-endpoint');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('X-CSRF-Token', token);
xhr.send(JSON.stringify({ key: 'value' }));Важно не полагаться на автоматическую передачу cookie, особенно если используется SameSite=None. Проверка на стороне сервера должна включать не только наличие токена, но и его соответствие ожидаемому значению. Нельзя допускать, чтобы токен передавался в URL – это открывает путь к утечке через рефереры и журналы запросов.
Для SPAs рекомендуется внедрять токен сразу при загрузке страницы: либо через meta-тег, либо включив его в JSON, возвращаемый от сервера. Также стоит установить защиту на уровне CORS: Access-Control-Allow-Origin должен быть строго ограничен, а credentials – передаваться только при необходимости и с точной настройкой.
Передача CSRF токена – это не просто формальность, а обязательный элемент защиты. Любая ошибка в реализации создаёт уязвимость, которую нельзя устранить средствами браузера или внешними инструментами.
Где найти CSRF токен в HTML-документе
CSRF токен чаще всего внедряется в HTML-документ сервером в момент генерации страницы. Наиболее распространённый способ – размещение токена в скрытом поле формы. Пример:
<input type="hidden" name="csrf_token" value="abc123xyz">
Если токен не находится в форме, его можно искать в мета-тегах в секции <head>:
<meta name="csrf-token" content="abc123xyz">
Некоторые фреймворки, например Django или Laravel, используют именно этот подход для интеграции с JavaScript. В этом случае доступ к токену осуществляется через DOM API:
document.querySelector('meta[name="csrf-token"]').getAttribute('content');
В редких случаях токен вставляется напрямую в JavaScript-блоки, например:
window.csrfToken = "abc123xyz";
Такой токен можно извлечь из глобальной переменной в коде:
window.csrfToken
Для одностраничных приложений токен иногда добавляется в JSON-объект конфигурации, встроенный в HTML:
<script>window.config = {"csrfToken": "abc123xyz"};</script>
Искомое значение доступно по пути window.config.csrfToken. Конкретное имя зависит от реализации, поэтому следует проверять исходный код страницы или документацию используемого фреймворка.
Как извлечь CSRF токен из meta-тега с помощью JavaScript
CSRF токен часто размещается в <meta>-теге внутри <head> документа. Чтобы получить его значение, используется метод document.querySelector. Атрибут name должен совпадать с тем, который установлен на сервере. Например, если токен задан как <meta name="csrf-token" content="abc123">, извлечение выглядит так:
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');Проверка на null через ?. предотвращает ошибки при отсутствии тега. Полученное значение можно передавать в заголовке HTTP-запроса:
fetch('/endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken
},
body: JSON.stringify({ data: 'value' })
});Если используется библиотека, например Axios, токен можно назначить глобально:
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken;Важно убедиться, что тег <meta> загружается до выполнения JavaScript-кода. Это исключает ситуации, при которых document.querySelector возвращает null из-за незавершённой загрузки DOM.
Передача CSRF токена в заголовке запроса fetch
При использовании fetch для отправки запросов к серверу, CSRF токен передаётся в заголовке, что позволяет серверу проверить подлинность источника запроса. Это особенно актуально для POST, PUT, PATCH и DELETE-запросов, изменяющих состояние на сервере.
Для передачи токена в заголовке:
- Получите токен из meta-тега или из cookie.
- Добавьте его в заголовок запроса, например
X-CSRF-Tokenили любой другой, ожидаемый сервером.
Пример:
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
fetch('/some-endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken
},
body: JSON.stringify({ key: 'value' }),
credentials: 'same-origin'
});
- Заголовок
'X-CSRF-Token'должен соответствовать проверке на сервере. - Параметр
credentials: 'same-origin'обязателен для отправки cookies с сессионными данными. - Не используйте fetch без включённой опции credentials, если CSRF токен привязан к сессии.
- Если токен хранится в cookie, можно извлечь его вручную или использовать библиотеку, обрабатывающую cookies.
Серверная часть должна сравнивать полученный токен с сохранённым для текущей сессии. Несовпадение должно приводить к отклонению запроса.
Добавление CSRF токена в тело POST-запроса JSON
При отправке JSON-запросов через JavaScript, CSRF токен нельзя передавать в заголовке Content-Type: application/json, если сервер использует строгое сравнение источников. Токен должен быть включён в само тело запроса, так как заголовки не распознаются как «безопасные» по стандарту SameSite.
Пример передачи токена в теле POST-запроса с использованием fetch:
fetch('/api/endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'same-origin',
body: JSON.stringify({
data: 'значение',
csrf_token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
})
});- Метатег
<meta name="csrf-token" content="...">должен быть включён в HTML-шаблон сервера. credentials: 'same-origin'требуется для включения cookie в запрос (если сессия проверяется по cookie).- Имя поля
csrf_tokenдолжно совпадать с ожидаемым сервером. Например, во Flask по умолчанию –csrf_token, в Django –csrfmiddlewaretoken.
На стороне сервера токен нужно извлекать из тела JSON-запроса до выполнения проверки:
- Во Flask: использовать
request.get_json().get('csrf_token'). - В Django с
@csrf_exemptи кастомной проверкой:json.loads(request.body).get('csrfmiddlewaretoken').
Если используется библиотека защиты (например, Flask-WTF или Django CSRF middleware), потребуется ручная проверка, так как стандартные инструменты ориентированы на формы или заголовки.
Использование CSRF токена при отправке формы через JavaScript
Для защиты от CSRF-атак при отправке формы через JavaScript необходимо явно включать токен в данные запроса. Браузер не добавляет токен автоматически при использовании fetch или XMLHttpRequest, даже если он присутствует в meta-теге.
Один из подходов – считывание значения из <meta name="csrf-token" content="..."> и добавление его в заголовок:
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
fetch('/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': token
},
body: JSON.stringify({ field1: 'value1', field2: 'value2' })
});Если используется FormData, токен нужно добавить вручную, если сервер не принимает его через заголовок:
const form = document.querySelector('#my-form');
const formData = new FormData(form);
formData.append('csrf_token', token);
fetch('/submit', {
method: 'POST',
body: formData
});Путь передачи токена (заголовок или поле формы) зависит от конфигурации серверной части. В Django ожидается заголовок X-CSRFToken, во Flask – поле формы по умолчанию. Уточнять следует по документации фреймворка или middleware.
При использовании Axios добавление токена можно централизовать через интерсептор:
axios.defaults.headers.common['X-CSRF-Token'] = token;Нельзя полагаться на куки: они передаются автоматически, и без проверки токена сервер не сможет отличить легитимный запрос от подделки.
Передача CSRF токена при использовании XMLHttpRequest
При отправке запросов с использованием XMLHttpRequest важно правильно передавать CSRF токен для защиты от атак типа CSRF. Это нужно для того, чтобы сервер мог проверить, что запрос был отправлен с авторизованной сессией, а не злоумышленником.
Для реализации передачи токена необходимо добавить его в заголовки запросов. В большинстве случаев токен хранится в куки браузера или в мета-тегах HTML страницы. Важно правильно извлечь этот токен и передать его с каждым запросом.
Пример кода для отправки CSRF токена с использованием XMLHttpRequest:
var xhr = new XMLHttpRequest();
xhr.open('POST', '/example-endpoint', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken); // Добавление CSRF токена в заголовок
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log('Request was successful');
}
};
xhr.send(JSON.stringify(data));
В этом примере мы передаем CSRF токен в заголовке запроса как ‘X-CSRF-TOKEN’. Токен должен быть получен из мета-тега или куки, если это предусмотрено на сервере.
Важно помнить, что в некоторых случаях сервер может ожидать определенные форматы данных. Например, передача токена может быть реализована через заголовок ‘X-Requested-With’ с указанием значения ‘XMLHttpRequest’, что является дополнительной мерой защиты для идентификации запросов через AJAX.
Кроме того, можно использовать обработку ошибки при отсутствии CSRF токена или его недействительности. Сервер должен вернуть ошибку 403 в случае, если токен отсутствует или некорректен, что предотвратит выполнение нежелательных действий.
Пример обработки ошибки на стороне клиента:
xhr.onerror = function() {
console.error('CSRF token is missing or invalid');
};
В результате правильной реализации передачи CSRF токена через XMLHttpRequest, защита от атак типа CSRF будет обеспечена, что повысит безопасность веб-приложения.
Обработка ошибки 403 при отсутствии CSRF токена
Ошибка 403 возникает, когда сервер не получает CSRF токен в запросе или токен не совпадает с ожидаемым. Это может произойти, если токен не был передан в заголовках запроса или тело запроса при отправке POST, PUT, DELETE запросов с клиентской стороны. Чтобы корректно обработать эту ошибку, важно следовать нескольким ключевым принципам.
Для начала убедитесь, что CSRF токен действительно передается в запросах. Обычно токен передается в заголовке `X-CSRF-Token`, однако его расположение может варьироваться в зависимости от архитектуры вашего приложения. Если токен не найден, сервер возвращает ошибку 403.
Когда ошибка 403 получена, клиентская сторона должна правильно реагировать. Если в ответе сервера содержится информация о том, что токен отсутствует или невалиден, важно перезапросить новый токен и повторить операцию. Этот процесс может быть автоматизирован с использованием механизмов, таких как AJAX-запросы для обновления токенов.
Если ошибка происходит при отправке формы или запросе с клиента, необходимо добавить логику для перезапроса токена. При получении 403 можно отправить запрос для получения актуального CSRF токена с сервера, например, через специальный endpoint, и затем повторно отправить оригинальный запрос с новыми данными.
Также рекомендуется внедрить проверку на наличие CSRF токена на клиентской стороне до отправки запроса. В случае его отсутствия или неправильного формата можно прервать выполнение запроса и вывести сообщение для пользователя. Это предотвратит ненужные ошибки и улучшит взаимодействие с пользователем.
Не забывайте, что в некоторых случаях сервер может использовать дополнительные механизмы защиты, такие как проверка происхождения запросов (реферер, домен). Это дополнительный уровень безопасности, который может помочь при защите от CSRF атак, и важно учитывать его при обработке ошибок.
Интеграция CSRF токена в SPA с использованием фреймворков
Для интеграции CSRF токена в SPA необходимо учитывать особенности работы с HTTP-заголовками. Токен обычно передается сервером в ответе на запросы или при аутентификации, а затем должен быть включен в каждый последующий запрос, который модифицирует данные на сервере.
В фреймворке React CSRF токен можно хранить в локальном хранилище или в cookies. При отправке запросов через библиотеку, такую как Axios, токен должен быть автоматически добавлен в заголовки запросов. Например, можно настроить интерсептор Axios для добавления CSRF токена в каждый запрос:
axios.interceptors.request.use(function (config) {
const token = localStorage.getItem('csrf-token');
if (token) {
config.headers['X-CSRF-TOKEN'] = token;
}
return config;
});
Для Angular аналогичная задача решается с помощью HttpInterceptor. В данном случае CSRF токен можно получить из cookies и добавлять в заголовок запроса:
@Injectable()
export class CsrfInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler): Observable> {
const token = this.cookieService.get('csrf-token');
const cloned = req.clone({ setHeaders: { 'X-CSRF-TOKEN': token } });
return next.handle(cloned);
}
}
Vue.js использует похожий подход, где можно настроить глобальный интерсептор для добавления токена в заголовки. Это можно сделать через axios или встроенные методы Vue:
axios.defaults.headers.common['X-CSRF-TOKEN'] = localStorage.getItem('csrf-token');
Во всех случаях важно удостовериться, что сервер принимает и правильно обрабатывает CSRF токен. Это обычно реализуется на серверной стороне через middleware, который проверяет наличие токена в заголовке и его соответствие значению, сгенерированному сервером при аутентификации.
Кроме того, важно настроить корректное поведение при истечении срока действия токена. Обычно это требует реализации механизма обновления токена через периодические запросы или использование долгосрочных cookies, которые обновляются с каждым запросом.
Вопрос-ответ:
Что такое CSRF токен и почему его нужно передавать в запросах JavaScript?
CSRF токен — это специальный случайный идентификатор, который используется для защиты от атак типа Cross-Site Request Forgery (CSRF). Этот токен нужен для того, чтобы убедиться, что запрос, отправляемый на сервер, был сделан с того же сайта, а не с внешнего. Без CSRF токена злоумышленник может отправить фальшивый запрос от имени пользователя, что приведет к нежелательным действиям. Токен обычно передается в заголовках или теле запроса JavaScript.
Как проверить, что CSRF токен правильно передается в запросах JavaScript?
Чтобы проверить, что CSRF токен передается корректно, можно выполнить несколько шагов. Во-первых, убедитесь, что токен корректно извлекается из HTML страницы или переменной JavaScript. Во-вторых, проверьте, что токен передается в заголовке запроса, используя инструменты разработчика в браузере, такие как вкладка «Сеть» (Network). Для этого отправьте запрос, затем откройте вкладку и убедитесь, что в заголовках запроса есть поле `X-CSRF-Token` с правильным значением токена. Если токен отсутствует или неправильный, сервер отклонит запрос.
Какие проблемы могут возникнуть при неправильной передаче CSRF токена?
Если CSRF токен передается неверно или не передается вообще, сервер не сможет проверить подлинность запроса и отклонит его. Это может привести к ошибке 403 или другой ошибке авторизации. Причины таких проблем могут быть разные: неправильная настройка передачи токена, отсутствие токена в запросах или его неправильное извлечение. В таких случаях важно проверить логи сервера и инструменты разработчика в браузере, чтобы убедиться, что токен передается правильно.
Что такое CSRF токен и зачем он нужен в запросах JavaScript?
CSRF (Cross-Site Request Forgery) токен — это случайная строка, которая используется для предотвращения атак типа «подделка межсайтовых запросов». В этих атаках злоумышленник пытается заставить браузер пользователя выполнить нежелательные действия на веб-сайте, на котором пользователь уже авторизован. CSRF токен помогает избежать таких атак, удостоверяясь, что запрос был отправлен с легитимного источника. В запросах JavaScript токен передается в заголовках или теле запроса для проверки, что запрос инициирован самим пользователем.
Загрузка...
