[Web] SOP와 CORS

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

어떤 출처(Origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이다. 

즉, 클라이언트의 Origin과 서버의 Origin이 같지 않으면 통신을 제한하는 것.

출처 (Origin) : URL의 스킴(프로토콜), 도메인(호스트), 포트로 정의된다.

 

개발자 도구에서 location명령어를 입력하면 출처에 대한 정보가 출력된다. 아래는 구글 크롬의 출처 정보이다.

CORS를 통해 제한을 해제할 수 있다.

 

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

추가 HTTP 헤더를 사용하여, 한 출처(Origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에서 알려주는 체제이다.

즉, 클라이언트와 서버의 출처(Origin)이 다를 때 교차 출처 통신을 할 수 있는 정책

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

CORS 등장

우리가 카카오API나 네이버API와 같이 도메인이 다른 서버에서 제공하는 APi를 사용하는 일이 많아지면서 동일한 도메인간의 통신만을 할 수 없어졌기 때문에 CORS가 등장하게 되었다.

CORS Error

예를들어 나의 React 프로젝트 localhost:3000에서 오픈API에 요청을 보내게 되면 기분 나쁜 빨간 Error를 볼 수 있다.

에러 그대로 localhost:3000와 오픈API는 서로 출처가 다른데 HTTP Header에 'Access-Control-Allow-Origin' 가 없기 때문에 HTTP 요청이 CORS 정책에 의해 차단 되었다고 알려주고 있다.

'Access-Control-Allow-Origin' 는 개발자 도구의 network tab에서 확인할 수 있다,

CORS Error 해결 방법

Server

[http header에 Access-Control-Allow-Origin 추가하는 방법.]

server단에서는 response시 header에 'Access-Control-Allow-Origin'를 추가하여 해결하는 간단한 방법이 있다.

res.header("Access-Control-Allow-Origin", "*"); // 모든 도메인
res.header("Access-Control-Allow-Origin", "localhost:3000"); // 특정 도메인

Client

[Proxy 설정하는 방법.]

외부 API 처럼 내가 서버 헤더를 설정할 수 없는 상황이라면 클라이언트와 서버 사이에 프록시 서버를 두고 요청을 주고 받을 수 있다.

프록시 서버 : 클라이언트와 서버간의 중계 서버로 통신을 대리 수행하는 서버이다.

브라우저 - 프록시 서버 - 서버

 

우리가 자주 사용하는 React를 예로 든다.

Webpack에서 간단하게 Proxy 기능을 지원해 준다. 우리가 React 프로젝트를 CRA로 생성했다면 Package.json에 설정해주는 것만으로도 간단하게 CORS를 해결할 수 있다.

package.json

아래 https://xxx 는 실제 접속하고자 하는 서버의 루트 URL이다.

그리고 http 요청할 때는 루트 URL을 뺀 나머지 부분을 요청하면 된다.

{
	"proxy": "https://api.dropper.tech/covid19/status/global"
}

요청

axios.get('/').then(res => console.log(res));

해당 API 요청이 localhost:3000으로 가는 것을 확인할 수 있다. 

 

또는 http-proxy-middleware 라이브러리를 사용한다.

 

 

참고 자료

https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html

9. CORS 와 Webpack DevServer Proxy · GitBook

https://freestrokes.tistory.com/164

React Proxy 설정하기