2023.07.25 TIL - HTTPS를 이용한 쿠키 설정

[Problem]

실전 프로젝트의 끝이 보이기 시작했다....마지막으로 남겨 놓은 숙제.... HTTPS로 프론트 엔드와 백엔드를 연결하기.

연결하는 것은 별로 어렵지 않다. CORS설정만 잘해주고 서로 배포한 환경을 맞추면 된다.

But, 우리 팀이 시도하고 있는 것은 HTTPS를 통해 쿠키 보안을 강화하는 것이다.

 

[Try]

현재 백엔드가 배포한 환경은 아마존 Elastic Beanstalk, 가비아 도메인을 이용한 배포, 프론트엔드가 배포한 환경은 NAS, cloud flare를 이용한 배포였다. 여러 방법으로 시도를 했다.

1. 첫번째 시도는 NAS cloud flare의 프록시 서버와 NAS 인증서를 이용해 서버의 도메인을 프록시 서버와 연결하는 방법이었다. 인증서 승인이 됐지만 여전히 Set-cookie는 적용이 안되는 상황이었다. 아마도 프록시 서버는 서버와 브라우저 사이의 중간 역할만 할뿐 같은 도메인을 쓰고 있는 것이 아니기에 연결할 수 없는 것을 생각되었다.

2. 두번째 시도는 기술 매니저님의 도움을 받았다. 현재 아마존 서비스를 이용하고 있는 서버의 도메인을 프론트 엔드와 아마존 Amplify를 이용해 연결하는 것이다.

• Amplify를 이용한 연결

1. 앱 이름 설정

2. 현재 GitHub를 배포한 상태이므로 GitHub 선택

3. 레포지토리와 브랜치를 설정해준다.

4. 끝나면 뒤 부터 끝까지 다음을 눌러주면 된다.

5. 제일 중요한 부분은 환경 변수 설정이다. FE의 환경변수를 넣어준다.

[Solution]

이미 인증서를 백엔드가 연결해 놓은 도메인으로 발급이 돼있는 상태이므로 인증서 발급을 기다릴 필요가 없다.

결과적으로 Set-Cookie를 통해 쿠키에 토큰 값을 넣을 수 있게 되었다.

추가적으로 HTTPS의 보안을 이용하기 위해선 HttpOnly, secure 설정을 더 넣어줘야 한다.

res.append(
      "Set-Cookie",
      `{key}={value}; Max-Age=${age}; Secure; SameSite=None; Domain={your-domain}; Path=/`
    );

• SameSite
  • Strict : SameSite 강의 요청에서만 쿠키의 전송을 허용하며 가장 완벽하지만 편의성이 떨어진다.
  • Lax : Strict이지만 corss site에서의 요청이라도 safe한 요청인 Http get방식을 통한 접근 허용, Strict 모드를 보완해둔 설정
  • None: SameSite, CrossSite의 요청 모두 허용 보안에 취약하므로 지양할 필요가 있다. Secure 속성과 함께 사용해야 한다.
• Secure
  • 웹 브라우저와 웹서버가 https로 통신하는 경우만 웹브라우저가 쿠키를 서버로 전송하는 옵션
• HttpOnly
  • document.cookie를 이용해서 쿠키에 접속하는 것을 막는 옵션

[Conclusion]

이렇게 설정해서 들어간 것이 끝이 아니다. 토큰 만료 기간 설정, refresh 토큰 적용 등을 이용해서 보안을 더 강화할 필요가 있다. 물리적인 방법으로 토큰을 탈취할 수 있겠지만 이런 여러 방법을 통해 최대한으로 유저들의 보안 지킬 필요가 있다 생각한다.  한가지 아쉬웠던 점은 프로젝트 기간이 얼마남지 않아 코드 수정을 통해서 백엔드가 직접 쿠키에 접근하는 방법은 선택하지 못했다.....

위에 이미지를 보면 알겠지만 HttpOnly 적용을 뺏다. 후에 side 프로젝트를 진행할 예정인데 코드 부분도 같이 적용할 생각이다.