[TIL] 로컬 서버를 https로 셋팅하기

임수현·2021년 6월 20일
1
post-thumbnail
  1. 문제 상황

프로젝트에서 로그인 상태를 관리하기 위해 jwt를 활용하고 있습니다.
그러다가 최근에 jwt를 관리하는 방식이 바뀌게 되어 OAuth 2.0의 방식으로 access token과 refresh token을 활용하게 되었고, 이중 refresh token을 httoOnly cookie로 셋팅을 해야만 하는 상황이 되었습니다. 그래서 제 백엔드 동료가 header에 set-cookie로 토큰을 넘겨주고 저는 그것을 활용하기로 했습니다.
하지만 일반 토큰은 로컬 환경에서 쿠키에 잘 저장이 되었지만, httpOnly 토큰은 저장이 되질 않았습니다. 그래서 이 문제를 해결하기 위해 며칠을 고생하게 되었고, 이 기록을 남기게 되었습니다.

  1. httpOnly 쿠키가 저장되지 않은 이유

2-1) httpOnly cookie란?

httpOnly cookie란 오직 set만 가능하고, 자바스크립트에서 document.cookie로 접근할 수 없는 cookie를 말합니다. 즉, 해커가 자바스크립트를 활용하여 해당 토큰을 취할 수 없다는 것을 의미합니다.
하지만 여기서 의문점이 드실 수 있습니다.

"set만 가능하고 내가 이 토큰을 활용할 수 없다면, 그게 무슨 소용이지?"

여기서 cookie의 특성을 활용하면 우리는 충분히 이런 문제를 해결할 수 있습니다. cookie는 http 통신을 하게 될 때, 매 통신마다 header에 담겨서 통신이 이루어집니다. 즉,우리가 별도의 셋팅을 하지 않더라도 백엔드에서 cookie를 활용할 수 있다는 뜻입니다.
따라서 우리가 원하는 정보를 안전하게만 저장할 수 있다면, 우리는 이 정보를 마음껏 활용할 수 있습니다.

2-2) httpOnly cookie를 저장하지 못한 이유

여기서 앞서 말한 문제점에 직면하게 됩니다. httpOnly cookie는 브라우저의 정책상, .com과 같은 정식 도메인을 제외한 일반 로컬과 같은 환경에서는 set-cookie를 하더라도 저장되지 않는다는 것이죠. 제가 이 cookie를 저장하지 못한 이유가 바로 이것입니다.

  1. 로컬에서 httpOnly cookie를 저장하는 방법

이 문제를 해결하기 위해 며칠을 헤메다가 발견한 놀라운 방식이 있습니다. 우리는 localhost의 주소를 https://[예시].com 형식으로 설정할 수 있습니다(해당 방법은 mac을 기준으로 작성되었습니다).

3-1) /etc/hosts에서 현재 ip와 가짜 url을 매핑해준다.

mac의 설정에 들어가서 네트워크 탭을 들어가보면 현재 내가 어떤 ip주소를 가지고 있는지 알 수 있습니다. 해당 아이피 주소를 .com 형식으로 바꿔주는 것이기 때문에 그 아이피 주소를 우리는 알고 있어야 합니다.

$ sudo vi /etc/hosts

터미널 창에 해당 명령어를 입력한 후

# 
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

//아래의 정보를 입력한다.
(당신이 현재 사용하고 있는 ip)     dev.example.com 

3-2) mkcert로 가짜 url SSL 인증서를 생성한다.

mkcert는 개발환경에 SSL 인증서를 만들어주는 라이브러리입니다. 터미널에서 brew로 설치해주면 됩니다..

brew install mkcert

React 루트 폴더로 들어가 mkcert를 실행하고 example.com SSL 인증서를 만들어 주도록 합니다.

$ mkcert -install
$ mkcert "*.example.com" 127.0.0.1 ::1

그럼 루트 폴더에

// 해당 파일명은 예시입니다. 실제 파일명은 이와 다소 다를 수 있습니다.
_wildcard.example.com-key.pem 
_wildcard.example.com.pem

파일들이 생성됩니다.

3-3) npm start 명령어 바꿔주기

이렇게 pem key가 생성된 후에는 package.json에서 npm start 스크립트에 SSL 인증서 위치를 설정해주도록 합니다.

  "scripts": {
    ...,
    "start": "HTTPS=true SSL_CRT_FILE=_wildcard.example.com.pem SSL_KEY_FILE=_wildcard.example.com-key.pem HOST=0.0.0.0 start:react",

3-4) happy hacking!!

여기까지 셋팅한 후에 리액트를 로컬에서 실행시켜보면 기존의 localhost:3000 이 보안 이슈 에러페이지를 보여주게 됩니다. 이때 당황하지 말고, 우리가 처음에 설정한, 새로운 localhost의 주소(.com형식):3000을 입력하면 리액트 페이지가 정상적으로 나타나는 것을 확인할 수 있습니다.

  1. 마무리

로그인 토큰을 관리하는 것은 주니어 프론트엔드 입장에서 항상 어렵고 고민이 많이 되는 문제인 것 같습니다. 그래도 보다 안전한 방법인 httpOnly 방식을 알게 되어 다행이고, 이를 local 환경에서도 다룰 수 있게 되어서 정말 행복했던 경험이었습니다. 다른 분들에게도 보다 안전한 token 관리방법이 되었으면 좋겠습니다.

참고자료)
https://velog.io/@yaytomato/React-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-https%EB%A1%9C-%EB%A1%9C%EC%BB%AC-%ED%85%8C%EC%8A%A4%ED%8C%85%ED%95%98%EA%B8%B0

profile
상상을 구현하고픈 프론트엔드 개발자입니다.

0개의 댓글