❗ 아래의 글은 공부 목적으로만 사용되며, 내용의 저작권은 모두 "드림핵"에 있음을 밝힙니다. ❗
- 웹 서버는 클라이언트와 HTTP 프로토콜을 통해 통신함
💻 HTTP 프로토콜
- connectionless : 요청 하나 당 응답을 한 번 해주고 연결을 종료한다. ( 요청 마다 새로운 연결을 해서 응답을 주고 받는다 )
GET, POST 메서드, 자원의 위치를 가리키는 URL 포함
- stateless : 통신이 끝난 후 상태 정보를 저장하지 않음
헤더를 통해 웹 서버에 요청을 보내고, 웹 서버는 헤더를 읽어 클라이언트에 결과 값 반환.
이 때, 헤더에는 클라이언트의 정보와 요청 내용의 데이터, 클라이언트의 인증 정보 등도 포함될 수 있다!
쿠키
클라이언트 측에 저장
key와 value로 이루어짐. 클라이언트의 상태와 정보를 표현하는데 사용
서버가 클라이언트에 쿠키 발급 시, 클라이언트는 서버에 요청을 보낼 때 쿠키와 함께 전송
- 리소스 낭비를 줄이기 위해 modern storage APIs를 통한 데이터 저장 방식 권장
- 쿠키 저장 시 만료 시간 지정이 가능하며, 이후에는 클라이언트에서 쿠키가 삭제된다.
서버측
// 헤더에 Set-Cookie 추가
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;"document.cookie 명령어를 통해 크롬 웹브라우저에서 쿠키 정보를 확인할 수 있다.
쿠키 변조
쿠키가 클라이언트 브라우저에 저장된다는 점을 이용하여, 쿠키 정보를 변조해 서버에 요청을 보내는 것
세션
서버 측에 저장
클라이언트가 인증 정보를 변조할 수 없게 세션에서 인증 정보를 서버에 저장하고 해당 데이터에 접근할 수 있는 키( Session ID )를 만들어 클라이언트에 전달
브라우저는 세션 ID를 쿠키에 저장하고, 서버는 요청에 포함된 세션 ID에 해당하는 데이터를 가져와 사용자를 인증한다.
Session Hijacking
쿠키를 훔쳐 이용자의 인증 상태를 훔치는 것
- F12를 누른 후 network 탭에서 Preserve log를 체크하고 로그인을 한다.
- Application의 Cookies 목록 내 서버의 set-cookie 헤더를 통해 설정된 쿠키를 확인할 수 있는데, session id 헤더 값을 복사한 후 이 값을 삭제한다. 새로고침 시 로그인이 풀려있다.
- 쿠키 값에 sessionid 헤더를 추가하고, 값에다 복사한 session id 헤더 값을 삽입한다. 새로고침 시 로그인이 된 것을 확인할 수 있다.
SOP(Same Origin Policy)
- 클라이언트에게서 가져온 권한 데이터를 악의적인 페이지에서 읽을 수 없도록 하는 보안 메커니즘
브라우저는 웹 리소스를 통해 간접적으로 사이트에 접속할 시에도 인증 정보인 쿠키를 함께 전송한다.
Origin 브라우저가 가져온 정보의 출처. Protocol, Scheme, Port, Host로 구성됨. 이 때, 이 모두가 일치해야지 동일한 origin 이라고 한다.
cross origin의 데이터 읽고 쓰기
외부 출처에서 불러온 데이터를 읽을 때는 오류가 발생하여 읽지 못한다. 단, 데이터를 쓰는 것에는 문제가 없다.
Cross Origin Resource Sharing (CORS)
- Cross Site의 리소스를 공유할 수 있도록 SOP의 제한을 받지 않고 Cross Origin의 데이터를 처리할 수 있도록 하는 메커니즘
- CORS와 관련된 HTTP 헤더를 추가하여 전송. (JSONP 방법도 사용 가능)
CORS preflight
CORS 헤더 방식에서의 http 메소드 중 OPTIONS를 통해 수신측 웹 리소스의 접근 관련 질의를 하는 과정
JSON with Padding (JSONP)
JSONP 방식은 <script> 태그로 Cross Origin의 데이터를 불러옴
<script> 태그 내에서는 데이터를 자바스크립트 코드로 인식하므로 callback 함수 활용
-> 현재는 거의 사용하지 않는 추세
❗ 아래의 글은 공부 목적으로만 사용되며, 내용의 저작권은 모두 "드림핵"에 있음을 밝힙니다. ❗
