[TSJ] 쿠키 sameSite 옵션

프로젝트전 마지막 HA 에서, 가장 많은 삽질을 하게했던 주인공은.. 바로 쿠키의 sameSite 옵션이었다.

내가 구현하고자 했던 것은 http요청 환경에서 express-session 미들웨어를 이용하여 로그인 인증을 구현하는 것이었다. 과정은 아래와 같다

1. 먼저, 클라에서 서버로 로그인정보를 Post메소드를 통해 보내고, 로그인정보가 서버 DB에 있을 경우 세션에 db 회원번호를 저장한 뒤 응답으로 암호화된 쿠키 전달.

2. 클라에서 다시 GET메소드로 서버에 회원정보 요청. 서버에서는 암호화된 쿠키를 해석하여 유효한 세션인지 파악하고, 세션객체에 있는 db 회원번호와 일치하는 회원정보를 db에서 가져와서 응답으로 해당정보 보내줌.

어떤 문제가 발생했나..?

1번은 성공적으로 보였지만 2번에서 서버로 get 요청을 보낼때 쿠키가 전달이 안됨... 그래서 서버에서 get요청에 대해 req.session으로 콘솔에 찍어봤을때 회원번호가 들어있지 않았음

삽질 당시 코드는 아래와 같았다.

// 클라이언트 
axios.post('http://localhost:4000/signin', 
           {email, password}, 
           {withCredentials: true}
          )
//서버
// - session 설정
app.use(session({
  secret: //시크릿 키,
  resave: false,
  saveUninitialized: true,
  cookie: {
    httpOnly: true,
    maxAge: 1000 * 60 * 5,
    sameSite: 'none',
  }
}))

// - cors 설정
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}))

삽질 당시 나의 생각

sameSite 옵션이 none 일 경우 모든 요청 메소드에 대해 쿠키를 전달하는 것, 여기서 secure: true 옵션을 추가할경우 https 요청시에만 쿠키전달 가능.

하지만 현재는 http 요청을 주고받는 환경이다. 따라서 secure 옵션을 붙이지 않으면 정상적으로 쿠키 전송이 가능할거야. 저번에 삽질하다 알게된 credential 옵션도 잘 붙였고.. 근데 왜안됨..?

해결

http에서 https로 요청방식을 변경 한 뒤 sameSite:'none' 은 유지하고, secure:true 옵션을 추가하였더니, 정상적으로 작동 하는 것을 확인했다. 정상적으로 작동하는건 확인했지만 http와 어떤 차이가 있는건지에 대해서 이해하지 못하고 일단 모든 HA 요구조건을 완성한 뒤 제출하였다

해결 후 알게 된 것들

구글링 끝에 올해 초 크롬 브라우저의 업데이트에 관한 내용을 확인 할 수 있었다

정리하자면, 크롬 80버전부터 CSRF공격으로 부터의 보안강화를 위해 sameSite 기본 속성값이 'none'에서 'lax'로 변경된다는 것이었다
즉, GET 요청에 대해서만 쿠키 전송이 가능하다

samesite가 none이지만 secure 속성이 없을경우 브라우저에서는 아래 그림과 같은 경고 아이콘이 뜨고, 마우스 오버시 다음 문구가 나온다.

This set-cookie had the "SameStie=None" attribute but did not have the "Secure" attribute. which is required in order to use "SameSite=None"

결론:
다른 도메인으로 쿠키를 전달 하고 싶은 경우
SameSite 옵션은'None' Secure 옵션은 true 여야만한다. -> 사이트가 https 여야만 한다.

참고 자료:
https://ifuwanna.tistory.com/223
https://www.hahwul.com/2020/01/18/samesite-lax/

해결안된 궁금증 :
http, localhost 환경에서 secure: strict 로 하면 도메인이 달라도 쿠키전송이되던데, 이건 왜되는거지? 헬데에 물어보자