출처(Origin)

• 출처 (Origin)
  • 웹 사이트에 접속 시 사용 하는 URL 구조의 Protocol + Host + Port
    • Protocol(Schema) : http, https
    • Host : 사이트 도메인
    • Port : 포트 번호

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

• SOP(Some Origin Policy)

  • 동일한 출처에 대한 정책 = 동일한 출처에서만 리소스를 공유할 수 있다는 정책.

  • 웹 브라우저는 첫 번째 웹 페이지에 포함된 스크립트가 두 번째 웹 페이지의 데이터에 액세스하도록 허용하지만 두 웹 페이지 모두 동일한 출처를 가져야 한다.

    Compared URL	Outcome	Reason
    http://www.example.com/dir/page2.html	Success	Same scheme, host and port
    http://www.example.com/dir2/other.html	Success	Same scheme, host and port
    **http://**username:password@www.example.com/dir2/other.html	Success	Same scheme, host and port
    http://www.example.com:80/dir/other.html	Success	Most modern browsers implicitly assign the protocol's default port when omitted.[6][7]
    http://www.example.com:81/dir/other.html	Failure	Same scheme and host but different port
    https://www.example.com/dir/other.html	Failure	Different scheme
    http://en.example.com/dir/other.html	Failure	Different host
    http://example.com/dir/other.html	Failure	Different host (exact match required)
    http://v2.www.example.com/dir/other.html	Failure	Different host (exact match required)
    data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=	Failure	Different scheme

• SOP가 필요한 이유는 브라우저가 한 출처에서 다른 출처로 HTTP 요청을 보낼 때, 인증 세션 쿠키를 포함하여 다른 도메인과 관련된 모든 쿠키(서드 파티 쿠키 등) 도 요청의 일부로 전송되기 때문이다.
• 즉, 응답은 사용자 세션 내에서 생성되고 사용자에게 특정한 모든 관련 데이터가 필요하기에 SOP가 없을 경우 외부 사이트 접속 시 민감 정보를 포함한 정보를 읽을 수 있기 때문이다.

CORS(Cross-Origin Resource Sharing)

• CORS : 교차 출처 리소스 공유 정책, 다른 출어의 리소스 공유에 대한 허용/비허용 정책
• 서버가 브라우저가 로딩 리소스를 허용해야 하는 자체 출처가 아닌 다른 출처를 나타낼 수 있도록 하는 HTTP 헤더 기반 메커니즘
  • 브라우저가 실제 요청을 허용할지 확인하기 위해 교차 출처 리소스를 호스팅하는 서버에 “preflight” 요청을 하는 메커니즘에 의존한다.
    • Preflight Request
      1. PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH 방식 사용
      2. 금지된 헤더 이름 사용
      3. 요청 페이로드 유형이 text/plain, multipart/form-data, application/x-www-form-urlencoded 이 아닌 경우
      4. 하나 이상의 이벤트 리스너가 XMLHttpRequestUpload에 등록되어 있는 경우
• 즉, SOP 정책을 위반해도 CORS 정책에 따르면 다른 출처의 리소스라도 허용하는 것.

해결 방법

Chrome 확장 프로그램 이용

Allow CORS: Access-Control-Allow-Origin - Chrome Web Store

• 위 링크에서 Allow CORS: Access-Control-Allow-Origin 크롬 확장 프로그램 설치
• 로컬 환경에서 API 테스트 시 간편하게 사용 가능
• 단, 실 운영 환경에서는 앞서 설명한 SOP 정책 위반에 따른 보안 위협이 있으므로 사용해선 안 됨. (물론, 크롬 확장 프로그램이기에 해당 확장 프로그램이 설치되지 않은 클라이언트에서는 CORS 에러 발생)

프록시 사이트 이용