0. 들어가기에 앞서
- 웹을 통한 거래와 정보 공유가 더욱 활발해지면서, 웹 보안은 점점 더 중요해지는 이슈가 되고 있다.
- 이번 시간에는 웹 보안의 중요한 이슈 중 하나인 CSRF(Cross-Site Request Forgery) 공격에 대해 다루면서, CSRF 공격을 막는 방법 중 쿠키를 이용하는 방법을 알아보았다.
1. 쿠키란 무엇인가?
🙂 쿠키의 개념, 주요용도, 그리고 사용법을 알고 있다면, 바로 2. CSRF와 서드 파티 쿠키를 읽자!
1) 쿠키에 대해 알아보자!
- 쿠키는 서버가 웹 브라우저에 전송하는 데이터이다.
- 서버에서 브라우저 요청에 대한 응답을 전송할 때,
Set-Cookie
헤더에 데이터(쿠키)를 전송한다. - 아래는 서버 응답 예시로
Set-Cookie
헤더로 브라우저에 데이터(쿠키)를 전송한 모습이다. - 아래 응답값은 name 쿠키에 gicomong, age 쿠키에 520를 전송했다.
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: name=gicomong
Set-Cookie: age=520
- 브라우저는 서버 응답값에 Set-Cookie 헤더가 포함된 경우,
Set-Cookie
에 있는 데이터를 저장한다.
2) 쿠키의 주요 용도
- 쿠키는 웹 사이트에서 사용자를 식별하거나 사용자의 환경 설정 등을 저장하는 데 사용된다.
- 만약 브라우저에서 이 쿠키값을 서버로 보내면, 서버에서는 이 값을 읽어서 유저를 식별할 수 있게 된다.
3) 쿠키에 설정가능한 값
쿠키에 설정할 수 있는 값의 종류는 다음과 같다.
(1) name, value
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: name=gicomong // key=value
Name
는 쿠키의 이름으로, 이 이름을 사용하여 쿠키에 접근할 수 있다.Value
는 쿠키의 값으로, 이 값은 사용자에게 보여지지 않는다.
(2) Domain
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: name=gicomong; Domain=localhost
- 도메인을 설정하면, 이 도메인의 모든 서브도메인에서 해당 쿠키를 사용할 수 있다.
- 별도로 명시된 도메인이 없다면, 기본값으로 쿠키를 보낸 서버의 도메인으로 설정된다.
- 위 예시에서 name 쿠키는 Domain을 localhost로 설정했기에, localhost를 대상으로 한 요청에만 name 쿠키가 전송된다.
(3) Path
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: name=gicomong; Path=/;
- 쿠키를 저장하기 위한 경로로, 이 경로의 하위 경로에서만 쿠키가 사용된다.
(4) Expires/Max-Age
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: age=520; Expires=Wed, 01-Jan-2025 00:00:00 GMT;
Set-Cookie: name=gicomong; Max-Age=31536000;
Expires
는 쿠키의 만료일로, 만료일 이후에는 쿠키가 삭제된다.Max-Age
는 쿠키가 만료되기까지 걸리는 시간을 초 단위로 지정한다.
(5) Secure
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: age=520; Secure;
- 이 플래그가 설정된 경우, 쿠키는 HTTPS 연결에서만 전송된다.
(6) HttpOnly
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: name=gicomong; Secure; HttpOnly;
- 이 플래그가 설정된 경우, 쿠키는 JS를 통해 접근할 수 없게 된다.
- 악의적인 용도로 권한이 없는 사용자가 사이트에 스크립트를 삽입하는 XSS 공격을 방지할 수 있다.
(7) SameSite
HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: name=gicomong
Set-Cookie: age=520; SameSite=Lax
Set-Cookie: job=developer; SameSite=Strict
- 이 값이 설정된 경우, 쿠키는 같은 사이트에서만 전송되며 CSRF 공격을 방지할 수 있다.
🧐 여기서 잠깐! CSRF 공격은 무엇이며,
SameSite
에서 Lax, Strict가 있는데 각각의 용도는 무엇일까?
본격적으로, 이 글의 주제인CSRF
와SameSite
에 대해 살펴보자~
2. CSRF와 서드 파티 쿠키
🔑 CSRF 공격을 이해하기 위해선 서드 파티 쿠키에 대해 알아야 한다.
서드 파티 쿠키가 무엇인지 우선 짚어보고 CSRF의 개념과 CSRF 공격을 막는 방법을 알아보자!
1) 퍼스트 파티 쿠키와 서드 파티 쿠키
- 쿠키는 사용자를 식별하거나 사용자의 환경 설정 등을 저장하는 데 사용된다.
- 그리고 이 쿠키는 “설정된 도메인에 따라 퍼스트 파티 쿠키, 서드 파티 쿠키”로 나눠진다.
(1) 퍼스트 파티 쿠키(First party cookie)
- 퍼스트 파티 쿠키는 사용자가 접속한 페이지와 같은 도메인으로 전송되는 쿠키이다.
- 만약 사용자가
www.google.com
에 접속했다면, 이 도메인으로 전송되는 쿠키를 퍼스트 파티 쿠키라 한다. - 해당 쿠키를 사용하면, 재방문 여부를 식별할 수 있어 재방문 시 로그인할 필요가 없다.
- 퍼스트파티 쿠키를 활용하면 방문자의 웹사이트 행동 데이터를 수집, 분석할 수 있다.
- 만약 퍼스트 쿠키가 막히면 사용자를 식별하기 어려워지고 맞춤화 된 서비스에 제한이 생길 수 있다.
(2) 서드 파티 쿠키(Third party cookie)
- 서드 파티 쿠키는 현재 사용자가 접속한 페이지와 다른 도메인으로 전송되는 쿠키를 의미한다.
- 만약 사용자가
www.google.com
에 접속했는데 이 도메인과 다른 도메인으로 쿠키가 전송된 경우 이 쿠키를 서드 파티 쿠키라 한다. - 이 쿠키는 사용자가 방문한 여러 웹 사이트에서 공유되고 광고 캠페인에서 사용된다.
- 서드 파티 쿠키를 구체적으로 설명하면 아래와 같다.
(1) 현재 사용자는 A 사이트에 접속해 있다.
(2) A 사이트에서 사용하는 이미지가 "www.naver.com/natural.png"로 요청을 보내 받아온다고 해보자.
(3) 이 때 사용자가 이미지를 받아오는 주소의 쿠키를 가지고 있다면,
(4) 이미지를 요청할 때 쿠키를 같이 보내게 되는데, 이 쿠키를 서드 파티 쿠키라고 한다.
2) 서드 파티 쿠키와 CSRF
(1) CSRF란?(Cross-Site Request Forgery)
CSRF
는 사용자의 의사와 무관하게, 공격자가 의도한 작업을 수행토록 유도하는 공격이다.- 공격자는 사용자가 로그인한 웹 사이트에서 사용자의 계정을 통해, 공격자가 원하는 작업을 수행하도록 요청할 수 있다.
(2) 서드 파티 쿠키와 CSRF의 관계
CSRF
공격은 쿠키를 이용하는 공격인데, 공격자는 사용자의 쿠키를 복사해 사용한다.- 이 공격은 사용자가 공격 대상 웹 사이트에 이미 인증되었다는 사실을 악용한 것이다.
- 다음은
CSRF
공격은 아래와 같은 방식으로 진행된다.
1. 공격자가 제어하는 악성 웹사이트에 피해자가 방문
2. 악성 웹사이트에는 대상 웹사이트에 대한 요청을 트리거하는 HTML 또는 JavaScript 코드가 포함됨
3. 피해자의 브라우저는 요청에 인증 자격 증명(예: 세션 쿠키)을 자동으로 포함함
4. 대상 웹사이트는 인증 자격 증명을 포함하기에, 공격자가 요청한 작업을 수행하게 됨
- CSRF 공격의 핵심은 “피해자가 대상 웹 사이트에 인증된 상태에서 악성 웹 사이트를 방문하는” 것이다.
- 공격자는 피해자에게 이메일이나 문자를 통해 악성 링크를 보내고, 피해자가 링크를 클릭하도록 유도한다.
3. CSRF를 막는 SameSite
1) SameSite란?
SameSite
는 사용자가 방문한 사이트와 같은 도메인에만 쿠키가 전송되도록 제한하는 설정이다.SameSite
를 설정하면, 서드파티 사이트에서 사용자의 정보를 수집 혹은 유출하는 걸 막을 수 있다.
2) 동일 사이트 판별 기준
- 앞서 설명했듯이
SameSite
는 쿠키가 동일 사이트에서만 전송되도록 제한할 수 있다. - 그리고 동일 사이트 여부는 공개 접미사(
.com
,.org
등)가 같은 경우를 뜻한다. (더 알아보기)
www.example.com과 www.evil.com // 다른 도메인
www.example.com과 example.com:443 // 동일 도메인
www.example.com과 dev.example.com // 동일 도메인
www.example.com과 staging.example.com // 동일 도메인
www.example.com과 example.com // 동일 도메인
3) SameSite의 3가지 상태
🔑
SameSite
는 None , Lax , Strict, 총 3가지 상태가 존재한다.
(1) SameSite=None
- None로 설정시 서드 파티 쿠키는 동일 사이트 및 교차 사이트 요청 모두 전송된다.
(2) SameSite=Strict
- Strict로 설정시 서드 파티 쿠키는 전송하지 않는다.
(3) SameSite=Lax
🔑 Lax로 설정시, 서드 파티 쿠키는 아래 3가지 경우에만 전송된다.
(1) 동일 사이트 내의 요청
(2) 사이트 이동(Top Level Navigation)
(3) 안전한 HTTP 메서드 요청
- 링크(
<a>
) 클릭, 리다이렉션 이동은 (2)번에 해당하므로 쿠키가 전송된다. <iframe>
으로 문서 삽입시 쿠키가 전송되지 않는다.<iframe>
안에서 발생하는 페이지 이동은 Top Level Navigation이 아니므로 쿠키가 전송되지 않는다.<img>
로 이미지를 삽입시 쿠키가 전송되지 않는다.- 서버의 상태를 바꾸지 않는
GET
요청시 쿠키가 전송된다.
4. 마치며
- 이번 시간에는 쿠키의 개념과 CSRF(Cross-Site Request Forgery)를 막는 방법 중 하나인 SameSite에 대해 알아보았다.
- SameSite는 사용자가 방문한 사이트와 같은 도메인에만 쿠키가 전송되도록 제한하는 설정으로, None, Lax, Strict 총 3가지 상태가 존재한다.
- None은 어떤 경우든 서드파티 쿠키를 전송하고, Lax의 경우, 동일 사이트 내의 요청, 사이트 이동(Top Level Navigation), 안전한 HTTP 메서드 요청인 경우에만 서드파티 쿠키를 전송했다.
- Strict은 엄격 모드로, 서드파티쿠키 전송 자체를 막는 설정이었다.
- 대부분의 브라우저는 SameSite 기본값인 Lax이며, 일부 브라우저에서는 None 혹은 지원 자체를 하지 않는다.
- 만약 서비스를 운영할 경우 본인이 타켓팅하는 브라우저의 SameSite 기본값이 무엇인지 체크해보자. (Can i use)
참고 자료
- https://learn.microsoft.com/ko-kr/azure/active-directory/develop/howto-handle-samesite-cookie-changes-chrome-browser?tabs=dotnet
- https://www.chromium.org/administrators/policy-list-3/cookie-legacy-samesite-policies/
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value
- https://web.dev/samesite-cookies-explained/
반응형
'개발 기술 > 개발 이야기' 카테고리의 다른 글
내 조직의 리뷰 할당 현황 구하기(2) - discord webhook 사용법 (0) | 2023.06.25 |
---|---|
내 조직의 리뷰 할당 현황 구하기(1) - github API 사용법 (0) | 2023.06.19 |
Typedoc, ts 유틸 함수를 문서화해줘! (0) | 2023.04.23 |
CSS 색상 변수에 투명도를 주는 방법(feat. js) (0) | 2023.04.09 |
[JS] 커스텀 이벤트를 만드는 2가지 방법(Event, CustomEvent) (0) | 2023.03.05 |
댓글