Sending cookies как исправить

Cookie (куки) — это небольшие текстовые файлы. В них браузер записывает данные с сайтов, которые вы просматриваете. Файлы cookie позволяют сайтам «запоминать» своих посетителей, например, чтобы каждый раз не переспрашивать их логин и пароль.

Чтобы настроить параметры обработки файлов cookie, выберите ваш браузер.

На компьютере

• Яндекс Браузер
• Microsoft Edge
• Google Chrome
• Mozilla Firefox
• Opera
• Safari

На мобильном устройстве

• Яндекс Браузер для Android и iOS
• Google Chrome для Android и iOS
• Mozilla Firefox
• Opera
• Safari

В целях совершенствования безопасности веб-ресурсов периодически появляются новые технологии и инструменты для разработки. Появление атрибута SameSite Cookie как раз является таким примером. Атрибут при должной настройке призван защитить от возможных атак путем использования сторонних cookie-файлов. Также правильные настройки данного атрибута позволяют запретить отслеживания при помощи Cookie, что часто используется для персонализации рекламы и сбора данных о пользователе.

Что такое Cookie SameSite? Это расширение файлов Cookie (появившееся в 2016 году), которое предназначено для защиты от подделки межсайтовых запросов (сокращенно CSRF). Но совсем недавно этот атрибут Cookie был внедрен компанией Google в свои продукты в обновленном виде и поэтому появилась необходимость правильно устанавливать данный атрибут, чтобы сайты работали без ошибок. В частности, Google обновила стандарт и добавила новшества – теперь по умолчанию устанавливается запрещающее значение, что может повредить единую систему аутентификации и вызвать прочие ошибки на сайте.

Атрибут SameSite может иметь разные значения:

– None, в этом случае ограничения на файлы Cookie не устанавливаются;

– Strict, устанавливается полный запрет на отправку любых Cookie;

– Lax, в этом случае файлы Cookie полностью блокируются для межсайтовых запросов (включая изображения, iframe и т.д.).

Для использования защищенного соединения HTTPS также можно указать дополнительный атрибут Secure. Если это указано, Cookie будет отправлен только через HTTPS, но не через обычный протокол HTTP.

При неправильном использовании Cookie в консоли браузера могут появляться ошибки, связанные с данным атрибутом. Исправить их достаточно просто – достаточно для всех Cookie-файлов установить атрибут SameSite и выбрать для него подходящее значение.

Как устанавливать значения Cookie SameSite? Например, в языке PHP (7.3+) управлять такими настройками позволяет функция setcookie, которая принимает различные параметры установки Cookie. Параметр options этой функции позволяет задать различные настройки – он принимает ассоциативный массив, который может иметь любой из ключей: expires, path, domain, secure, httponly и нужный нам samesite. Если элемент samesite не указан, cookie-атрибут SameSite не будет установлен.

В более старых версиях PHP можно управлять данным атрибутом как показано далее:

setcookie('cookie-name', '1', 0, '/; samesite=strict');

Кроме того, можно использовать настройки Apache. Например, чтобы задать всем Cookie на сайте нужные значения, в файле .htaccess следует прописать примерно следующее:

Header always edit Set-Cookie (.*) “$1; SameSite=Lax”.

Не стоит забывать и о методе установке Cookie посредством отправки заголовков:

header(‘Set-Cookie: key=value; path=/; domain=example.org; HttpOnly; SameSite=Lax’).

У меня есть довольно простой запрос CORS с использованием fetch:

    fetch('https://foobar.com/auth', {
      method: 'GET',
      mode: 'cors',
      credentials: 'include',
    })

Express обрабатывает эту сторону сервера; мой код для защиты одного маршрута через CORS выглядит так:

app.get('/auth', cors({
    origin: [
        'http://localhost:8080',
        'http://127.0.0.1:8080'
    ],
    credentials: true,
    preflightContinue: true
}), (req, res) => {
    const { jwt } = req.cookies;
    console.info('JWT is: ', jwt);
    res.json({ jwt });
});

Но ответ всегда пуст, он не может получить файл cookie из запроса и отправить его обратно в ответе json.

В инструментах разработчика браузера я вижу это в заголовках ответов:

access-control-allow-credentials: true
access-control-allow-origin: http://127.0.0.1:8080

(Я тоже пробовал с localhost, но это не сработало, и кто-то предложил использовать IP, я не знаю).

Если я попадаю на сервер напрямую, на маршруте /auth, я получаю обратно JSON с токеном JWT, поэтому я знаю, что он хранится в виде файла cookie, который каждый раз передается назад и вперед, и могу видеть его в файлах cookie браузера. инструменты разработчика.

{"jwt":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcm9maWxlIjp7InByb3ZpZGVyIjoiZ29vZ2xlIiwic3ViIjoiMTEzNjM2ODYxNzQ0NDM2MzEyMTc2IiwiaWxxxx1lIjoiQ2hyaXMiLCJmYW1pbHlOYW1lIjoiRGF3c29uIn0sImdpdmVuX25hbWUiOiJDaHJpcyIsImZhbWlseV9uYW1xxxxxxxoMTRHamdLNERSeld0Nk1GV2JGVDBra0k2MlRLLU53dmR6aWNmNWxXVW9mMEk9czk2LWMiLCJ0eXBlIjoiZGVmYXVsdCJ9XSwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hLS9BT2gxNEdqZ0s0RFJ6V3Q2TUZXYkxxxxxI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hLS9BT2gxNEdqZ0s0RFJ6V3Q2TUZXYkZUMGtrSTYyVEstTnxxxxFsZSI6ImVuLUdCIn19LCJpYXQiOjE2MTgwMDcwNzJ9.kaRH97GyIjgfdbfhOO4zaMLrZKD7bRV23wpAvd4v-As"}

Я тоже вижу это в заголовках ответов:

set-cookie: connect.sid=s%3As-DAIzZjWT4C3xxxxxuAUgE; Path=/; HttpOnly; Secure

Должен ли я увидеть файл cookie для JWT? Я предполагал, что его не нужно переустанавливать, но мне неясно, указывает ли это, что сервер неправильно его настраивает, а затем извлекает его, а затем отправляет обратно в запрос CORS.

Насколько я понимаю, для того, чтобы это сработало, мне просто нужно:

1. Настройте cors на стороне сервера, чтобы правильно установить заголовок access-control-allow-origin.
2. Отправьте мой запрос из правильного источника.
3. Укажите в запросе, что мне нужно разрешить учетные данные для получения cookie (используйте credentials:true в моем вызове выборки, который устанавливает access-control-allow-headers в самом запросе.