[Dreamhack] W - STAGE 3 Cookie & Session

1. 쿠키

---

HTTP 프로토콜은 Connectionless와 Srateless의 특징을 가지고 있어 클라이언트를 기억하지 못한다. 이러한 특성을 갖는 HTTP에서 상태를 유지하기 위해서 쿠키가 탄생했다. 쿠키는 Key와 Value 값으로 이루어진 일종의 단위로 서버가 클라이언트에 쿠키를 발급하면 클라이언트는 서버에 요청을 보낼 때마다 쿠키를 함께 전송해 서버가 클라이언트를 구분할 수 있게 한다.

 

💡 Connectionless : 하나의 요청에 하나의 응답을 한 후 연결을 종료하는 것

Stateless : 통신이 끝난 후 상태 정보를 저장하지 않는 것

 

쿠기는 일반적으로 상태 정보와 정보 기록을 표현하는데 사용되는데 보편적으로 상태 정보에서 클라이언트를 구분하기 위한 사용을 한다. 정보 기록의 경우 리소스 낭비가 될 수 있어 대신하는 Modern Storage APIs 등을 사용하기도 한다.

쿠키는 클라이언트 측에서 저장되기 때문에 변조 될 수 있다. 세션 하이재킹 (Session Hijacking)은 타 이용자의 쿠키를 훔쳐 인증 정보를 획득하는 공격이다.

쿠키 생성

서버 측 생성: 헤더에 추가

---

HTTP/1.1 200 OK
Server: Apache/2.4.29 (Ubuntu)
Set-Cookie: name=test;
Set-Cookie: age=30; Expires=Fri, 30 Sep 2022 14:54:50 GMT;
...

---

클라이언트 측 생성: 자바 스크립트를 통한 추가

---

document.cookie = "name=test;"
document.cookie = "age=30; Expires=Fri, 30 Sep 2022 14:54:50 GMT;"

---

 

2. 세션

---

쿠키는 웹 통신에서 클라이언트가 변조할 수 있기 때문에 쿠키에 인증 상태를 저장하면서, 이 정보를 변조할 수 없게 하기 위한 세션을 사용한다. 세션은 인증 정보를 서버에 저장하고 해당 데이터에 접근할 수 있는 키(ex. Session ID)를 만들어 클라이언트에 전달하는 방식으로 작동한다. 따라서 세션은 개인의 고유한 값이기 때문에 이를 변조할 수 없다.

쿠키는 데이터 자체를 이용자가 저장하고 세션은 서버가 저장한 다는 것이 핵심적인 차이이다.

 

3. SOP(Same Origin Policy)

---

웹 서비스에서 쿠키를 변조하지 못하도록 하기 위해 동일 출처 정책, SOP 보안 매커니즘이 탄생했다. HTTP 요청에 포함되는 쿠키는 웹 리소스를 통해 간접적으로 타 사이트에 접근할 때도 전송되는데, 이는 클라이언트 권한 위조 공격(CSRF)이 발생하는 원인이 된다. 따라서 우리는 브라우저가 가져온 정보의 출처인 오리진을 구분하게 된다.

오리진은 프로토콜, 포트, 호스트의 구성 요소를 가지는데 이 요소들이 모두 일치해야 동일한 오리진으로 취급된다 SOP는 Cross Origin 이 아닌 Same Origin일 때만 정보를 읽을 수 있도록한다.

 

Same Origin

---

sameNewWindow = window.open('<https://dreamhack.io/lecture>');
console.log(sameNewWindow.location.href);

결과: <https://dreamhack.io/lecture>

 

Cross Origin

---

crossNewWindow = window.open('<https://theori.io>');
console.log(crossNewWindow.location.href);

결과: Origin 오류 발생

 

---

 

Cross Origin 데이터 읽기/쓰기

위와 같이 외부 출처에서 불러온 데이터를 읽으려고 할 때는 오류가 발생해 읽지 못하지만 데이터를 쓰는 것은 문제가 없다.

---

crossNewWindow = window.open('<https://theori.io>');
crossNewWindow.location.href = "<https://dreamhack.io>";

 

 

3. CORS(Cross Origin Resource Sharing)

---

SOP는 클라이언트 측 보안에 중요한 요소이다. 브라우저가 이 정책에 구애받지 않고 외부 출처에 대한 접근을 허용해주는 경우가 있는데 예를 들어 <img>, <script>, <style>등의 CSS 태그와 이미지나 자바스크립트가 있다. 이 경우들 외에도 SOP를 완하하여 다른 출처의 데이터를 처리해야하는 경우가 있는데 이 때 사용하는 공유 방법을 교차 출처 리소스 공유라고 한다. 구체적인 방법은 관련된 HTTP 헤더를 추가해 전송하거나 JSON with Padding(JSONP)를 사용한다.

CORS preflight

---

CORS는 발신측에서 CORS 헤더를 설정해 요청하면 수신측에서 헤더를 구분해 정해진 규칙에 맞게 데이터를 가져갈 수 있도록 설정한다.

 

Figure 3. 발신측의 HTTP 요청

수신측에 웹 리소스를 요청해도 되는지 질의하는 과정을 CORS preflight라고 한다

---

OPTIONS /whoami HTTP/1.1
Host: theori.io
Connection: keep-alive
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: <https://dreamhack.io>
Accept: */*Referer: <https://dreamhack.io/>

 

Figure 4. 서버의 응답

---

HTTP/1.1 200 OK
Access-Control-Allow-Origin: <https://dreamhack.io> //해당하는 Origin에서 요청 허용
Access-Control-Allow-Methods: POST, GET, OPTIONS //해당하는 메소드 요청만 처리
Access-Control-Allow-Credentials: true //쿠키 사용 여부 판단
Access-Control-Allow-Headers: Content-Type //헤더의 사용 가능 여부 확인

 

 

JSON with Padding(JSONP)

---

JSONP는 이미지나 자바스크립트, CSS 리소스가 외부에 대한 접근을 허용한다는 특성을 이용해 <script>로 Cross Origin의 데이터를 불러온다. 하지만 데이터를 자바스크립드로 인식하기 때문에 Callback함수를 활용해야한다. 다만 CORS가 생기기 전에 사용하던 방법으로 현재는 거의 사용되지 않는다.