동일-출처 정책(SOP)
Same-origin policy는 웹 애플리케이션의 중요한 보안 모델
- 일치하는 HTML 태그를 경우하는 이미지, CSS 스크립트 등 출처를 경우해 리소스 임베드하는것 제한되지 않음
- 웹 브라우저 보안을 위해 프로토콜, 호스트, 포트가 동일한 서버로만 Ajax 요청을 주고 받을 수 있도록 한 정책
→ 잠재적으로 해로울 수 있는 문서 분리함으로써 공격받을 수 있는 경로 줄여줌
동일한 출처의 정의
- 프로토콜
- 포트(명시한 경우)
- 호스트
→ 두 URL의 세개의 조건이 모두 같아야 동일한 출처라고 표현
😱 그럼, 출처가 다른 도메인에서의 AJAX요청이라도 데이터 접근 권한을 허용하고 싶다면...?
→ CORS 활용해 접근 가능!
CORS란?
교차 출처 리소스 공유(Cross-Origin Resource Sharing)
- 현재 실행 중인 orgin에서 다른 origin의 리소스에 접근할 수 있도록 브라우저에게 알려주는 것
HTTP의 일부로, 어떤 호스트에서 자신의 콘텐츠를 불러갈 수 있는지 서버에 지정할 수 있는 방법입니다.
즉, Same-Origin Policy 의 문제점을 해결하기 위한 정책으로 웹 페이지 상의 제한된 다른 출처를 가진 리소스 요청 시 cross-origin HTTP 요청 실행
(웹 페이지는 교차 출처 이미지, 스타일시트, 스크립트, iframe, 동영상을 자유로이 임베디드 가능)
CORS 동작 원리
출처 : https://commons.wikimedia.org/wiki/File:Flowchart_showing_Simple_and_Preflight_XHR.svg
서버 CORS 해결 방법 - response
Access-Control-Allow-Originresponse header- Node의 CORS 라이브러리
1. Access-Control-Allow-Origin response header
- 서버가 접근 제어 요청을 위해 보내는 HTTP 응답 헤더
- 서버 응답이 origin 요청 헤더에 따라 다르다는 것을 클라이언트에 알려줌
Access-Control-Allow-Origin: https://mozilla.org --> 특정 도메인
Access-Control-Allow-Origin: * --> 모든 도메인이외 사용할 수 있는 response header
-
Access-Control-Expose-Headers→ 브라우저가 접근할 수 있는 헤더를 서버의 화이트리스트에 추가
-
Access-Control-Max-Age→
preflightrequest 요청 결과를 캐시할 수 있는 시간을 나타냄 -
Access-Control-Allow-Credentials→
credentials플래그가true일 때 요청에 대한 응답을 표시할 수 있는지를 나타냄 -
Access-Control-Allow-Methods→ 리소스에 접근할 때 허용되는 메서드를 지정
-
Access-Control-Allow-Headers→ 실제 요청시 사용할 수 있는 HTTP 헤더를 나타냄
2. Node.js Express 미들웨어 CORS
- CORS 미들웨어 설치 후
cors()사용 해 적용
클라이언트 CORS 해결방법 - reqeust
직접 구현한 서버 없이 클라이언트 내에서만 해결해야 하는 상황 존재
- proxy 서버 설정
proxy 서버 설정
proxy란?
→ 다양한 이유로 직접 통신하지 못하는 두개의 컴퓨터 사이에서 서로 통신할 수 있도록 돕는 역할
- 클라이언트 package.json 파일에
proxy: host:portNumber작성 http-proxy-middleware패키지 사용
HTTP 프로토콜에서의 CORS
http → https⇒ jsonp 이용 시 호출 가능https → http⇒ 호출 불가능
출처
