Setel cookie untuk permintaan lintas sumber

Bagaimana cara membagikan cookie lintas asal? Lebih khusus lagi, bagaimana cara menggunakan Set-Cookietajuk yang dikombinasikan dengan tajuk Access-Control-Allow-Origin?

Berikut penjelasan situasi saya:

Saya mencoba menyetel cookie untuk API yang dijalankan localhost:4000di aplikasi web yang dihosting di localhost:3000.

Sepertinya saya menerima header respons yang benar di browser, tetapi sayangnya header tersebut tidak berpengaruh. Ini adalah tajuk tanggapan:

HTTP / 1.1 200 Oke
Access-Control-Allow-Origin: http: // localhost: 3000
Bervariasi: Asal, Terima-Enkode
Set-Cookie: token = 0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Usia Maks = 86400; Domain = localhost: 4000; Jalur = /; Kedaluwarsa = Sel, 19 Sep 2017 21:11:36 GMT; HttpOnly
Jenis Konten: application / json; charset = utf-8
Panjang Konten: 180
ETag: W / "b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ"
Tanggal: Sen, 18 Sep 2017 21:11:36 GMT
Koneksi: tetap hidup

Selain itu, saya dapat melihat cookie di bawah Response Cookiessaat saya memeriksa lalu lintas menggunakan tab Jaringan alat pengembang Chrome. Namun, saya tidak dapat melihat cookie disetel di tab Aplikasi di bawah Storage/Cookies. Saya tidak melihat kesalahan CORS, jadi saya berasumsi saya melewatkan sesuatu yang lain.

Ada saran?

Perbarui I:

Saya menggunakan modul permintaan di aplikasi React-Redux untuk mengeluarkan permintaan ke /signintitik akhir di server. Untuk server saya menggunakan express.

Server ekspres:

res.cookie ('token', 'xxx-xxx-xxx', {maxAge: 86400000, httpOnly: true, domain: 'localhost: 3000'})

Permintaan di browser:

request.post ({uri: '/ signin', json: {userName: 'userOne', password: '123456'}}, (err, response, body) => {
    // melakukan sesuatu
})

Perbarui II:

Sekarang saya menyetel header permintaan dan tanggapan seperti orang gila sekarang, memastikan bahwa mereka ada baik dalam permintaan maupun tanggapan. Berikut tangkapan layarnya. Perhatikan header Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methodsdan Access-Control-Allow-Origin. Melihat masalah yang saya temukan di github Axios , saya mendapat kesan bahwa semua header yang diperlukan sekarang telah disetel. Namun, masih belum berhasil ...

Apa yang kamu butuhkan

Agar berhasil menerima & mengirim cookie melalui permintaan CORS, lakukan hal berikut.

Back-end (server): Setel nilai header HTTP Access-Control-Allow-Credentialske true. Selain itu, pastikan header HTTP Access-Control-Allow-Origindan Access-Control-Allow-Headerssudah disetel, bukan dengan karakter pengganti* .

Untuk info lebih lanjut tentang pengaturan CORS di express js baca dokumen di sini

Front-end (klien): Setel XMLHttpRequest.withCredentialsflag ke true, ini bisa dilakukan dengan cara berbeda bergantung pada library request-response yang digunakan:

• jQuery 1.5.1 xhrFields: {withCredentials: true}

• Pengambilan ES6 () credentials: 'include'

• aksios :withCredentials: true

Atau

Hindari penggunaan CORS bersamaan dengan cookie. Anda dapat mencapai ini dengan proxy.

Jika Anda karena alasan apapun jangan menghindarinya. Solusinya ada di atas.

Ternyata Chrome tidak akan menyetel cookie jika domain tersebut berisi porta. Mengaturnya untuk localhost(tanpa port) bukanlah masalah. Terima kasih banyak kepada Erwin atas tip ini!

Catatan untuk Browser Chrome dirilis pada tahun 2020.

Rilis Chrome di masa mendatang hanya akan mengirimkan cookie dengan permintaan lintas situs jika disetel dengan SameSite=Nonedan Secure.

Jadi, jika server backend Anda tidak menyetel SameSite = None, Chrome akan menggunakan SameSite = Lax secara default dan tidak akan menggunakan cookie ini dengan permintaan {withCredentials: true}.

Info lebih lanjut https://www.chromium.org/updates/same-site .

Pengembang Firefox dan Edge juga ingin merilis fitur ini di masa mendatang.

Spec ditemukan di sini: https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8

Agar klien dapat membaca cookie dari permintaan lintas sumber, Anda harus memiliki:

1. Semua tanggapan dari server harus memiliki yang berikut di header mereka:

   Access-Control-Allow-Credentials: true

2. Klien perlu mengirim semua permintaan dengan withCredentials: trueopsi

Dalam implementasi saya dengan Angular 7 dan Spring Boot, saya mencapainya dengan yang berikut:

Sisi server:

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

Bagian tersebut origins = "http://my-cross-origin-url.com"akan ditambahkan Access-Control-Allow-Origin: http://my-cross-origin-url.comke header respons setiap server

Bagian tersebut allowCredentials = "true"akan ditambahkan Access-Control-Allow-Credentials: trueke header respons setiap server, yang kami butuhkan agar klien dapat membaca cookie

Sisi klien:

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);
    }
}

Dengan kelas ini Anda benar-benar memasukkan barang tambahan ke semua permintaan Anda.

Bagian pertama req = req.clone({ withCredentials: true });, adalah apa yang Anda butuhkan untuk mengirim setiap permintaan dengan withCredentials: trueopsi. Ini secara praktis berarti bahwa permintaan OPSI akan dikirim terlebih dahulu, sehingga Anda mendapatkan cookie dan token otorisasi di antara mereka, sebelum mengirim permintaan POST / PUT / DELETE yang sebenarnya, yang membutuhkan token ini dilampirkan padanya (di header), di perintah agar server memverifikasi dan menjalankan permintaan.

Bagian kedua adalah bagian yang secara khusus menangani token anti-CSRF untuk semua permintaan. Membacanya dari cookie saat diperlukan dan menulisnya di header setiap permintaan.

Hasil yang diinginkan adalah seperti ini:

Jawaban Pim sangat membantu. Dalam kasus saya, saya harus menggunakan

Expires / Max-Age: "Session"

Jika ini adalah dateTime, meskipun tidak kedaluwarsa, tetap tidak akan mengirim cookie ke backend:

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

Semoga bermanfaat bagi orang-orang di masa depan yang mungkin menghadapi masalah yang sama.

Untuk ekspres, tingkatkan perpustakaan ekspres Anda 4.17.1yang merupakan versi stabil terbaru. Kemudian;

Dalam CorsOption: Set originke url localhost atau url produksi frontend dan credentialsuntuk true misalnya

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

Saya mengatur asal saya secara dinamis menggunakan modul config npm .

Kemudian, di res.cookie:

Untuk localhost: Anda tidak perlu menyetel samaSite dan opsi aman sama sekali, Anda dapat menyetel httpOnlyke trueuntuk http cookie untuk mencegah serangan XSS dan opsi berguna lainnya tergantung pada kasus penggunaan Anda.

Untuk lingkungan produksi, Anda perlu menyetel sameSiteke noneuntuk permintaan lintas sumber dan secureke true. Ingat sameSitebekerja dengan versi ekspres terbaru hanya seperti saat ini dan versi chrome terbaru hanya mengatur cookie di atas https, sehingga perlu opsi aman.

Inilah cara saya membuat milik saya dinamis

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