TL;DR

<aside> 💡 origin 즉 프로토콜, 호스트명, 포트등 이 다르면 리소스의 접근을 금지하는 정책

</aside>

배경(Background)

Intro

이전 XSS편에서 말했듯이 요즘 최신 브라우저들은 기본적으로 XSS, CSRF등의 방어가 가능하다.

이는 CORS를 통해 방어하는데, 원리는 대략 아래와 같다.

<aside> 💡 서버 Response header 옵션 중 Access-Control-Allow-Origin에 포함되지 않은 출처의 리소스는 일단 접근을 금지시키기.

</aside>

하지만 웹 서비스를 구축하다보면 꽤나 많은 확률로 외부 리소스를 받아야 할 일이 생기는데,

이 때는 서버측에서 Access-Control-Allow-Origin: <https://리소스를> 받고자 하는 외부 출처

이런식으로 Access-Control-Allow-Origin 에 추가해주면 된다.

<aside> ⚠️ Access-Control-Allow-Origin: * 이렇게 와일드 카드를 추가해도 되지만, 이는 보안상 취약할 수 있다.

</aside>

Front-end에서 CORS 해결하기