프론트에서 서버로 쿠키 전달 되지 않음(SameSite 정책 문제)

IT 서비스/시퀀스

agong이 2025. 4. 7. 19:10

오늘은 프론트에서 로그아웃이 기능이 되지 않는다는 이야기를 들었습니다.

급하게, 서버에 postman으로 테스트 결과 정상적으로 수행되었기에 브라우저에 의해 문제가 있지 않을까 생각하며 문제를 찾아보게 되었습니다.

저희는 jwt를 활용하여 access토큰을 헤더에 refresh토큰을 쿠키에 저장하여 관리합니다. 프론트는 ts로 개발하고 있고, axios를 사용하여 api 요청을 보내고 있습니다.

이때 기본적인 인증, 인가는 access토큰을 사용하게 되고 refresh 토큰은 access토큰을 재발급 받거나, 로그아웃 시에만 사용됩니다.

먼저, 프론트에서 refresh 토큰을 활용하기 위해 올바르게 설정되었는지 살펴보았습니다.

withCredentials 옵션은 서로 다른 도메인에 요청을 보낼 때 요청에 credential 정보를 함께 보낼 지를 결정합니다.

서로 다른 서버에서 데이터가 오가는 CORS에서는 양측 서버에 credentials 설정을 true로 바꿔줘야 합니다.

이미 양쪽에는 CORS 오류를 해결하기 위해 withCredenitals가 True로 설정되어있었기에 해당 문제는 아니었습니다.

refresh토큰이 처음부터 전달이 안되나 확인도 했지만 실제로 잘 전달 되고 있었습니다.개발자 도구에서 다음과 같은 경고문구를 발견하게 되었습니다.

이를 이해하기 위해서는 Cookie 정책에 대해 알아보아야합니다.

쿠키에 별도의 설정을 가하지 않으면, 브라우저는 모든 HTTP 요청에 대해서 저장된 쿠키를 동봉하게 되는데 이를 악용하여 CSRF 공격을 당할 수 있습니다.
공격자가 개설한 사이트에 사용자가 접속할 경우, 사용자의 브라우저 내에 저장된 쿠키를 악용하여 인증 과정을 무력화 하고 공격자가 유도한 동작을 시행하도록 하는 것입ㄴ다.
즉, 공격자가 설계한 다른 사이트, 즉 다른 Origin 에서 악성 요청이 들어오더라도, 쿠키에 저장된 값은 유효한 데이터라 공격이 성공하게 된다. 이것이 서드 파티 쿠키의 문제점입니다.

따라서 이러한 문제를 해결하고자 브라우저에서는 HTTP 쿠키에 SameSite 속성을 통해 쿠키 전송을 제한하고 있습니다.

3. Same Site Policy

None : 다른 출처의 요청, 즉 서드 파티 쿠키도 전송됩니다. 단, 보안을 위해 secure 속성을 강제하여 https 환경에서만 동작합니다.
- 만약 SameSite 속성을 None 으로 설정했음에도 Secure 속성이 없다면 쿠키가 설정되지 않습니다.
Strict : 오직 동일 출처의 요청에서 생성된 퍼스트 파티 쿠키만을 전송합니다.
Lax : 대부분의 서드 파티 쿠키를 전송하지 않으나, 몇 가지 예외적인 케이스에만 전송됩니다.
- Top Level Navigation (웹 페이지 이동) 의 경우 유저가 링크를 누르거나 리다이렉트를 통해 이동된 경우가 포함됩니다. 하지만 <img> 태그나 <iframe> 태그 내에서 페이지를 이동하는 경우에는 Top Level 이라 부를 수 없으므로 전송되지 않습니다.
- 서버의 상태를 바꾸지 않을 것이라 기대하는 GET 요청에 대해서는 쿠키를 동봉합니다.
- 당연하지만 서드 파티 쿠키가 아닌 퍼스트 파티 쿠키, 동일 출처로부터 전송된 쿠키는 그냥 동봉됩니다.

기본으로 Lax로 설정되어있었고 다음과 같은 예외적인 케이스가 아닌 POST요청(로그아웃)이었으므로 쿠키에 담긴 refresh토큰이 전달되지 않았던 것이었습니다.

원인은 찾았으니 쿠키를 생성하는 단계에서 SameSite 속성을 None으로, Secure 속성을 true로 설정하였습니다.

    cookie.setAttribute("SameSite", "None");
    cookie.setSecure(true);

쿠키를 생성할때 다음과 같이 설정하여 이를 해결할 수 있었습니다.

쿠키는 Stateless 서버 환경에서 유용하게 사용할 수 있지만 보안적으로 위험하기 때문에 브라우저에서 자체적으로 많은 제약을 걸어두었습니다.(심지어 서드파티 쿠키를 크롬에서 아예 금지시키려고 했었습니다)

기본적으로 웹 서비스는 브라우저위에서 동작하기 때문에 프레임워크에서 문제를 찾는것 뿐 아니라, 웹 브라우저, 서버등 다양한 환경요인을 함께 고려해야한다는 것을 깨달았습니다.