🍪🍪서버에서 쿠키가 오질 않는다.

이 글에서는 React에서 localhost 개발환경에 https를 적용하는 방법을 알아볼 예정이다.
다만 왜 이런 일이 일어났는지만 간략하게 적어 놓자면...

나는 Spring Boot와 React를 활용해 프로젝트를 진행하고 있고, 회원가입/로그인 기능을 구현하기 위해 JWT 토큰 인증을 구현하려했다. 토큰 생성은 어찌저찌 성공했지만 생성된 토큰을 클라이언트에서 사용하기 위해 쿠키로 전달하려 했지만... 어찌된 일인지 서버에서 쿠키가 전달되지 않았다.
그 일을 해결하기 위한 방법 중 하나로 이 글을 작성한다.

🔑쿠키가 전달 되지 않는 이유 "sameSite"

sameSite는 쿠키 속성 중 하나로 쿠키 전달 조건에 해당한다.
Strict, Lax, None 세 종류가 있는데 이 중 Strict와 Lax는 퍼스트 파티 쿠키, 즉 같은 도메인으로만 전달될 수 있고, None은 서드 파티 쿠키로 다른 도메인으로 전달될 수 있다.
Lax에는 몇가지 예외가 있는데, 이는 조금 밑에서 알아보자

퍼스트 파티? 서드 파티? 그게 뭔데

쿠키에는 퍼스트 파티 쿠키와 서드 파티 쿠키가 있다. 이 쿠키들은 Set-Cookie:... ; domain=someSite와 같은 domain설정에 따라 나눠진다.
퍼스트 파티 쿠키는 현재 접속해 있는 페이지와 같은 도메인으로 전송되는 쿠키이며 서드 파티 쿠키는 현재 접속하고 있는 페이지에서 타 사이트 링크를 클릭했을 경우, 즉 다른 도메인으로 전송되는 쿠키들을 의미한다.

Lax의 예외적인 요청

크롬의 정책 변경으로 sameSite의 기본값은 Lax가 되었다.
Lax는 기본적으로 Strict와 똑같은 설정이지만 몇가지 예외가 있는데

<a href="..."></a>
<link rel="" href="..."/>
<form method="GET" action="...">

와 같은 GET을 사용하는 세가지 요청이 이에 해당한다.

🤔그래서 어떻게 해야 쿠키를 전달 할 수 있는건데?

첫번째 방법은 같은 도메인으로 전달하는 거다. 그럼 굳이 sameSite를 건드리지 않아도 될테니까. 아니면 Lax의 예외에 맞게 사용하던지
하지만 그런 방법으로 해결할 수 있었으면 이 블로그로 흘러오지 않았겠지

두번째 방법은 sameSite를 None으로 설정하는거다.
하지만 크롬의 보안정책때문에 None 설정은 반드시 https 환경에서만 가능하다. 지금부터 https 설정과 함께 쿠키를 전달해보자.

🎫우선 SSL 인증서를 발급 받아야 한다

진짜 서비스를 위해 HTTPS용 인증서를 발급 받으려면 비용이 발생한다.
하지만 개인 개발자는 돈 내기가 싫다...
당연히 무료로 하고 싶기 때문에 mkcert를 사용할 것이다.

mkcert설치를 위한 Chocolatey 설치

1. 먼저 PowerShell 을 관리자 권한으로 실행한다.

2. 명령어 실행
   파워쉘의 스크립트 실행 권한 변경을 위해 ExecutionPolicy를 확인한다.

Get-ExecutionPolicy

3. 결과값이 만약 Restricted라면 AllSigned로 바꿔준다.

Set-ExecutionPolicy AllSigned

4. Chocolatey 설치 진행
   AllSigned로 변경 후 설치를 진행한다.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

5. 설치 완료

...
Chocolatey (choco.exe) is now ready.
You can call choco from anywhere, command line or powershell by typing choco.
Run choco /? for a list of functions.
You may need to shut down and restart powershell and/or consoles
 first prior to using choco.
Ensuring Chocolatey commands are on the path
Ensuring chocolatey.nupkg is in the lib folder

6. choco 명령어로 설치 확인

Chocolatey v0.10.15
# 위 내용이 나온다면 성공!

7. mkcert 설치

# 프로젝트 폴더로 경로 이동 후 명령어 실행
choco install mkcert

8. localhost 인증

mkcert -install
# 경고창이 뜨면 "예" 선택

9. 인증서 발급

mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

localhost / 127.0.0.1 (IPv4) / ::1(IPv6)에서 사용할 수 있는 인증서를 만들겠다는 의미이다.
위에서 경로를 제대로 설정 했다면 프로젝트 폴더에 key.pem, cert.pem 파일이 있을 것이다!
만약 경로 설정을 안했다면 c:/windows/system32 폴더에 있을테니 가져와서 프로젝트 폴더에 넣어줄 것

10. .env 파일 설정
    프로젝트 폴더에 .env파일을 만들고 변수를 설정해준다

SSL_CRT_FILE=cert.pem
SSL_KEY_FILE=key.pem

11. package.json 수정하기

"scripts": {
  "start": "set HTTPS=true&&react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

start 부분에 set HTTPS=true를 적어주면 된다
만약 .env 파일을 생성하지 않았다면 해당 구문에서 선언해주면 된다

"scripts": {
  "start": "set HTTPS=true&&set SSL_CRT_FILE=cert.pem&&set SSL_KEY_FILE=key.pem&&react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

이러면 끝!