[NetWork] CORS(Cross-Origin Resource Sharing)

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)

 

개발하다가 흔히 볼 수 있는 아래와 같은 내용이다. 오늘은 이 CORS에 대해 포스팅해보고자 한다.

흔히 개발하다 발생하는 CORS 에러

 

 

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 HTTP 헤더에 추가되어, 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

웹 어플리케이션은 리소스의 도메인, 프로토콜, 포트가 다를때 교차 출처 HTTP 요청 실행한다.

 

- 도메인

https://www.naver.com 과 같은 주소를 도메인이라고 한다.

- 프로토콜(protocol)

컴퓨터나 원거리 장비사이에서 서로 메세지를 주고받는 양식과 규칙이다.
대표적으로는 HTTP, HTTPS, FTP 등이 있다.

- 포트

번호로 구분되며 네트워크 서비스나 특정 프로세스를 식별하는 단위이다.
월드와이드 웹은 80포트를 사용하므로 자동적으로 이를 이와 같은 의미로 처리한다.
http://000.000.000.000:80

 

쉽게 풀어서 말하자면 교차 출처 리소스 공유의 에러가 나는 이유는 도메인 혹은 프로토콜, 포트가 달라지면 CORS를 위반했기 때문에 에러가 나는 것이다.

CORS가 있기 때문에 우리가 가져오는 리소스가 안전하다는 보장을 받을 수 있게 된다.

 

CORS는 왜 필요한 것일까?

만약 CORS가 없이  타 사이트에서 원래의 사이트를 흉내 내면서 아무 곳이나 데이터 리소스를 탈취하여 사용한다면, 보안적으로 엄청나게 큰 이슈가 될 것이다. 이와 같은 문제를 보호하기 위해 브라우저를 보호하고, 서버와 협의하여 요청할 수 있도록 하기 위해서 필요하다.

 

---

동일 출처 정책(SOP, Same Origin Policy)

웹에는 SOP와 CORS 두 가지의 정책이 있다.

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

 

동일 출처는 다음과 같은 기준 Protocol, Host, Port 가 같아야 동일한 출처로 판단된다.

아래 예시를 보면서 어떨 때 CORS가 동일한지 확인해보자.

 

기준 URL을 https://ijw9209.tistory.com으로 잡아보자 https 를 사용하니 포트는 443 포트가 되어야 한다.

url은 https://ijw9209.tistory.com의 기준을 충족하고 443과 https를 충족하면 된다.https를 사용한다는 것은 자동적으로 443 포트로 연결된다.

 

URL	같은 출처 여부	이유
https://ijw9209.tistory.com	O	프로토콜,  호스트, 포트가 같음
https://ijw9209.tistory.com/guestbook	O	프로토콜,  호스트, 포트가 같음
http://ijw9209.tistory.com	X	프로토콜이 다르다.
http://test.tistory.com	X	호스트가 다르다.

 

---

 

CORS 기본 동작 과정

 

1. 클라이언트에서 다른 리소스를 요청 시 요청 헤더에 Origin을 담아 전달한다.

 

 

2. 서버는 응답 헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 응답한다.

 

3. 클라이언트의 Origin과 서버의 Access-Control-Allow-Origin을 클라이언트에서 비교한다. 

자신이 보낸 Origin과 Access-Control-Allow-Origin을 비교해 차단 여부를 결정한다. 

응답이 유효하지 않다면, 응답을 사용하지 않게 된다.

 

---

CORS 오류 해결 방법

CORS는 다음과 같은 방법으로 해결할 수 있다.

 

1. 크롬 확장 프로그램 설치

 

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

Allow CORS: Access-Control-Allow-Origin

 

이 확장 프로그램을 이용하여 설치한 후 활성화해주면

로컬 환경에서 api 테스트 시, CORS 문제를 해결할 수 있다.

 

2. 서버에서 Access-Control-Allow-origin 세팅

 

이러한 코드를 삽입하여 전체 경로의 CORS의 요청을 허용할 수 있지만

// CORS 허용
res.setHeader('Access-Control-Allow-origin', '*');
res.setHeader('Access-Control-Allow-Credentials', 'true'); // 쿠키 주고받기 허용

이와 같이 구체적으로 출처를 명시해주면 더 좋다.

res.setHeader('Access-Control-Allow-origin', 'https://ijw9209.tistory.com');

 

 

---

 

 

도움이 된 글

- https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

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

- https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F#Same_Origin_%EA%B8%B0%EC%A4%80_(%EC%B6%9C%EC%B2%98_%EB%B9%84%EA%B5%90)