문제는 JWT를 위해 Cookie를 사용하며 발생했다.
아니, 도메인 없이 쿠키를 못 사용하는거야?
왜?
AWS로 두개의 인스턴스를 만들었다. 이후 탄력적 IP 설정을 통해 IP주소를 할당 받았다. 이후 각종 테스트를 하기 위해 회원가입 후 로그인을 했다. 나를 맞이한 건 This Set-Cookie was blocked 쿠키가 설정되지 않았다.
SameSite
먼저 나의 첫 오류는 SameSite오류였다. SameSite 속성이 설정이 되어 있지않아 자동으로 SameSite=Lax라는 값으로 설정이 돼 있었다. 크롬80버전 부터 기본값이 Lax인 탓이었다.
SameSite속성은 서로다른 도메인에서의 쿠키 전송에 관한 보안이다. 값으로는 Lax, none, strict가 있다.
- none : 현재사이트, 현재사이트 이외의 도메인에도 제한없이 전달
- strict : 서로 다른 도메인에서는 절대 불가
- lax : strict와 같지만 get method등 일부 예외 존재
나의 로그인은 lax로 처리가 불가했기에 일단 none으로 처리했다.
그러나,
Secure에 문제가 생겼다.
SameSite=none일 경우 Secure=true여야 한다는 것이다.
Secure
secure속성은 https에서만 쿠키 전송이 가능한 속성이었다.
아 Domain을 사야겠구나!
Domain 구매 (feat. Gabia)
타닥타닥 cheap domain 검색.
해외의 다양한 사이트가 나왔다. 그리고 찾아본 가격은 한국 사이트와 큰 차이가 없었다.
그러면 한국사이트에서 사자!
가능한 도메인인지 확인하기
대부분의 도메인 구매 사이트에는 검색창이 있다. 그리고 원하는 도메인명을 검색하면 가능한 도메인이 가격과 함께 제시된다.
이미 futchall.com이라는 사이트는 내가 등록을 마쳐서 이미 등록되었다고 뜬다
도메인 신청하기
대부분의 설정은 기본 내용대로 하면 된다. 그러나 AWS로 배포를 했고 AWS의 Route 53을 통해 네임서버를 설정할 수 있다.
AWS의 Route 53으로 이동하자!
Route 53
route 53에 접속해서 DNS관리 호스팅 영역 생성을 클릭한다.
하고자 하는 도메인 이름을 입력한다.
입력을 완료하면 도메인 이름에 해당하는 호스팅영역이 위와 같이 생긴다. 또한 NS라는 레코드가 생기고 해당하는 값을 복사해둔다.
이전에 가비아를 통해 신청중이던 사이트로 돌아가 네임서버 목록 버튼을 클릭한다. 클릭하면 아래와 같은 창이 팝업된다.
해당 창의 각 칸에 Route 53에서 복사해온 값을 하나씩 넣어준다.
이후 결제를 하면 된다.
back과 front 도메인 설정하기
결제가 완료된 후 AWS의 Route 53에서 Record를 설정해주어야 한다.
구매한 도메인의 호스팅영역에서 레코드 생성을 누른다. 뜬 화면에서 단순 라우팅을 클릭한다.
front는 앞에 아무것도 붙지 않은 .yoursitename.com이고 ec2에서 실행중인 front인스턴스의 ip주소를 가져와 넣는다. 레코드 유형은 A로 한다. back은 api.yoursitename.com 등 front와 다른 이름을 넣어 완료한다.
🍪 설정하기
이제 쿠키에 domain속성에 값을 넣어주면 front와 back 두 도메인 사이에 쿠키가 다닐 수 있게 된다.
res.cookie(토큰명, 토큰, { httpOnly: true, maxAge: 60 * 60 * 24 * 1000, domain: '.futchall.com' });
이후 정상적으로 발급된 쿠키와 저장된 쿠키를 확인할 수 있었다.
크롬 개발자도구 network에서 response-headers의 내용
크롬 개발자도구 application의 쿠키에서 확인한 내용
마무리
덕분에 쿠키에 대해 많은 공부를 할 수 있었고 고민하게 되었다. 어떻게 해야 사용자의 경험을 높이면서 보안을 높일 수 있을까?의 고민이 더욱 필요한 것 같다.
사이트를 직접 배포하고 운영하면서 여러가지 문제점을 느낀다. 아마 이러한 경험이 앞으로의 개발경험에 중요한 영향을 미칠 것 같다.
더 매진하자.
