1. CORS

Cross-Origin-Resource-Sharing 의 줄임말로, 교차 출처 리소스 공유 라는 뜻

• 브라우저에서 요청시 (Origin)이 다르면 발생하는 브라우저 정책
• CORS는 허가되지 않은 외부 요청을 막고, 악의적으로 정보가 탈취되는 것을 막아줌

출처 : CORS의 기본 개념과 동작 방식(부제: Preflight 요청이란?)

CORS(Cross-Origin Resource Sharing, 크로스 오리진 리소스 공유)는 웹 브라우저에서 서로 다른 도메인, 프로토콜, 또는 포트에서 자원을 공유할 수 있도록 허용하는 보안 기능입니다. 기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy, SOP)을 따르며, 이 정책은 보안상의 이유로 한 도메인에서 로드된 웹 페이지가 다른 도메인의 리소스에 접근하지 못하게 제한합니다. -chatGPT-

CORS가 필요한 이유 : 웹 애플리케이션이 API 서버와 통신할 때, 특히 이 서버가 다른 도메인에 위치한 경우, 브라우저는 보안상의 이유로 이러한 요청을 차단합니다. 하지만 일부 경우에는 서로 다른 출처에서 리소스를 요청해야 할 때가 있으며, 이를 허용하기 위해 CORS가 사용됩니다. -chatGPT-

당장 브라우저의 개발자 도구만 열어도 DOM이 어떻게 작성되어있는지, 어떤 서버와 통신하는지, 리소스의 출처는 어디인지와 같은 각종 정보들을 아무런 제재없이 열람할 수 있지 않은가?

최근에는 자바스크립트 소스 코드를 난독화해서 읽기 어렵다고 하지만, 난독화는 어디까지나 난독화일 뿐이지 암호화가 아니다. 그리고 아무리 난독화되어있다고 해도 사람이 바로 이해할 수 없는 정도도 아닌데다가, 소스 코드를 직접 볼 수 있다는 것 자체가 보안적으로 상당히 취약한 부분이다.

이런 상황 속에서 다른 출처의 어플리케이션이 서로 통신하는 것에 대해 아무런 제약도 존재하지 않는다면, 악의를 가진 사용자가 소스 코드를 쓱 구경한 후 **CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting)** 와 같은 방법을 사용하여 여러분의 어플리케이션에서 코드가 실행된 것처럼 꾸며서 사용자의 정보(토큰이나 쿠키 등)를 탈취하기가 너무나도 쉬워진다

출처 : https://evan-moon.github.io/2020/05/21/about-cors/#access-control-allow-origin-세팅하기

1.1 cross-origin

같은 출처와 다른 출처의 구분을 판단하는 법

• 프로토콜 : http / https 두 프로토콜은 다름
• 도메인 (Host) : localhost / example.com 두개는 다름
• Port : 8080 / 3000은 다름

cross-origin은 다음 중 한 가지라도 다른 경우를 말함. 이 세개 중에 하나라도 다르면 CORS가 발생

즉, 위 3가지만 동일하면 같은 출처라고 판단

2. CORS 검사 방식

출처를 비교하는 로직이 서버에 구현된 스펙이 아니라 브라우저에 구현되어 있는 스펙

CORS 정책을 위반하는 리소스 요청을 하더라도 해당 서버가 같은 출처에서 보낸 요청만 받겠다는 로직을 가지고 있는 경우가 아니라면 서버는 정상적으로 응답을 하고, 이후 브라우저가 이 응답을 분석해서 CORS 정책 위반이라고 판단되면 그 응답을 사용하지 않고 그냥 버림

<aside> 💡 응답의 파기 여부는 브라우저가 결정, 브라우저를 이용하지 않고 서버 간 통신을 할 때는 이 정책이 적용되지 않음

</aside>