CORS
#
Find similar titles
- 최초 작성자
- 최근 업데이트
Structured data
- Category
- Programming
Table of Contents
CORS #
CORS는 교차 출처 리소스 공유(Cross-Origin Resource Sharing)의 약자로 이는 브라우저에서 다른 출처의 리소스를 공유하는 방법입니다. CORS 정책을 위반하게 되면 CORS 관련 이슈가 발생하게 됩니다.
출처(Orign) #
출처(Orign)란 서버의 위치를 의미하는 url 안의 Portolcol, Host, Port을 합친 것을 의미합니다. 즉, 서버의 위치를 찾아가는 데 필요한 가장 기본적인 값입니다.
브라우저 개발자 도구의 콘솔 창에 location.origin로 접근하면 출처를 확인할 수 있습니다.
console.log(location.origin);
SOP(Same-Origin Policy) #
SOP는 RFC 6454에서 처음 등장한 보안 정책으로 "같은 출처에서만 리소스를 공유할 수 있다"라는 규칙을 가진 정책입니다. 그러나 다른 출처 리소스를 사용하는 일은 굉장히 흔한 일이기 때문에 몇 가지 예외 조항을 두고 이 조항에 해당하는 리소스 요청은 다른 출처도 허용하기로 했는데, 그중 하나가 "CORS 정책을 지킨 리소스 요청"입니다. 이런 정책들은 악의를 가진 사용자가 CSRF(Cross-Site Request Forgery), XSS(Cross-Site Scripting)과 같은 방법을 사용해 사용자의 정보를 탈취하는 것을 막습니다.
같은 출처와 다른 출처의 구분 #
두 URL의 구성 요소 중 Scheme, Host, Port, 이 3가지만 동일하면 같은 출처입니다. 만약 리소스가 자신의 출처와 다를 경우 브라우저는 교차 출처 요청을 실행합니다.
CORS 동작 방법 #
다른 출처의 리소스를 요청할 때 HTTP 프로토콜을 사용하여 요청을 보내게 되는데, 이때 브라우저는 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아서 보냅니다.
Origin: https://velog.io
이후 서버가 요청에 대해 응답을 할 때 응답 헤더의 Access-Countrol-Allow-Origin이라는 값에 접근이 허용된 출처를 알려주고 응답받은 브라우저는 클라이언트가 보낸 요청의 Origin과 서버가 보내준 응답의 Access-Countrol-Allow-Origin을 비교하여 이 응답이 유효한 응답인지 아닌지 결정합니다.
CORS 해결 방법 #
Access-Control-Allow-Origin 세팅하기 #
가장 대표적인 방법은 서버에서 Access-Control-Allow-Origin 헤더에 알맞은 값을 세팅해주는 것입니다.
# 헤더에 작성된 출처만 브라우저가 리소스를 접근할 수 있도록 허용함.
# * 이면 모든 요청 허용으로, 당장 이슈는 해결할 수 있겠지만, 보안은 허술해짐으로 직접 출처를 작성하는 것이 바람직합니다.
Access-Control-Allow-Origin : https://naver.com
# 리소스 접근을 허용하는 HTTP 메서드를 지정해 주는 헤더
Access-Control-Request-Methods : GET, POST, PUT, DELETE
# 요청을 허용하는 해더.
Access-Control-Allow-Headers : Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization
# 클라이언트에서 preflight 의 요청 결과를 저장할 기간을 지정
# 60초 동안 preflight 요청을 캐시하는 설정으로, 첫 요청 이후 60초 동안은 OPTIONS 메소드를 사용하는 예비 요청을 보내지 않는다.
Access-Control-Max-Age : 60
# 클라이언트 요청이 쿠키를 통해서 자격 증명을 해야 하는 경우에 true.
# 자바스크립트 요청에서 credentials가 include일 때 요청에 대한 응답을 할 수 있는지를 나타낸다.
Access-Control-Allow-Credentials : true
# 기본적으로 브라우저에게 노출이 되지 않지만, 브라우저 측에서 접근할 수 있게 허용해주는 헤더를 지정
Access-Control-Expose-Headers : Content-Length
프록시 사이트 이용하기 #
프록시(Proxy)란 보안상의 이유로 직접 통신할 수 없는 두 점 사이에서, 통신할 경우 대리로 통신을 수행하는 기능입니다. cors는 브라우저 관련 정책임으로 브라우저를 통하지 않고, 서버 간 통신할 때는 적용되지 않습니다. 즉, 서버에서 서버로 리소스를 요청하면 cors정책을 위반하지 않고 리소스를 받을 수 있습니다. 현재 무료 프록시 서버 대여 서비스들은 악용 사례 때문에 api 요청 횟수 제한을 두어, 실전에서는 직접 프록시 서버를 구축해야 합니다.
