CORS란?
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록하는 매커니즘.
웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
하지만 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해 사용한다.
url구조
- 도메인(domain): naver.com
- 오리진(origin): https://www.naver.com/PORT
URL 구조에서 살펴본 Protocal, Host, Port를 합친 것:origin
예를 들어 beomy.github.io라는 도메인 주소를 사용하는 웹페이지에서 beomy-api.github.io라는 API 서버로 데이터를 요청해서 화면을 그린다면 이 웹페이지는 동일 출처 정책을 위반한 것이 된다.
Preflight request
Preflight 요청은 서버에 예비 요청을 보내서 안전한지 판단한 후 본 요청을 보내는 방법이다.
GET, POST, PUT, DELETE 등의 메서드로 API를 요청했는데, 크롬 개발자 도구의 네트워크 탭에 OPTIONS 메서드로 요청이 보내지는 것을 보신 적 있으시다면 CORS를 경험한 것.
Preflight 요청은 실제 리소스를 요청하기 전에 OPTIONS라는 메서드를 통해 실제 요청을 전송할지 판단한다.
OPTIONS 메서드로 서버에 예비 요청을 먼저 보내고, 서버는 이 예비 요청에 대한 응답으로 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보낸다. 브라우저는 단순 요청과 동일하게 Access-Control-Allow-Origin 헤더를 확인해서 CORS 동작을 수행할지 판단한다.
필요이유
CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting)
내가 서비스하고 있지 않은 사이트에서 세션을 요청해서 세션을 획득할 수 있다면 해당 사이트는 악의적으로 내 세션을 탈취하거나 다른 행동을 할 수 있다. 그래서 브라우저에서는 이러한 요청을 막는다.
피싱사이트가 대표적인 공격 사례인데 이러한 것을 막고 내가 허용한 origin들만 요청할 수 있도록 하기 위해 필요하다.
동작 방법
- 브라우저가 리소스를 요청할 때 추가적인 헤더에 정보를 담는다.
- 내 origin은 무엇이고 어떤 메소드를 사용해서 요청을 할 것이고 어떤 헤더들을 포함할 것인지를 담아서 서버에 전송한다.
- 서버는 서버가 응답할 수 있는 origin들을 헤더에 담아서 브라우저에게 보낸다.
- 브라우저가 이 헤더를 보고 해당 origin에서 요청할 수 있다면 리소스 전송을 허용하고 만약 불가능하다면 에러를 발생시킨다.
[참고]
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
'개발몰입과정 개념스터디 > 3차' 카테고리의 다른 글
Class Component vs Functional Component (0) | 2022.02.05 |
---|---|
React Virtual Dom란? (0) | 2022.02.05 |
JWT란? (0) | 2022.02.05 |
JavaScript의 비동기 기술 (0) | 2022.02.05 |
TypeScripts란? (0) | 2022.02.05 |