/Network/ CORS와 CORS 허용

1. CORS

교차 출처 자원 공유(cross-origin-resource-sharing)

여기서 교차 출처라고 하는 것은 엇갈린 다른 출처를 의미한다.

CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인을 가진 리소스에 접근하려 할 때,
보안적인 이유로 제한된 요청들을 안전하게 액세스 할 수 있게하는 HTTP 헤더 기반 보안 메커니즘이다.

이전에는 SOP(Same-Origin Policy) 정책이 존재하였는데, SOP는 같은 출처 내에서만 요청을 허용했기 때문에 제한 사항이 컸다.

2. CORS 에러

보통 Same Origin/Cross Origin 정책의 정보 부족으로 인해,
정책을 위반하는 행동을 하게 되면 CORS 에러가 나타나게 된다.

에러코드를 살펴보면 이런내용이다.

Access to fetch at ‘https://myhompage.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

‘https://myhomepage.com’에서 ‘https://localhost:3000’ 출처로 가져올 수 있는 액세스가 CORS 정책에 의해 차단되었습니다. 요청된 리소스에 Access-Control-Allow-Origin 헤더가 없습니다. 불투명한 응답이 필요에 적합한 경우, 요청 모드를 ‘no-cors’로 설정하여 CORS가 비활성화된 리소스를 가져오십시오.

내 홈페이지 https://myhomepage.com 에서
다른 홈페이지 출처의 http://localhost:3000 의 리소스를 가져오는데 있어
CORS 정책으로 인해 차단된 것이다.

2-1. Origin(출처)

👉 Origin(출처)

Protolcol 과 Host 그리고 Port 까지 모두 합친 URL을 의미
1. Protocol(Scheme) : http, https
2. Host : 사이트 도메인
3. Port : 포트 번호

  https://   www.domain.com   :3000/
(Protolcol)       (Host)         (Port) 

👉 출처(Origin)의 동일함을 판단하는 방법

두 URL의 구성 요소 중 Protocol(Scheme), Host, Port
이 3가지만 동일하다면 동일 출처로 판단한다.

✔️ ️URL
　1. Protocol(Scheme) : http, https
　2. Port : 포트 번호
　3. Path : 사이트 내부 경로
　4. Query string : 요청의 key와 value값
　5. Fragment : 해시 태그

3. SOP(동일 출처 정책)

Same-Origin Policy

👉 SOP(Same Origin Policy)

동일한 출처에서만 리소스를 공유할 수 있다.
- 동일 출처(Same-Origin) 서버에 있는 리소스는 자유로이 가져올수 있지만,
- 다른 출처(Cross-Origin) 서버에 있는 이미지나 유튜브 영상 같은 리소스는
  상호작용이 불가능하다는 말이다.

3-1. SOP(동일 출처 정책)이 필요한 이유

출처가 다른 두 어플리케이션이 자유롭게 소통할 수 있는 환경은 악의적으로 홈페이지에 접속하려는 사람들에게 이용되기 쉽다. 제약이 없다면 우리가 만들 어플리케이션에서 해커들이 심어놓은 코드가 실행되어 개인정보를 빼앗길 수도 있을 것이다.

만약 사용자가 악성 사이트에 접속했을 경우,
이때 해커가 몰래 심어놓은 악의적인 자바스크립트가 실행되어, 사용자가 모르는 사이에 어느 포털 사이트에 요청을 보내게 될 것이다.
그럼 포털 사이트에서 해당 브라우저의 쿠키를 이용하여 로그인을 하거나 개인정보를 보냈을 경우,
사이트에서 해커서버로 그 정보들을 재차 보내게 되어 우리의 개인정보가 유출당할 수 있다.
이외에도 사용자가 접속중인 내부망의 아이피와 포트를 가져오거나 해커가 사용자 브라우저를 프록시처럼 악용할 수도 있다.

따라서 이러한 악의적인 경우를 방지하기 위해,
SOP 정책으로 동일하지 않는 다른 출처의 스크립트가 실행되지 않도록 브라우저에서 사전에 방지를 해줄 수 있다.

✔️ 프록시 서버
클라이언트가 이를 통해서 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것을 가리켜 ‘프록시’, 그 중계 기능을 하는 것을 프록시 서버라고 부른다.

4. CORS 허용

👉 서버에서의 허용

서버측 응답에서 접근 권한을 주는 Access-Control-Allow-Origin 응답 헤더를 추가
:브라우저가 해당 origin이 리소스에 접근할 수 있도록 해줄 수 있습니다.
응답 헤더에 있는 Access-Control-Allow-Origin에 있는 도메인과, 요청 헤더에 있는 도메인을 확인해 출처를 비교해서 허용해 주는 방법입니다.

👉 클라이언트에서는의 허용

프록시 서버를 이용해 도메인 주소를 같게 만들어 주는 방법

(참고)

공부한 내용을 여러글과 책 읽은 내용을 바탕으로 정리하고 있습니다.
좋은 글로 저의 공부에 도움을 주시는 분들께 감사드립니다.