본문 바로가기

Infrastructure/Network

 (22)
[Network] CORS 해결 예제 이전 장(링크) 에서는 CORS란 무엇인지에 대해서 알아보았다. 이번 장에서는 실제로 현업에서 만날수 있는 상황을 예로 들어 해결하는 방법에 대해서 알아본다. 개발 환경 OS: CentOS: 7 Docker: 20.10.17 Docker-compose: 1.27.4 Spring Boot: 2.7.0 Nginx: 1.21.6 상황 필자가 자주 경험한 두 상황을 예로 들어 해결하는 방법을 알아보려 한다. 상황 1 개발자가 자신의 PC에서 프론트엔드 코드를 직접 빌드하여 서버에 있는 API 서버에게 요청을 보내는 상황이다. 개발자 PC의 브라우저에 http://localhost:3000으로 접속한다. Origin은 http://localhost:3000이 된다. 브라우저의 요청을 받은 Reverse Proxy..
[Network] CORS 란? 매번 CORS에 대해서 정리해야겠다는 마음만 가지고 있고 정리를 미루고 있었다. 최근 진행한 W사의 기술 인터뷰에서 질문으로 나왔지만 명확한 답변을 하지 못하였고 현재 진행중인 사이드 프로젝트에서 발생하는 CORS관련 에러도 명확하게 해결하지 못하였다. 이 글을 읽은 사람들은 필자와 같은 실수를 하지 않기를 바라면서 개발자들을 힘들게 하는 CORS에 대해서 정리해보도록 한다. SOP(동일 출처 정책) 란? CORS를 학습하기 위해서는 SOP라는 개념에 대해서 먼저 학습해야 한다. 동일 출처 정책(same-origin policy)는 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이다. 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분..
[HTTP] 헤더 - 4 (쿠키) 쿠키의 사용 이유와 사용법에 대해서 알아본다. 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다. HTTP는 무상태 (Stateless) 프로토콜이므로 클라이언트와 서버가 요청과 응답을 주고 받으면 연결이 끊어진다. 클라이언트가 다시 요청을 시도할 때 서버는 이전 요청에 대한 정보를 알지 못한다. 이러한 무상태성의 취약점을 보완하기 위하여 쿠키를 사용한다. 만약 쿠키를 사용하지 않고 요청을 한다면 모든 요청의 query parameter나 request body에 사용자 정보가 추가되야한다. GET /car?user={사용자 정보} HTTP/1.1 POST ..
[HTTP] 헤더 - 3 (일반 정보) HTTP 헤더의 일반적인 정보에 대해서 알아본다. From 유저 에이전트의 이메일 정보를 표시한다. 검색 엔진등에서 주로 사용된다. 요청시에만 사용된다. 일반적으로는 잘 사용되지 않는다. Referer 현재 요청된 페이지의 이전 웹 페이지 주소를 나타낸다. 클라이언트의 유입 경로를 알기위해서 주로 사용된다. (티스토리의 유입 경로도 이 헤더를 기반으로 수집하려나..) 요청시에만 사용된다. referer은 referrer의 오타이다. User-Agent 유저 에이전트 애플리케이션 정보를 표시한다. 클라이언트가 요청시에 사용한 애플리케이션의 정보를 나타낸다. 통계 정보나 장애가 발생하는 특정 브라우저를 찾기위해서 사용된다. 요청시에만 사용된다. Server 요청을 처리하는 ORIGIN 서버의 소프트웨어 정보..
[HTTP] 헤더 - 2 (전송 방식) HTTP 전송 방식에 대해서 살펴본다. 단순 전송 (Content-Length) 요청 GET /car응답 HTTP/1.1 200 OK Content-Type: text/html;charset=UTF-8 Content-Length: 4000 body... 압축 전송 (Content-Encoding) 요청 GET /car응답 HTTP/1.1 200 OK Content-Type: text/html;charset=UTF-8 Content-Encoding: gzip Content-Length: 2000 eyJzdWIiOiJzYWxseUBpbWFzbGFiLmN...분할 전송 (Transfer-Encoding) 요청 GET /car응답 HTTP/1.1 200 OK Content-Type: text/plain Tran..
[HTTP] 헤더 - 6 (조건부 요청) 효율적인 캐싱을 위한 조건부 요청에 대해서 알아본다. Last-Modified (데이터가 마지막에 수정된 시간)을 이용 요청 GET /car.jpg응답 HTTP/1.1 200 OK Content-Type: image/jpeg Content-Length: 40000 cache-control: max-age=60 Last-Modified: 2021-06-25 10:00:00 eyJzdWIiOiJzYWxseUBpbWFzbGFiLmN...첫 번째 요청에서 클라이언트는 응답 결과, 캐시 유효 시간, 마지막 수정 일시를 저장한다. 61초 후에 재요청 GET /car.jpg if-modified-since: 2021-06-25 10:00:00이때, 로컬에 저장되어 있는 클라이언트의 캐시 유효 시간은 60초이므로 서버..
[HTTP] 헤더 - 5 (캐시) HTTP 헤더를 사용한 캐시와 조건부 요청에 대해서 알아본다. 캐시 기본 동작 캐시가 없는 경우 (HTTP 헤더의 사이즈: 0.1mb, HTTP 바디의 사이즈: 1.0mb라고 가정) 요청 GET /car.jpg 응답 HTTP/1.1 200 OK Content-Type: image/jpeg Content-Length: 40000 eyJzdWIiOiJzYWxseUBpbWFzbGFiLmN... 재요청 GET /car.jpg 응답 HTTP/1.1 200 OK Content-Type: image/jpeg Content-Length: 40000 eyJzdWIiOiJzYWxseUBpbWFzbGFiLmN... 첫번째 요청과 두번째 요청 모두 응답 메시지 바디에 같은 데이터가 들어가있다. 이렇게 캐시가 사용되지 않는 경..
[HTTP] 헤더 - 1 (일반 헤더) HTTP 헤더의 역할 그리고 일반적인 헤더의 종류와 그 역할에 대해서 알아본다. HTTP 헤더의 역할 header-field = field-name":" OWS field-value OWS field-name은 대소문자 구분이 없다. 아래의 요청과 응답 부분에서 진하게 적어놓은 부분이 헤더 부분이다. 요청 GET /car?manufacturer=hyundai?modelName=sonata HTTP/1.1 Host: www.google.com 응답 HTTP/1.1 200 OK Content-Type: text/html;charset=UTF-8 Content-Length: 3423 body... 과거 버전(RFC2616)과 현재 버전(RFC723*)의 차이를 알아보자. RFC2616의 헤더 0) POST /..

티스토리툴바