페이스북과 쿠키
디자이너가 개발자와 일 하다 보니 (4)
"Nomad Coders - 페이스북과 쿠키의 상관관계? Cookie 기초개념 잡아드림." 강의를 바탕으로 정리하였다. '유저의 정보를 저장해두었다가 요청이 들어오면 저장된 정보를 내보낸다.'라는 개념은 알고 있었지만 어디에 저장이 되고 어떠한 원리인지 깊게 알지 못하였다. 마침 좋은 강의가 있어 정리해보려고 한다.
01. HTTP 쿠키
#웹 쿠키, 브라우저 쿠키
HTTP란
Hyper Text Transfer Protocol
www 상에서 정보를 주고받을 수 있는 프로토콜로, 주로 HTML 문서를 주고받는데 쓰인다.
클라이언트와 서버 사이에서 이루어지는 요청 - 응답 프로토콜 (request/response)
Request/Response
클라이언트가 HTTP 요청을 서버에 보내면, 서버는 요청을 처리한 후 결과에 따른 HTTP 응답을 클라이언트에게 보낸다.
클라이언트와 서버 사이의 소통은 평문(ASCII) 메시지로 이루어진다.
Stateless
HTTP 통신에서는 state라는 개념이 존재하지 않는다. 즉, 통신을 서로 주고받더라도 클라이언트와 서버가 서로 연결되어 있는 것이 아니라 각각의 통신은 독립적이다. 단일 요청에 대해 하나의 응답이 나오므로 웹사이트는 유저와 항상 연결되어 있지 않다.
쿠키가 생긴 이유
HTTP 웹사이트에 해당 페이지의 HTML를 요청하면, 응답을 받는 순간(HTML을 받는 순간) 연결이 끊어진다.
예를 들어 네이버는 유저 개인, 개인에게는 관심이 없다. 유저가 홈페이지를 요청했다면 네이버는 응답하면 끝이다. 연결을 살려놔야 할 이유가 없는 것이다. 그러나 가끔 유저를 기억해야 할 상황이 생긴다. 웹사이트에 유저 프로필이 있는 경우, 선호하는 언어가 있을 경우, 유저의 주소 등 그래서 쿠키가 생긴 것이다.
02. Auth Cookies
# 인증 쿠키
강의 참고하여 작업하였습니다.비밀번호 123456을 가진 '효진'이라는 유저가 있다. 그리고 서버와 DB(데이터베이스)가 있다.
DB와 서버가 유저의 이름, 비밀번호를 받으면, 쿠키(영수증)를 만들어준다. 영수증에는 이건 '효진이다. 신뢰한다.'라고 적혀있다. → 그리고 'id: 1a2b3c4d' 라고 적혀있는 영수증을 다시 유저에게 보내준다. 유저는 '효진'이라고 적혀있는 영수증을 잘 보관해야 한다.
이 과정은 브라우저에서 이루어지고 브라우저는 자동으로 모든 쿠키(영수증)를 가져가 유저의 하드디스크에 저장한다.
강의 참고하여 작업하였습니다.브라우저는 데이터를 저장해 놓았다가 유저가 웹사이트에 요청을 보낼 때마다 저장된 데이터를 함께 전송한다.
예를 들어 유저가 Who am I라고 요청을 보내면 → 브라우저는 자동으로 쿠키(영수증)를 보내고 → 서버는 영수증을 보고 오! 효진이군 이라고 확인한 후 응답한다. → 안녕 효진! → 필요한 정보를 얻었다면 연결은 종료된다. 만약 효진이 다시 서버와 이야기하고 싶다면 다른 영수증을 또다시 보내야 한다. 모든 요청 때마다 항상 일어난다.
03. Lang Cookies
# 언어를 위한 쿠키
쿠키는 사용자가 선호하는 언어 및 기타 설정 등 사용자의 방문 관련 정보를 웹사이트가 기억할 수 있도록 도와준다.
강의 참고하여 작업하였습니다.예를 들어 언어 설정을 한글로 하였다면, 유저가 서버에 요청을 보낼 때마다. 서버에게 '이 유저는 한국인이야'라고 적힌 쿠키를 준다. → 서버는 그에 맞게 응답한다. '안녕!' 왜냐하면 쿠키를 읽고 언어 설정에 맞춰 응답을 하기 때문이다.
강의 참고하여 작업하였습니다.동일하게 유저가 언어 설정을 스페인어로 변경하면 → 서버는 그에 맞게 응답한다. 'HOLA!'
04. 쿠키 규칙
# The Rules of Cookies
1) 쿠키는 1개의 도메인에 한정되어 있다.
Domain Scoped
예를 들어 페이스북에 의하여 생성된 쿠키는. 넷플릭스로 보낼 수 없다.
쿠키는 각각의 도메인에 한정되어 있어 페이스북이 만든 쿠키는 페이스북 안에서만 보내질 수 있다. 동일하게 네이버는 넷플릭스에서 온 쿠키를 읽을 수 없다.
2) 쿠키는 자동으로 보내진다.
Sent Automatically
서버는 원하는 만큼 쿠키를 보낼 수 있고, 브라우저는 자동으로 쿠키를 저장한다.
'쿠키를 저장하시겠습니까?'와 같은 팝업창은 보지 못 하였을 것이다. 왜냐하면 유저가 원하든 원하지 않든 자동으로 보내지기 때문이다.
3) 자동으로 세팅된다.
Set Automatically
유저가 컨트롤할 수 있는 건 없다.
예를 들어 쿠키가 없는 깨끗한 크롬 창이 있다. → 뉴욕타임스 코리아를 검색한다. → 뉴욕타임스 코리아에 접속한다. → 웹사이트의 쿠키를 살펴본다.
쿠키는 한 도메인에 한정되어 있다고 했는데 이상하다?
이론적으로는 뉴욕타임스의 쿠키만 받아야 한다. 그러나 전혀 모르는 쿠키들이 들어오고 있다.
그렇다 이것은 페이스북이 우리에 대해 잘 알고 있는 이유이기도 하다.
첫 번째 규칙이 쿠키는 1개의 도메인에 한정되어있다. 페이스북이 만든 쿠키는 페이스북에서만 받을 수 있어야 한다.이다.
강의 참고하여 작업하였습니다.이렇게 효진의 블로그가 있다. 여기엔 페이스북 링크도 없고, 텍스트가 좀 있는 텅 빈 HTML 페이지이다. 이런 상황에서 페이스북이 쿠키를 받을 수 있을까? 정답은 '없다.'이다.
도메인은 한정되어있기 때문에 각기 다른 도메인이라면 쿠키도 모두 다르고, 서로 정보 공유도 할 수 없다.
강의 참고하여 작업하였습니다.그러나 효진의 블로그에 페이스북 링크가 삽입된 페이스북 좋아요가 붙어 있다면?
물론 페이스북으로 이동하는 링크가 아니라 관련 없는 좋아요 버튼일 수도 있고, 작은 자바스크립트를 다운로드하거나 작은 픽셀 이미지를 다운로드하는 것일 수도 있다.
그러나 여기에는 페이스북 링크가 삽입되어 있는 좋아요 버튼이기 때문에 페이스북에게 무언가를 요청한다면, 브라우저는 페이스북의 쿠키로 가득 찰 것이다.
따라서 페이스북이 알게 되는 정보는 '쿠키 1234를 갖고 있는 유저 효진의 블로그에서 좋아요 버튼을 요청하고 있다.'
이와 같은 이유로 뉴욕타임스 코리아에 접속했을 때 방문도 해본 적 없는 웹사이트의 쿠키(구글, 아마존 등등)를 얻게 되는 것이다. 그리고 페이스북의 똑똑한 전략 덕분에 좋아요 버튼이 다 심어지게 되었고, 우리의 정보도 공유되게 되었다.
피드백을 준
Back-end Developer_Aejeong Shin
Thank you :)
노마드 코더 Nomad Coders, 페이스북과 쿠키의 상관관계? Cookie 기초개념 잡아드림, 2019. 7. 26
