Cookie 에 Http Only 와 secure 를 적용시켜보자! [ Spring boot + Vue 3.x]

개요

프로젝트 진행 중, JWT 를 사용하여 웹 브라우저 쿠키에 토큰을 심어주었습니다. 

다만, Cookie 의 특성 상, 한 번 전달한 토큰은 더이상 관리하지 않는다는 점에서 보안적으로 위험하지 않을까? 에서 파생된 여러가지 대처 방안을 적용하고자 합니다.

 

그 방법 중, Refresh Token, Http Only , Secure 적용등이 있는데, 이 중 Http only 와 Secure 적용을 통해

토큰의 보안성을 강화시켜 보겠습니다.

 

티스토리만 봐도 수많은 쿠키들이 존재하며, 용도에 따른 다양한 옵션들이 걸려있다.

📌 개념정리! 

❓ Cookie 쿠키? 🍪

쿠키란 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각 입니다.

• 웹 브라우저는 그 쿠키라는 작은 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재요청 시 저장된 데이터를 함께 전송합니다.
• 이를 이용하면 사용자의 로그인 상태를 유지할 수 있습니다.

왜 이렇게 쿠키를 전송해야 하는가?

• HTTP 프로토콜은 Stateless (무상태성) 이기 때문에, 요청한 사람의 상태정보를 지소걱으로 갖고 있지 않고 연결이 끊어지게 됩니다. 따라서, 다음 요청시에 누가 보냈는지, 같은 요청상대인지 해커인지 알수 없습니다.
• 즉, 쿠키는 두 요청이 동일한 브러우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다.

 

❓ JWT ?

• JWT(Json Web Token) 이란, 토큰안에, 인증에 필요한 정보들을 담은 후 비밀키로 서명해서 사용하는 인터넷 표준 인증 방식입니다. 주로 인증(Authentication) & 권한허가(Authorization) & 세션 유지 방식으로 사용됩니다.

간략한 통신 과정

• 로그인 첫 시도 
  • 클라이언트가 로그인 시도 => 서버가 DB에서 정보를 확인 후, 원활한 회원임이 인증되면 JWT access 토큰 발급
• 페이지 이동 혹은 JWT를 통한 인가 확인
  • 클라이언트가 페이지 이동 => 서버에게 JWT 을 보내며, 해당 URL의 권한이 있는지, 로그인을 했던 사람인지를 판별 => 세션 유지 및 페이지 접근 허용

 

❓ HTTP Only ?

 

🔍왜 해당 옵션을 사용해야 하는가?

HttpOnly 쿠키 속성을 사용하면 JavaScript를 통해 쿠키에 접근할 수 없게 되어, XSS(Cross Site Scripting) 와 같이 악용 스크립트를 통해 쿠키 값에 접근하는 것을 막아줍니다.

 

하지만, Http Only 가 자바스크립트를 통한 접근을 막음으로써, XSS 공격은 막을 수 있지만, 클라이언트에서 서버로 전달하는 패킷을 가로채는 스니핑 공격은 막을 수 없습니다. 즉, 패킷을 캡쳐하여 쿠키의 정보를 뺴내는 방법을 통해 쿠키를 탈취할 수도 있습니다.

 

 

❓ Secure ?

Secure 속성은 쿠키를 생성할 때 해당 옵션을 붙이게 되면 브라우저는 HTTPS 가 아닌 통신에서는 쿠키를 전송하지 않는다. 라는 속성입니다.

 

🔍왜 해당 옵션을 사용해야 하는가?

해커들이 네트워크를 감청하며, 클라이언트에서 서버로 전달하는 패킷을 가로채는 스니핑 공격을 막기 위해, SSL 을 적용한 HTTPS 프로토콜을 사용하게 되었습니다. 

 

SSL 을 통한 암호화 HTTP 를 통해, 해커들은 아무리 패킷을 가로채어 쿠키나 여러 정보들을 가로챘다고 하더라도, 해당 정보들은 모두 암호화가 되어 있기 때문에, 더이상 정보를 알아낼 수 없습니다.

 

 

---

본격! 리팩토링 진행

Http Only , Secure 적용 전.

• 로그인이 성공했을 시, 2개의 JWT 토큰을 웹 브라우저에게 전달
• 둘 다 Http Only , Secure 설정은 없는 상태

 

  아래의 GIF 를 클릭해서 봐주세요!  

0

쿠키는 세팅이 됐지만, Http Only, Secure 등의 옵션은 적용되지 않은 상태

자바스크립트를 통한 쿠키 삭제 가능

• Http Only 가 없다면 자바스크립트로 접근이 가능합니다. 따라서 만일 로그아웃을 구현하였더라도, 그저 클라이언트측에서 쿠키를 삭제하는 로직을 이용하면 가능합니다.
• Vue project : js-cookie 를 활용하여, 단순 자바스크립트 접근을 통해 로그아웃 구현

 

  아래의 GIF 를 클릭해서 봐주세요!  

0

자바스크립트를 통한 쿠키 접근 및 삭제

 

자바스크립트로 접근이 가능하다는 점에서 프론트엔드측에서 손쉽게 로그아웃 구현이 가능하지만, 보안적으로 봤을 때는 안전하지 않습니다.

 

 

HTTP Only 적용 : 자바스크립트 접근 불가능

사실 Http Only 라며 거창해보이지만, 구현은 전혀 어렵지 않습니다.

Cookie 를 제공해주는 서버측에서 (Spring boot)  원하는 쿠키에 대해 setHttpOnly(true) 옵션만 추가해준다면, 손쉽게 보안성을 강화시킬 수 있습니다.

cookie.setHttpOnly(true);

 

해당 옵션을 걸어주기만 하더라도, 클라이언트 측에선 더이상 해당 쿠키에 대해 자바스크립트로 접근이 불가능합니다.

저는 JwtToken 에 대해서만 해당 옵션을 걸어보았는데요.

자바스크립트로 쿠키를 삭제하는 로그아웃 기능으로 한 번 검증해보겠습니다.

 

  아래의 GIF 를 클릭해서 봐주세요 !  

0

 

Secure 적용 : Https 에서만 웹 브라우저에 쿠키 세팅 가능

마찬가지로 Secure 설정 또한 구현은 전혀 어렵지 않습니다.

Cookie 를 제공해주는 서버측에서 (Spring boot)  원하는 쿠키에 대해 setSecure(true) 옵션만 추가해준다면, 적용 시킬 수 있습니다.

cookie.setSecure(true);

 

해당 적용에 의해서 앞으로 HTTP 요청에 대해서는 토큰값이 쿠키에 저장이 되지 않을 것이며,

오직 HTTPS 요청에 대해서만 쿠키에 토큰이 세팅될 것 입니다.

 

제가 진행했던 프로젝트에서"JwtToken" 에 Secure 설정을 추가하고,

HTTP 와,  CA인증서를 받은 HTTPS 각각 로그인 요청을 통해 검증 해보겠습니다.

 

1. HTTP 로그인 요청 : 쿠키에 토큰 세팅 불가 ❌

  아래의 GIF 를 클릭해서 봐주세요 !  

0

2. HTTPS 로그인 요청 : 쿠키에 토큰 세팅 가능 ⭕

  아래의 GIF 를 클릭해서 봐주세요 !  

0

이로써, Http only 와 Secure 적용의 리팩토링을 통해 프로젝트의 보안성을 한층 더 높일 수 있었습니다!

 

설정은 간단할 지 몰라도, 개념을 알고 적용해간다는 것이 결코 쉽지만은 않았던 것 같습니다 🙂