CORS : Cross Origin Resource Sharing

Browser에서 만든 보안정책

• 요약

선행지식

• 브라우저에서 서로 다른 주소끼리의 정보를 못 주고받는 것이 default이다.
  • SOP 정책
• 그걸 되게 하려고 CORS가 있다.

Origin이란?

HTTP 요청 헤더 중에서 Origin 이라는 헤더와 관련되어 있다.

• Origin은 아래와 같이 protocol, host, port 3개 부분으로 구성된다.

<http://www.jsonobject.com:8080/>
protocol: http
host: www.jsonobject.com
port: 8080

CORS는 CSRF 라고 불리는 브라우저 취약점 공격으로부터 브라우저 사용자를 보호하기 위해 만든 기능이다.

CORS

Cross Origin Resource Sharing

교차 출처 자원 공유 방식

<http://www.abc.com/page/1> 페이지에서
<http://www.def.com/api/user> 요청
되게하는 것
웹서버에서 <http://www.abc.com> 허용필요

• 다른 출처간에 리소스 공유를 할 수 있도록 해주는 것
  • 막고 있는게 아니라 풀어주는것
• 빨갛게 CORS오류가 뜨고 되게 하려면 CORS를 허용해줘야 한다.
  • 요청을 받을 백엔드 서버에서 허락할 출처들을 명시해놓으면 된다.

ex) 내가만든 웹사이트랑 네이버지도 API의 정보요청과 반환이 가능하도록하는게 CORS

심플 리퀘스트: 3가지 조건을 만족해야함

프리플라이트 리퀘스트 : 선행작업으로 옵션을통해 요청을 넘겨서 사용자인지 확인함

SOP

Same-Oring-Policy

동일 출처 정책

• 두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일한 출처이다.
• 똑같은 URL끼리만 API등의 데이터접근이 가능하도록 막는 것

되는 경우
<http://www.abc.com/page/1> 페이지에서
<http://www.abc.com/api/products> 요청

• 브라우저에서 막는 거임
  • 포스트맨에서는 확인 안됨
    • 서버는 값을 넘겨 주고 있음

Proxy : CORS 우회하기

• CORS 정책 위반 문제를 정석으로 해결하려면 백엔드 서비스 쪽에서 응답 헤더에 필요한 값들을 담아서 전달해야 합니다.
• 서버로부터 적절한 응답 헤더를 받지 못하면 브라우저에서 에러가 발생합니다.
  • 백엔드 서비스는 정상적인 요청과 응답은 일어나지만, 브라우저에서 에러가 발생한다는 것에 주의해야 합니다.
• 이는 포스트맨(PostMan)이나 인썸니아(Insomnia) 같은 테스트 도구에서는 CORS 정책 위반 관련 에러가 발생하지 않는 이유입니다.
• 대표적인 SPA인 리액트 어플리케이션에서도 프록시를 이용하면 이를 CORS 정책을 우회할 수 있습니다.