웹 브라우저는 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등을 이용해 개인정보를 탈취하는 상황을 막기 위해 동일 출처 정책 (Same-Origin Policy) 을 통해 다른 출처의 스크립트나 요청이 실행되는 걸 막는다.
출처(Origin) : url의 프로토콜, 호스트, 포트를 합친 것 ( - http://localhost:3000 )
이 SOP에 의해 서버 요청이 차단될 때 CORS 에러가 발생하는데 사실 에러는 아니고 CORS를 이용하면 다른 출처의 리소스를 가져올 수 있는 해결책이다.
그럼 웹 문서에 모든 출처 정책은 Same-Origin인가?그렇지 않다.
HTML태그 중 Cross-Origin을 지원하는 태그가 있다.
<img> <script> <link>의 href와 src 속성은 다른 출처의 리소스에 접근하는 것이 가능하다.
* <script type="module">은 불가능.
하지만 자바스크립트에서의 요청은 기본적으로 SOP를 따른다.
1. XMLHttpRequest
2. Fetch API 요청
3. 웹 폰트, 이미지, 스크립트 및 스타일 시트와 같은 외부 리소스에 대한 요청
CORS 해결 방법
1. 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달
2. 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트에 전달.
3. 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교해서 유효하다면 리소스를 받게 되고 유효하지 않다면 에러가 발생한다.
즉, 서버에서 헤더에 허용할 출처를 기재해주어야 리소스의 요청이 가능해진다.
'개념정리' 카테고리의 다른 글
| 쿠키와 세션의 특징 (1) | 2023.10.31 |
|---|---|
| attribute와 property의 차이 (0) | 2023.10.31 |
| CSR과 SSR의 차이점과 특징 (0) | 2023.10.31 |
| 브라우저의 동작 원리 (0) | 2023.10.31 |