원본 간 요청에 대한 쿠키 설정

Question 1

원본 간 쿠키를 공유하는 방법은 무엇입니까? 더 구체적으로,Set-Cookie 헤더와 헤더를 조합Access-Control-Allow-Origin 무엇입니까?

내 상황에 대한 설명은 다음과 같습니다.

실행중인 API에 대한 쿠키를 설정하려고합니다. localhost:4000에서 호스팅되는 웹 앱에서localhost:3000 .

브라우저에서 올바른 응답 헤더를받는 것 같지만 유감스럽게도 효과가 없습니다. 다음은 응답 헤더입니다.

HTTP / 1.1 200 정상
Access-Control-Allow-Origin : http : // localhost : 3000
다름 : Origin, Accept-Encoding
Set-Cookie : token = 0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Max-Age = 86400; 도메인 = localhost : 4000; 경로 = /; Expires = Tue, 19 Sep 2017 21:11:36 GMT; HttpOnly
콘텐츠 유형 : application / json; charset = utf-8
콘텐츠 길이 : 180
ETag : W / "b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ"
날짜 : 2017 년 9 월 18 일 월요일 21:11:36 GMT
연결 : 연결 유지

또한 Response CookiesChrome 개발자 도구의 네트워크 탭을 사용하여 트래픽을 검사 할 때 아래에있는 쿠키를 볼 수 있습니다. 그러나 아래의 응용 프로그램 탭에서 쿠키가 설정되는 것을 볼 수 없습니다 Storage/Cookies. CORS 오류가 표시되지 않으므로 다른 것이 누락되었다고 가정합니다.

어떤 제안?

업데이트 I :

React-Redux 앱 의 요청 모듈을 사용 /signin하여 서버 의 엔드 포인트에 요청을 발행하고 있습니다. 서버의 경우 Express를 사용합니다.

Express 서버 :

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

브라우저에서 요청 :

request.post ({uri : '/ signin', json : {userName : 'userOne', 비밀번호 : '123456'}}, (err, response, body) => {
    // 작업
})

업데이트 II :

이제 요청 및 응답 헤더를 미친 듯이 설정하여 요청과 응답 모두에 있는지 확인합니다. 아래는 스크린 샷입니다. 헤더를 주목 Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methods와 Access-Control-Allow-Origin. Axios의 github 에서 찾은 문제를 살펴보면 필요한 모든 헤더가 이제 설정되었다는 인상을 받았습니다. 하지만 아직 운이 없습니다 ...

Question 2

해야 할 일

CORS 요청에 의한 쿠키 수신 및 전송을 허용하려면 다음을 수행하십시오.

백엔드 (서버) : HTTP 헤더 Access-Control-Allow-Credentials값을 true. 또한, 확인 HTTP 헤더 Access-Control-Allow-Origin및 Access-Control-Allow-Headers및 설정 하지 와일드 카드* .

Express js에서 CORS 설정에 대한 자세한 내용은 여기에서 문서를 읽어보세요.

프런트 엔드 (클라이언트) :XMLHttpRequest.withCredentials 플래그를로 설정합니다 true. 사용 된 요청-응답 라이브러리에 따라 다른 방법으로 수행 할 수 있습니다.

jQuery 1.5.1 xhrFields: {withCredentials: true}
ES6 fetch () credentials: 'include'
axios :withCredentials: true

또는

CORS를 쿠키와 함께 사용하지 마십시오. 프록시로이를 달성 할 수 있습니다.

어떤 이유로 든 피하지 마십시오. 해결책은 위에 있습니다.

도메인에 포트가 있으면 Chrome이 쿠키를 설정하지 않는 것으로 나타났습니다. localhost(포트없이) 설정 은 문제가되지 않습니다. 이 팁에 대해 Erwin 에게 감사드립니다 !

Question 3

2020 년에 출시 된 Chrome 브라우저에 대한 참고 사항입니다.

Chrome의 향후 릴리스는 다음으로 설정된 경우 교차 사이트 요청으로 만 쿠키를 제공합니다. SameSite=None 및Secure .

따라서 백엔드 서버가 SameSite = None을 설정하지 않으면 Chrome은 기본적으로 SameSite = Lax를 사용하며 {withCredentials : true} 요청에이 쿠키를 사용하지 않습니다.

더 많은 정보 https://www.chromium.org/updates/same-site .

Firefox 및 Edge 개발자도 향후이 기능을 출시하기를 원합니다.

사양은 여기에서 찾을 수 있습니다. https://tools.ietf.org/html/draft-west-cookie-incrementalism-01#page-8

Question 4

클라이언트가 원본 간 요청에서 쿠키를 읽을 수 있으려면 다음이 필요합니다.

서버의 모든 응답에는 헤더에 다음이 있어야합니다.

Access-Control-Allow-Credentials: true
클라이언트는 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 요청이 먼저 전송된다는 것을 의미하므로이 토큰이 헤더에 첨부되어야하는 실제 POST / PUT / DELETE 요청을 보내기 전에 쿠키와 인증 토큰을 얻을 수 있습니다. 서버가 요청을 확인하고 실행하도록 명령합니다.

두 번째 부분은 모든 요청에 대해 anti-CSRF 토큰을 특별히 처리하는 부분입니다. 필요할 때 쿠키에서 읽고 모든 요청의 헤더에 씁니다.

원하는 결과는 다음과 같습니다.

Question 5

Express의 경우 Express 라이브러리를 다음으로 업그레이드하십시오. 4.17.1 경우 최신 안정 버전 인 . 그때;

CorsOption에서 : origin로컬 호스트 URL 또는 프런트 엔드 프로덕션 URL로 설정하고 예 credentials를 true들어

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

config npm module을 사용하여 동적으로 원본을 설정했습니다 .

그런 다음 res.cookie에서 :

localhost의 경우 : sameSite 및 보안 옵션을 전혀 설정할 필요가 없으며 사용 사례에 따라 XSS 공격 및 기타 유용한 옵션 을 방지 httpOnly하기 true위해 http 쿠키에 대해 설정할 수 있습니다 .

프로덕션 환경의 경우 원본 간 요청 sameSite에 none대해 로 설정 secure하고 true. 기억 sameSite에만 지금에서와 같은 명시 최신 버전 및 최신 크롬 버전 이상에서만 설정 쿠키와 작품 https, 보안 옵션에 따라서 필요.

내가 어떻게 동적으로 만들 었는지

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

Question 6

Pim의 답변은 매우 유용합니다. 제 경우에는

Expires / Max-Age: "Session"

dateTime이면 만료되지 않았더라도 백엔드에 쿠키를 보내지 않습니다.

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

같은 문제를 만날 수있는 미래의 사람들에게 도움이 되길 바랍니다.