Встановіть файли cookie для запитів із різними джерелами

Як поділитися файлами cookie перехресного походження? Більш конкретно, як використовувати Set-Cookieзаголовок у поєднанні з заголовком Access-Control-Allow-Origin?

Ось пояснення моєї ситуації:

Я намагаюся встановити файл cookie для API, який працює localhost:4000у веб-програмі, розміщеній на localhost:3000.

Здається, я отримую правильні заголовки відповідей у ​​браузері, але, на жаль, вони не мають ефекту. Ось заголовки відповідей:

HTTP / 1.1 200 OK
Access-Control-Allow-Origin: http: // localhost: 3000
Варіант: Походження, Прийняти-Кодування
Set-Cookie: маркер = 0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Макс-вік = 86400; Домен = localhost: 4000; Шлях = /; Закінчується = Вівторок, 19 вересня 2017 21:11:36 GMT; HttpOnly
Тип вмісту: application / json; charset = utf-8
Довжина вмісту: 180
ETag: W / "b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ"
Дата: пн, 18 вересня 2017, 21:11:36 GMT
Зв'язок: підтримувати життя

Крім того, я бачу файл cookie під Response Cookiesчас перевірки трафіку за допомогою вкладки Мережа інструментів розробника Chrome. Тим не менше, я не бачу, як було встановлено файл cookie на вкладці Програма під Storage/Cookies. Я не бачу помилок CORS, тому я вважаю, що я пропустив щось інше.

Будь-які пропозиції?

Оновлення I:

Я використовую модуль запитів у програмі React-Redux для видачі запиту /signinкінцевій точці на сервері. Для сервера я використовую express.

Експрес-сервер:

res.cookie ('маркер', 'xxx-xxx-xxx', {maxAge: 86400000, httpOnly: true, домен: 'localhost: 3000'})

Запит у браузері:

request.post ({uri: '/ signin', json: {userName: 'userOne', password: '123456'}}, (помилка, відповідь, тіло) => {
    // робити речі
})

Оновлення II:

Я встановлюю заголовки запитів та відповідей зараз як божевільні, переконуючись, що вони присутні як у запиті, так і у відповіді. Нижче скріншот. Зверніть увагу на заголовки Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methodsі Access-Control-Allow-Origin. Дивлячись на проблему, яку я знайшов у github Axios , я відчуваю, що всі необхідні заголовки тепер встановлені. Тим не менше, все ще не везе ...

Що вам потрібно зробити

Щоб дозволити отримання та надсилання файлів cookie за запитом CORS, виконайте наступне.

Back-end (сервер): Встановіть для заголовка Access-Control-Allow-Credentialsзначення HTTP значення true. Крім того, переконайтеся, що заголовки HTTP Access-Control-Allow-Originі Access-Control-Allow-Headersвстановлені, а не з підстановкою* .

Для отримання додаткової інформації про встановлення CORS у express js прочитайте документи тут

Фронт-енд (клієнт): встановіть XMLHttpRequest.withCredentialsпрапорець true, цього можна досягти різними способами, залежно від використовуваної бібліотеки запиту-відповіді:

• jQuery 1.5.1 xhrFields: {withCredentials: true}

• Вибір ES6 () credentials: 'include'

• аксіос :withCredentials: true

Або

Не використовуйте CORS у поєднанні з печивом. Ви можете досягти цього за допомогою проксі-сервера.

Якщо ви з якихось причин не уникайте цього. Рішення вище.

Виявилося, що Chrome не встановить файл cookie, якщо домен містить порт. Встановити його для localhost(без порту) не є проблемою. Велика подяка Ервіну за цю пораду!

Примітка для браузера Chrome, випущеного в 2020 році.

У майбутньому випуску Chrome буде надано файли cookie з міжсайтовими запитами, лише якщо вони встановлені з SameSite=Noneі Secure.

Отже, якщо на вашому серверному сервері не встановлено SameSite = None, Chrome за замовчуванням використовуватиме SameSite = Lax і не використовуватиме цей файл cookie із запитами {withCredentials: true}.

Більше інформації https://www.chromium.org/updates/same-site .

Розробники Firefox та Edge також хочуть випустити цю функцію в майбутньому.

Специфікацію можна знайти тут: https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8

Для того, щоб клієнт міг читати файли cookie із запитів про перехресне походження, потрібно мати:

1. Усі відповіді сервера повинні містити в заголовку таке:

   Access-Control-Allow-Credentials: true

2. Клієнту потрібно надіслати всі запити з withCredentials: trueопцією

У своїй реалізації з Angular 7 та Spring Boot я домігся цього за допомогою наступного:

На стороні сервера:

@CrossOrigin(origins = "http://my-cross-origin-url.com", allowCredentials = "true")
@Controller
@RequestMapping(path = "/something")
public class SomethingController {
  ...
}

origins = "http://my-cross-origin-url.com"Частина буде додати Access-Control-Allow-Origin: http://my-cross-origin-url.comв заголовок відповіді кожного сервера

allowCredentials = "true"Частина буде додати Access-Control-Allow-Credentials: trueв заголовок відповіді кожного сервера, який є тим, що нам потрібно для того , щоб клієнт для читання куки

З боку клієнта:

import { HttpInterceptor, HttpXsrfTokenExtractor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from 'rxjs';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {

    constructor(private tokenExtractor: HttpXsrfTokenExtractor) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // send request with credential options in order to be able to read cross-origin cookies
        req = req.clone({ withCredentials: true });

        // return XSRF-TOKEN in each request's header (anti-CSRF security)
        const headerName = 'X-XSRF-TOKEN';
        let token = this.tokenExtractor.getToken() as string;
        if (token !== null && !req.headers.has(headerName)) {
            req = req.clone({ headers: req.headers.set(headerName, token) });
        }
        return next.handle(req);
    }
}

За допомогою цього класу ви фактично вводите додаткові речі до всього вашого запиту.

Перша частина req = req.clone({ withCredentials: true });- це те, що вам потрібно для того, щоб надіслати кожен запит з withCredentials: trueопцією. Це практично означає, що спочатку буде надіслано запит OPTION, так що ви отримаєте серед них свої файли cookie та маркер авторизації, перш ніж надсилати фактичні запити POST / PUT / DELETE, яким потрібен цей маркер, прикріплений до них (у заголовку), у замовлення серверу для перевірки та виконання запиту.

Друга частина - це та, яка спеціально обробляє маркер анти-CSRF для всіх запитів. Зчитує його з файлу cookie, коли це потрібно, і записує в шапці кожного запиту.

Бажаний результат приблизно такий:

Відповідь Піма дуже корисна. У моєму випадку я повинен використовувати

Expires / Max-Age: "Session"

Якщо це dateTime, навіть якщо термін його дії не минув, він все одно не надсилатиме cookie до серверної бази:

Expires / Max-Age: "Thu, 21 May 2020 09:00:34 GMT"

Сподіваюся, це буде корисно для майбутніх людей, які можуть зустрітися з тим самим питанням.

Для Express оновіть свою бібліотеку Express до 4.17.1останньої стабільної версії. Тоді;

У CorsOption: Встановити originна свій локальний URL або виробничої інтерфейс URL і credentialsдо true прикладу

  const corsOptions = {
    origin: config.get("origin"),
    credentials: true,
  };

Я динамічно встановлюю своє походження за допомогою модуля config npm .

Потім у res.cookie:

Для локального хоста: вам не потрібно встановлювати sameSite і безпечний варіант на всіх, ви можете встановити , httpOnlyщоб trueдля HTTP куки , щоб запобігти XSS атаку і інші корисні опції в залежності від вашого використання.

Для виробничого середовища потрібно встановити sameSiteзначення noneдля запиту про перехресне походження та secureдля true. Пам’ятайте, sameSiteпрацює лише з експрес-версією, як зараз, а остання версія chrome лише встановлює файли cookie https, тому необхідна безпечна опція.

Ось як я зробив своє динамічне

 res
    .cookie("access_token", token, {
      httpOnly: true,
      sameSite: app.get("env") === "development" ? true : "none",
      secure: app.get("env") === "development" ? false : true,
    })