[면접대비] CORS

웹 제작을 하면서 자주 마주친 CORS.... 그게 뭔지 찾아볼 생각은 안하고 걍 아 X같네 ~ 하고 넘어갔었던 기억이 난다. 

proxy? 라는 파일을 추가해서 막았던 거 같은데 한번 알아보자!! 

 

CORS (Cross-Origin-Resource-Sharing)

브라우저가 보안적인 이유로 cross-origin HTTP 요청들을 제한한다. 그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다. 만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절한다.

 

이러한 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데, 이것을 CORS라고 한다!

 

cross-origin

 

 

cross-origin이란 다음 중 한 가지라도 다른 경우를 말한다.

1. 프로토콜 - http와 https는 프로토콜이 다르다.

2. 도메인 - domain.com과 other-domain.com은 다르다

3. 포트 번호 - 8080 포트와 3000 포트는 다르다.

 

 

CORS의 필요 이유

CORS가 없이 모든 곳에서 데이터를 요청할 수 있게 되면, 원래 사이트를 흉내낸 다른 사이트에서 사용자가 로그인을 하도록 만들고, 로그인 세션을 탈취해 악의적으로 정보를 추출하거나 다른 사람의 정보를 입력하는 등 공격을 할 수 있다. 

이렇게 공격을 할 수 없도록 브라우저에서 보호하고, 필요한 경우에만 서버와 협의하여 요청할 수 있도록 하기 위해 필요하다.

 

CORS의 동작 과정

Simple requests인 경우

1. 서버로 요청을 한다.

2. 서버의 응답이 왔을 때 브라우저가 요청한 Origin과 응답한 헤더 Access-Control-Request-Headers의 값을 비교해 유효한 요청이라면 리소스를 응답한다. 유효하지 않다면 브라우저에서 이를 막고 에러 발생.

 

*Simple requests? HTTP method가 다음 중 하나(GET, HEAD, POST)이고 자동으로 설정되는 헤더를 제외하고 설정할 수 있는 다음 헤더들만 변경(Accept, Accepts-Language, Content-Language)하며 Content-Type이 다음과 같음(application/x-www-form-urlencoded, multipart/form-data, text/plain)

 

preflight 요청일 경우

1. Origin 헤더에 현재 요청하는 origin과 Access-Control-Request-Method 헤더에 요청하는 HTTP method와 Access-Control-Requests-Headers 요청 시 사용할 헤더를 OPTIONS 메서드로 서버로 요청. 

2. 브라우저가 서버에 응답한 헤더를 보고 유효한지 확인. 

 

*preflight 요청 ? Simple requests가 아닌 cross-origin 요청은 모두 preflight 요청을 하게 되는데, 실제 요청을 보내는 것이 안전한지 확인하기 위해 먼저 OPTIONS 메서드를 사용해 cross-origin HTTP 요청을 보냄. 

 

 

SOP(Same-Origin Policy)

웹 생태계에는 다른 출처로 리소스 요청을 제한하는 것과 관련된 두 가지 정책이 존재한다. CORS와 SOP이다.

SOP은  “같은 출처에서만 리소스를 공유할 수 있다”는 정책이다.

 

 

https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

아래 블로그 애용하고 있숩니다

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

https://velog.io/@sebinn/CORS-%EB%B0%9C%EC%83%9D-%EC%9B%90%EC%9D%B8%EA%B3%BC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

CORS 발생 원인과 해결 방법