10분 테코톡 쿠키의 쿠키

==🍪 HTTP 쿠키 이해와 활용==

1. 💡 쿠키란 무엇인가?

• 서버가 사용자 웹 브라우저에 전송하는 작은 데이터 조각
• 브라우저는 저장 후 동일 서버에 재요청 시 함께 전송
• ==stateless==한 HTTP 프로토콜 보완

1.1. ⚙️ 쿠키 동작 방식

• 웹사이트 접근 시 서버가 쿠키 생성 및 전송
• 클라이언트에 쿠키 저장
• 재방문 시 클라이언트가 쿠키를 서버에 전송
• 서버는 쿠키를 통해 사용자 식별

sequenceDiagram
    participant 사용자
    participant 브라우저
    participant 서버

    사용자->>브라우저: 웹사이트 접근
    브라우저->>서버: 요청
    서버->>브라우저: 응답 (Set-Cookie 헤더 포함)
    브라우저->>브라우저: 쿠키 저장
    사용자->>브라우저: 웹사이트 재방문
    브라우저->>서버: 요청 (Cookie 헤더 포함)
    서버->>서버: 쿠키 확인 및 사용자 식별
    서버->>브라우저: 응답

2. 📊 쿠키의 종류 (라이프 타임 기준)

2.1. ⏳ 세션 쿠키

• 세션 종료 시 (브라우저 종료) 삭제
• 휘발성 쿠키, ==Expires==, ==Max-age 속성 없음==

2.2. 💾 영속 쿠키

• ==Max-age 또는 Expires 속성으로 만료 기간 설정==

• 명시된 기간 이후 삭제

• 만료 시점은 ==클라이언트 시간 기준==

  ==예시:==

  Set-Cookie: cookieName=cookieValue; Expires=Wed, 19 Jun 2024 00:00:00 GMT

3. 🌐 쿠키의 종류 (스코프 기준)

3.1. 🎯 Domain

• 쿠키가 적용될 도메인 지정
• ==Domain=crew-wiki.site 설정 시 a.crew-wiki.site==, ==b.crew-wiki.site 등 하위 도메인도 쿠키 접근 가능==

3.2. 📂 Path

• 쿠키가 적용될 URL 경로 지정
• ==Path=/wiki 설정 시 /wiki/ 하위 경로에 모두 적용==

4. 🛡️ 쿠키의 종류 (보안 기준)

4.1. 🔒 Secure

• HTTPS 프로토콜에서만 전송
• 민감한 정보 저장에는 적합하지 않음

4.2. 🚫 HttpOnly

• JavaScript를 통한 쿠키 접근 방지 (XSS 공격 방어)
• ==document.cookie API 사용 불가==

5. ✅ 쿠키의 장점

5.1. 👤 사용자 맞춤 편의성 제공

• 자동 로그인, "일주일 간 다시 보지 않기" 기능, 테마 설정 등

5.2. 📈 사용자 행동 및 선호도 추적

• 개인 관심사에 맞는 컨텐츠 제공
• 예: 과자 구매 페이지 방문 기록 기반 맞춤 광고

5.3. 📊 사이트 내 사용자 트래킹 분석

• 구글 애널리틱스(GA) 활용
• 사용자 행동 분석을 통한 서비스 개선

6. ❌ 쿠키의 단점

6.1. ⚠️ 서버 부담 증가

• 모든 요청에 헤더에 포함되어 전송되므로 데이터 과다 시 부담 가중

6.2. 🔒 개인정보 탈취 우려

• 민감한 정보 저장 시 보안 취약점 발생 가능

6.3. 🚨 보안 이슈

• XSS 공격에 취약
• 토큰 탈취 가능성 존재 (HttpOnly 설정 미흡 시)

6.4. 🕵️‍♂️ 추적 (프라이버시 침해)

• 원치 않는 관심사 노출 가능

7. 📚 결론

• 쿠키는 편리하지만 보안 및 프라이버시 이슈 존재
• 레벨 3 프로젝트 시 백엔드와 협업하여 적절히 활용 필요

대본

==안녕하세요 저는 쿠키라는 주제로 발표를 하게 된프론트엔드 6기 쿠키라고 합니다소개로는 쿠키란? 그리고 쿠키의 종류가 무엇인지그리고 쿠키의 장단점이 뭐가 있을지에 대해서 알아보도록 하겠습니다자 쿠키가 뭘까요 이렇게 맛있는 쿠키일까요아니면 이렇게 내가 만든 쿠키를 주는 프론트엔드의 쿠키일까요아니겠죠이번 시간에 말할 쿠키는 HTTP 쿠키를 소개하려고 합니다보시면 서버가 사용자의 웹 브라우저에 전송하는작은 데이터 조각을 의미하고요그리고 브라우저가 저장해 뒀다가동일한 서버에 재요청 시데이터를 함께 전송할 수 있게 됩니다이렇게 웹사이트가 있어요그러면 저장되는 쿠키를 가지고 “정보 줘”라고서버를 날리잖아요그러면 이제 쿠키를 확인하고요소와 함께 왔다 갔다 하는 흐름인 겁니다자 그러면 쿠키가 왜 등장했을까요이렇게 stateless한 HTTP 프로토콜을 보완하기 위해 등장을 했어요여기서 stateless란서버와 클라이언트가 서로 통신을 끝낸 후상태를 저장하지 않는다는 의미인데요통신 입장에서는 효율적일 수 있어요그런데 정보를 유지해야 하는 서비스 입장에서는다음과 같은 문제가 발생할 수 있습니다서로 다른 크루들이 거짓말로 “나는 쿠키야”라고 하면서버는 누가 쿠키인지 모르겠죠그래서 “쿠키야 반가워”라고 응답할 수 밖에 없게 됩니다근데 좀 더 크리티컬한 상황을 생각해보자면동시에 수정을 막는 서비스를 생각해본다면 어떻게 될까요제가 이제 “나 이거 수정할게”라고 요청하면”그래 쿠키야 수정해 이제 다른 사람이 못하게 막아둘게”라고 하게 돼요그리고 쿠키의 가면을 쓴 사람이”나 수정 완료했어”라고 하게 되면”그래 쿠키야 고생했어 잘 반영해 줄게”라고 답을 하게 되겠죠그리고 또 다른 쿠키 가면을 쓴 사람이”나 이거 수정할게”라고 하면서버는 누가 진짜 쿠키인지 모르니까”그래 쿠키야 수정해 막아둘게”라고 응답을 할 수밖에 없겠죠근데 제가 수정을 하려고 했을 때”뭐야 나 이렇게 수정 안 했는데”라고 하면서버는 진짜 누가 쿠키인지 모르니까”나는 수정하라는 대로 수정했을 뿐이야”라고 밖에 답을 줄 수가 없어요이런 좀 슬픈 상황이 일어날 수 있는데이거는 이제 쿠키가 해결해 줄 수 있습니다stateless라는 단점을 보완하기 위해 등장을 했고요클라이언트에서 쿠키를 들고”안녕 나는 쿠키야”라고 날리게 되면 서버에서 내 쿠키를 보고”쿠키야 반가워”라고 할 수 있게 되는거에요”안녕 나는 쿠키야”라는 거짓말을 했을 때에”파슬리잖아”라고 할 수 있게 되겠고”토다리야 “라고 해줄 수 있게 되는거에요그래서 지금까지 쿠키를 정리해보면 HTTP 요청을 수신할 때서버는 응답과 함께 Set-Cookie 헤더를 전송할 수 있습니다쿠키는 보통 브라우저에 저장되며클라이언트에 저장된다는 소리에요쿠키는 같은 서버에 만들어진 요청들의 쿠키HTTP 헤더 안에 포함되어 전송이 됩니다쿠키가 만들어지는 과정을 좀 자세히 소개해드릴게요사용자가 페이지에 접근을 합니다그러면 쿠키가 만들어져요서버에서 쿠키를 만들고 요소와 함께 쿠키를 전달하게 됩니다그러면 이 쿠키를 클라이언트에 저장을 해 놓은 거예요그리고 사용자가 그 페이지에 다시 접근을 하게 되면쿠키를 들고 가요그럼 서버에서 이제 쿠키임을 인식할 수 있어요저임을 인식할 수 있어요그리고 이제 같은 쿠키를 재전송 하게 됩니다여기서 만약에 내용이 바뀌었다면변경된 값으로 바뀌게 돼요이제까지 쿠키를 알아봤다면쿠키의 종류가 뭐가 있을지 알아보겠습니다라이프 타임을 관점으로 봤을 때두 가지로 나눌 수 있는데세션 쿠키, 영속 쿠키로 나눌 수 있습니다세션 쿠키부터 보면 현재 세션이 끝날 때 삭제가 되고브라우저가 종료가 될 때 삭제가 됩니다그래서 이 쿠키는 휘발성 쿠키라고 생각하시면 돼요Expires, Max-age 속성이 없는 거예요오른쪽은 영속 쿠키라고 하는데Max-age나 Expires 기간이 있고그 명시된 기간 이후에 삭제가 됩니다여기 보시면 속성으로 이렇게 주었죠그러면 2024년 6월 19일까지는 쿠키가 유효한 거고그때까지는 쿠키를 쓸 수 있는 거예요근데 주의점이 만료 시점이 서버의 시간이 아니라쿠키가 적용되는 클라이언트의 시간이 기준이라는 것을 주의하셔야 됩니다다음은 스코프인데어떤 url에 쿠키를 보내야 하는지에 따라서두 개로 나눌 수 있어요도메인이 있고 패스가 있는데Domain=crew-wiki.site를 주게 되면a.crew-wiki.site, b.crew-wiki.site 등의 서버 도메인도쿠키를 볼 수 있게 되는 거예요그리고 Path를 보게 되면Path에 /wiki를 두게 됐을 때wiki/ 밑에 오는 또 다른 여러 가지 Path에 모두 매칭이라서그쪽에 알맞은 쿠키를 보낼 수 있게 된 거예요다음 이제 보안이 있는데Secure와 HttpOnly가 있어요Secure를 설정하게 되면HTTPS 프로토콜 상에서암호화된 요청일 경우에만 전송이 됩니다근데 이렇게 보면 뭔가 안전할 것 같지만이제 본질적으로 쿠키가 안전하지 않아서민감한 정보를 저장하는 것은 권장하지 않는다고 합니다그리고 HttpOnly가 있는데 이거는값을 설정하게 되면 XSS 공격을 방지할 수 있어요이걸 설정하게 되면 쿠키로 이제document.cookie API에 접근이 불가능하기 때문에외부에서 공격자가 코드를 넣어서 공격하는게 불가능합니다이렇게 쿠키의 종류 6가지를 섞어서 사용하시면 될 거 같고다음부터 이제 쿠키의 장단점에 대해서 한번 소개해드리려고 해요쿠키는 자동 로그인 같은 사용자 맞춤 편의성을 제공 가능합니다제가 쿠키를 들고 페이지에 접근을 해요이미 왔다갔다 했겠죠페이지에 접근을 하게 되면 서버에서 쿠키를 보고”이 사람은 쿠키구나”라고 해서 “쿠키야 안녕”이라고 해줄 수 있겠죠이렇게 자동 로그인을 할 수도 있고또 다른 예시로는일주일 간 다시 보지 않기라는 기능도 있고 사용자의 테마이런 편의 설정도 설정해 줄 수 있어요다음으로 사용자의 행동과 선호도를 추적해서개인의 관심에 맞는 컨텐츠 제공이 가능합니다제가 과자를 좋아해서과자 구매 페이지를 자주 들어간다고 가정을 해볼게요쿠키를 들고 과자 구매 페이지도 들어가겠죠그러면 서버에서 쿠키는 과자를 좋아하는구나라고 파악하게 되고그리고 다른 과자 구매 사이트를 제공해 줄 수 있어요이렇게 개인의 관심에 맞는 컨텐츠를 제공 가능하다는게 두 번째 장점입니다다음으로 사이트 내 사용자 트래킹 분석이 가능한데이거는 주로 구글 애널리틱스에서 많이 사용을 해요제가 개발자라고 생각을 할게요그래서 사용자가 수정 페이지로 많이 접근을 해요그러면 서버가 GA로 쿠키를 보내게 되는데GA에서 사람들이 접속한 사이트의 회원을 보고사람들이 수정 페이지를 많이 쓰는구나그럼 내가 수정 페이지에 힘을 쓰면 사람들이 더 좋아하겠네라는분석도 가능하게 되는 거예요지금까지 쿠키를 보면 굉장히 편리한 것 같죠하지만 단점도 존재하게 됩니다서버로의 요청마다 헤더에 붙어서 요청이 됩니다그래서 쿠키에 너무 많은 데이터를 넣으면계속 왔다 갔다 할 때마다 요청이 되기 때문에서버에 부담을 줄 수 있다는 단점이 있고요두 번째 개인정보를 저장할 시 탈취 우려가 있습니다쿠키는 27살이라는 것을 쿠키에 넣어서 전달한다고 해볼게요그러면 이제 악의적인 사용자가 와서 “쿠키의 나이를 알아냈어”개인정보 탈취 우려가 있습니다다음, 보안 이슈가 있는데쿠키에 토큰을 넣는다고 생각을 해볼게요그러면 XSS공격, 외부에서 코드를 집어넣어 공격을 한다고 했죠”토큰을 가져와서 거기에 넣으면 내 코드가 실행이 되겠네” 하겠죠물론 HttpOnly를 집어 넣게 되면 안된다고는 하지만그걸 뚫는 방법도 존재한다고 합니다그래서 본질적으로 보안이슈 때문에쿠키에다가 민감한 정보를 넣으면 안돼요이게 단점이고다음은 추적입니다제가 과자 구매 페이지를 좋아한다고 했을 때쿠키는 과자를 좋아하는구나 하고다른 과자 구매 사이트 제공을 해준다 했죠근데 저는 과자를 좋아하는 걸다른 사람들에게 밝히고 싶지 않았어요어떤 사람이 이제 제 모니터를 보고 과자 구매 사이트 광고가 나오니까과자를 좋아한다고 밝혀 버리게 되는 거겠죠이렇게 내가 원하지 않는데다른 관심사를 보여주게 되는 단점도 존재할 수 있습니다지금까지 내 쿠키가 무엇인지 쿠키가 어떻게 만들어지는지그리고 쿠키의 종류가 무엇인지 장단점이 뭔지 알아봤는데여러분 레벨 3 때 이제 프로젝트를 하잖아요백엔드랑 같이 협업을 할 때쿠키를 적절하게 활용하면제가 뿌듯하지 않을까 싶습니다참고문헌 및 저작권을 적었고 네 발표 여기서 마치겠습니다==