일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 |
- javascript first class citizen
- server side rendering
- 선형리스트
- redux 특징
- es6 module
- Call stack
- express request body
- react event bind
- 일급 객체
- 자료구조
- redux 사용 이유
- task queue
- javascript eventloop
- client side rendering
- web server vs was
- parcel resolver error
- centos7 설치
- react
- 순차리스트
- 자료구조 queue
- typescript parcel tilde
- 자료구조 정렬
- javascript module
- parcel
- first class citizen
- DOM API
- Event Loop
- body-parser
- Browser API
- request body undefined
- Today
- 9
- Total
- 559,093
비실이의 개발 성장기
[Web & HTTP] CORS / SOP 학습 본문
# CORS 란?
-
Cross Origin Resource Sharing(교차 출처 자원 공유) 의 약어
-
원본 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있도록 서버에서 관련 HTTP 헤더를 추가하여 브라우저에 알려주는 체제 입니다.
# SOP 란?
-
Same Origin Policy(동일 출처 정책) 의 약어
-
원본 출처에서 실행 중인 웹 어플리케이션은 보안상의 이유로 동일한 출처의 리소스만 공유할 수 있다 라는 정책 입니다.
-
SOP 정책 중, 다른 출처 리소스 요청을 허용하는 예외 항목이 있는데 그 중 하나가 CORS 정책을 지킨 리소스 요청 입니다.
# 출처(Origin) 란?
-
URI 구조에 대해서 알아야 합니다.
-
http://localhost:3000/main?page=1#content
-
http:// 는 Protocol
-
localhost 는 Host(Domain 으로 부르기도 합니다)
-
:3000 은 Port
-
/main 은 Path
-
?page=1 은 Query String
-
#content 는 Fragment
-
-
-
CORS / SOP 정책에서 말하는 다른 출처의 기준은 URI 에서 'Protocol, Host, Port' 가 다른 경우 입니다.
-
다른 출처 예)
-
http://localhost 와 https://localhost 는 Protocol 이 다르므로 다른 출처가 됩니다.
-
http://localhost:3000 과 http://localhost:3001 은 Port 가 다르므로 다른 출처가 됩니다.
-
https://foo.com 과 https://www.foo.com 은 Host 가 다르므로 다른 출처가 됩니다.
-
-
동일 출처 예)
-
http://localhost:3000 과 http://localhost:3000/image 는 Path 가 다르므로 동일 출처가 됩니다.
-
http://localhost:3000/main 과 http://localhost:3000?pageNo=1 은 Query String 이 다르므로 동일 출처가 됩니다.
-
-
# CORS 가 동작하는 3가지 방식
-
Simple Request(단순 요청)
-
HTTP 요청 시, 아래 3가지 항목이 모두 충족되면 브라우저는 이를 Simple Request 로 판단하고 동작합니다.
-
요청 메소드가 GET, HEAD, POST 중 한가지
-
요청 헤더가 'Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width' 만 사용
-
Content-Type 값은 'application/x-www-form-urlencoded, multipart/form-data, text/plain' 만 사용
-
-
Simple Request 에 대한 응답에는 다음 헤더가 포함되어야 합니다.
- Access-Control-Allow-Origin
-
위 사항이 적용되지 않은 경우, 브라우저는 에러를 발생시키고 응답은 무시합니다.
-
-
Preflight Request(예비 요청)
-
Preflight Request 는 메인 요청을 하기 전, 브라우저가 서버에 예비 요청을 보내 통신을 위해 어떤 옵션이 적용되어 있는지 확인하는 동작 방식입니다.
-
아래 조건이 충족되면 브라우저가 Preflight Request 를 보내며, 이는 프론트엔드 개발자가 요청 로직을 구현하는 것이 아닙니다.
-
Simple Request 와 Credentialed Request 를 제외한 나머지 경우
-
-
Preflight Request 에 대한 응답을 받으면 브라우저는 허용 정책들을 비교 후, 확인이 완료되면 메인 요청을 합니다.
-
정책에 위반되는 경우, 브라우저는 에러를 발생시키고 메인 요청을 보내지 않습니다.
-
-
Credentialed Request(인증 요청)
-
Credentialed Request 는 XMLHttpRequest 혹은 Fetch 에 인증 플래그를 설정해 요청하는 방식입니다.
-
인증 플래그가 설정된 요청인 경우, 브라우저는 이를 Credentialed Request 로 판단하고 동작합니다.
-
Credentialed Request 에 대한 응답에는 아래 사항이 적용되어야 합니다.
-
Access-Control-Allow-Origin: 와일드카드(*) 가 아닌 값
-
Access-Control-Allow-Credentials: true
-
-
위 사항이 적용되지 않은 경우, 브라우저는 에러를 발생시키고 응답은 무시합니다.
-
# CORS 예제 코드
# 참고문서
'기타 Web 관련 공부' 카테고리의 다른 글
[Web] Server-Side Rendering(SSR) / Client-Side Rendering(CSR) (1) | 2020.08.19 |
---|---|
[Web] 브라우저의 기본 구조 (0) | 2018.08.23 |
[Web] 브라우저가 웹 페이지 리소스를 받아오는 과정 (0) | 2018.08.23 |