쿠키의 SameSite 옵션 (Feat CORS)

우리의 프로젝트는 세션을 통해 사용자 인증을 진행하고 있었고, 해당 값은 프론트에서 쿠키로 저장하고 있었다.

 

하지만 문제가 있었다

 

1. 로컬에서는 쿠키가 잘 저장 되었다.

2. 포스트맨에서도 쿠키가 잘 저장 되었다

 

 

하지만 백엔드 서버를 EC2에 올리고 프론트는 로컬에서 작업할때 쿠키가 저장되지 않았다.

 

그리고 해당 문제를 찾아보니 2가지가 있었다.

 

1. CORS

2. Cookie의 SameSite옵션

 

 

들어가기 전에 CORS가 뭔데?

 

이렇듯 우리가 겪는  모두 CORS 정책을 위반했기 때문에 발생하는 것이다.

 

사실 CORS라는 방어막이 존재하기 때문에 우리가 이 곳 저 곳에서 가져오는 리소스가 안전하다는 최소한의 보장을 받을 수 있는 것이다.

 

CORS=교차 출처 리소스 공유

 

교차 출처 리소스 공유?

- 다른 출처

 

솔직히 여러 블로그에 잘 설명 되어있는데 그냥 사진을 하나보는게 젤 이해하기 편했다.

 

 

CORS설정은 자바에서 다음과 같이 설정할 수 있었다.

 

@Configuration
public class WebConfig implements WebMvcConfigurer {
    public static final String ALLOWED_METHOD_NAMES = "GET,POST,PATCH,PUT,DELETE,OPTIONS";
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173") // 허용할 출처
                .allowedMethods(ALLOWED_METHOD_NAMES.split(",")) // 허용할 HTTP method
    }
}

 

CORS는 해결 그다음은 SameSite 옵션

 

이게 현재 프로젝트에서 가장 큰 문제였다.

다른 사람들도 해당 문제에 대해 많은 고생을 하였다.

 

문제 상황

1. Response의 헤더에 Set-Cookie를 볼 수 있음

2. 하지만 브라우저 (Application)에는 쿠키가 저장이 안되어 있음

 

 

왜 쿠키가 저장이 안되었을까?

 

이유는 크롬에서는 Cookie의 SameSite option을 default값으로 LAX가 되어 있기 때문이다.

 

none

• 도메인이 다른 경우(cross-origin)에도 브라우저가 쿠키를 포함해서 요청을 보낼 수 있음.
• cross-origin이라면 none 만이 유일하게 동작
• Secure 옵션 필수(Https 기반)

strict

• 도메인이 다른 경우(cross-origin) 브라우저가 쿠키를 포함하지 않음.

lax

• strict과 비슷하지만, 다른 도메인 내에서 same-origin의 도메인 주소를 가리키는 링크를 클릭한 경우, 해당 요청에 대해서만 쿠키를 포함해줌.

 

우리는 이전에 말한데로 백엔드는 EC2에서 프론트는 로컬에서 테스트하기때문에 쿠키의 옵션 SameSite=Lax에 의해 쿠키를 못받고 있었다.

 

이후 None으로 바꿔보았지만

None이 적용되려면 https기반이 되어야 한다.(Secure 옵션)

하지만 우리는 프론트를 로컬에서 테스트하기를 원하기에 해당 경우는 패스!

 

 

그럼 로컬과 로컬끼린 잘되지 않을까? 라는 생각을 했다.

 

 

음 안되더라.. 왜일까?

 

 

Credentials

 

알아보니 cookie를 주고받을 때는 프론트 백 둘다 설정해줘야 하는 부분이 있었다.

 

프론트(JS)

axios
.post(
  '/api/users/login',
  { email, password },
  {
    withCredentials: true,
  },
)

 

백엔드(JAVA)

@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173") // 허용할 출처
                .allowedMethods(ALLOWED_METHOD_NAMES.split(",")) // 허용할 HTTP method
                .allowCredentials(true); // 쿠키 인증 요청 허용
    }

allowCredentials를 모두 true로 해야 쿠키를 브라우저에 저장한다!!

 

 

결론

 

프론트에서 쿠키를 저장하고 싶다면 방법은 다음과 같다.

 

1.  프론트/백 서로 다른 도메인이면 SSL/TLS구성이 되어야함 (Samesite=none, secure=true)

2. 같은 도메인이면 신경안써도 됨

3. 프론트가 로컬에서 작업할땐 백엔드 서버도 자신의 로컬  컴퓨터에 구동해야함.

 

그리고 우리는 어차피 하나의 EC2만을 사용할 수 있기에 3번으로 프론트가 작업하고 최종적으론 2번으로 해결 할 계획이다.

 

 

 

 

 

 

 

 

 

https://evan-moon.github.io/2020/05/21/about-cors/

https://evan-moon.github.io/2020/05/21/about-cors/