Next.js sameSite 이슈

프로젝트를 진행하다보면 서버와 클라이언트가 서로 다른 도메인으로 요청 주고받을 일이 생긴다. 이 경우 클라이언트에서 요청을 보내면 요청 헤더에는 Cookie에 토큰이 들어가 있지 않을 것이다.

이는 2020년부터 구글에서 시행한 정책때문이다.

Cookie란

인터넷 사용자가 어떠한 웹사이트를 방문한 경우 사용자의 웹 브라우저를 통해 인터넷 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일

토큰이란

서버에서 클라이언트를 구분할 수 있도록 유니크한 데이터를 암호화한 일종의 인증서

##SameSite 정책
2020년 도입된 크롬 80부터 쿠키 정책이 바뀌면서 기존에 samesite=none 옵션에서 samesite=lax으로 디폴트가 변경되었다.

이로 인해 기존에 서버와 클라이언트가 도메인이 달라도 데이터를 주고받을 수 있었던 것이 이제는 막히게되었다.

SameSite=Strict;

가장 보수적인 정책을 나타낸다. strict로 설정되면 크로스 사이트 요청에는 항상 요청을 하지 않는다.

SameSite=Lax;

크롬80부터 디폴트옵션으로 지정된 것입니다. 단 strict와는 다르게 GET 요청과 같이 안전한 탑 레벨 접근만 허용합니다. 이 말은 POST와 같은 요청에는 쿠키를 넣어주지 않습니다.

SameSite=None

samesite정책이 생기기 전에 디폴트로 있던 옵션입니다. 크로스 사이트 요청의 경우에도 항상 쿠키를 같이 전송합니다. 현재 None을 사용하기 위해서는 Secure옵션과 함께해야합니다.

어디까지 samesite일까?

출처

위 그림을 놓고 보면 편하다

1. 내가 쿠키를 발급받은 a.com에서 a.com server로 요청을 보낼 때는 쿠키와 함께 보낸다.

2. 하지만 a.com에서 b.com로 요청을 보내면 쿠키를 빼놓고 보낸다.

여기서 첫번째를 first-party-cookie라고 한다.

그럼 여기서 sameSite의 기준은 무엇일까?

www.naver.com과 www.pay.naver.com은 같은 도메인으로 인식합니다. 즉 서브 도메인은 같은 도메인으로 인식합니다. 단 com같은 최상위 도메인이 아니라면 크로스 사이트로 인식합니다.
www.naver.com === www.pay.naver.com

www.naver.io !== www.pay.naver.io

next.js same site

그럼 next에서 어떻게 이를 해결할 수 있을까?

바로 rewrites를 사용하는 것이다.

const path = require("path");

/** @type {import('next').NextConfig} */
module.exports = {
...
  async rewrites() {
    return [
      {
        destination: `${your server Url}`,
        source: "/api/:path*"
      },
            ...
    ];
  },
  ...
};

이렇게 설정하면 source_path로 인해 localhost에서 보낸것으로 인식하게된다.

docker에서 인식시키기

사실 이 부분은 프로젝트 특성상 도커파일과 도커 컴포즈에서 환경변수를 관리해줘야했다.

//docker-compose
version: "3.4"
services:
  project:
    build:
      context: ./
      dockerfile: Dockerfile
      args:
       API_YOUR_URL : "https://yours.com"
    environment:
      - API_YOUR_URL = "https://yours.com"
    ports:
      - "3000:3000"

//dockerFile
...
ARG API_YOUR_URL

ENV API_YOUR_URL ${API_YOUR_URL}
ADD . $API_YOUR_URL
...

이렇게 작성 후 docker-compose up -d --build를 통해 빌드시켜준다.