2장. CDN을 통한 CORS 및 CORS 요청

• CORS(Cross Origin Resource Sharing)는 주로 다른 원본의 컨텐츠에 대한 액세스 권한을 유효성 검증하기 위해 브라우저에서 사용하는 메커니즘

CORS의 개념

• 브라우저가 웹 페이지를 로드할 때 CORS(동일 출처 정책)을 적용 → 웹 페이지와 동일한 원본에서만 컨텐츠를 패치하도록 허용
• 경우에 따라서는 웹 페이지에서 해당 웹 사이트를 신뢰하는 여러 원본의 자산에 대한 액세스가 필요 → CORS를 사용
• Chrome, Firefox 및 Safari 등의 거의 모든 현대 브라우저는 CORS 구현 → CORS와 관련한 원본이 CDN 원본과 동일할 필요 X
• CORS의 원본은 URI 스킴, 도메인 및 가능한 임의의 포트 번호에 의해 정의
  • 예시 ) https://www.example.com:1443과 http://www.example.com는 서로 다른 원본
• CDN은 브라우저 관점에서 CORS 원본으로 간주될 수 있음
  
  
  

CDN에 대한 CORS 설정

• CDN은 원본의 CORS 설정에 대해 투명함으로 특정 CDN 구성이 필요 X
• CDN edge 서버가 일부 컨텐츠의 첫 번째 요청에 대해 캐시된 응답을 찾지 못하는 경우 해당 요청을 원본 호스트에 전달 → 원본 서버가 CORS 요청을 처리하도록 설정
• 요청에 Origin 헤더가 있는 경우 Access-Control-Allow-Origin의 CORS 헤더 및 연관된 값을 사용하여 에지에 다시 응답
• 해당 헤더 및 값을 포함하는 전체 응답이 CDN에서 캐시
• 동일한 URI 경로에 있는 오브젝트에 대한 후속 요청이 캐시에서 수행 → 원래 원본에서 수신된 Access-Control-Allow-Origin 헤더 값이 포함
  

  

다중 CORS 원본 지원

• 경우에 따라 특정 원본(전부는 아님)목록이 CDN 컨텐츠에 액세스하도록 허용 → CDN에서 다른 원본의 다른 Access-Control-Allow-Origin 응답 헤더를 제공 필요
• 원본의 와일드카드 * 아님
• CDN은 컨텐츠와 함께 헤더를 캐시하므로 일치하지 않을 수 있는 요청에 캐시된 Access-Control-Allow-Origin 헤더를 제공
• 캐시 키 조회 최적화를 활용하여 다른 원본의 URL에서 다른 매개변수를 추가 가능 → 컨텐츠 및 헤더가 다르게 캐시

• 다중 CORS 원본 지원 예시
  • 2개의 원본(abc.com, 123.com)의 컨텐츠를 제공하도록 CDN 서버(cdn.example.com)를 설정
  • 각 원본서버에 대해 다른 매개변수를 추가하려고 함
    1. abc.com 서버의 매개변수 → https://cdn.example.com/test.json?domain=abc.com
    2. 123.com 서버의 매개변수 → https://cdn.example.com/test.json?domain=123.com

• CDN은 백엔드 서버에서 제공하는 다른 Access-Control-Allow-Origin 헤더를 리턴

• abc.com 원본의 요청은 access-control-allow-origin: https://abc.com을 리턴

  $ curl -H "Origin: https://abc.com" -H "Referer: https://abc.com/" -i https://cdn.example.com/test.json?domain=abc.com
  HTTP/2 200
  access-control-allow-origin: https://abc.com
  access-control-allow-methods: GET
  access-control-allow-credentials: true
  ### 생략 ###

• 123.com 원본의 요청은 access-control-allow-origin: https://123.com을 리턴

  $ curl -H "Origin: https://123.com" -H "Referer: https://123.com/" -i https://cdn.example.com/test.json?domain=123.com
  HTTP/2 200
  access-control-allow-origin: https://123.com
  access-control-allow-methods: GET
  access-control-allow-credentials: true
  ### 생략 ###

  
  
  

Origin(Request) 헤더에 따른 CORS 설정

• Client에서 Request 헤더에 Origin 헤더를 요청 하는데, 해당 헤더에 맞추어 CORS 헤더를 응답받기를 원함

  ## Origin 헤더가  ' *.hippo.com' 인 경우
  ## aaa.hippo.com이면 CORS 헤더를 aaa.hippo.com 으로 응답
  ## bbb.hippo.com이면 CORS 헤더를 bbb.hippo.com 으로 응답

• Nginx 설정

  ###Location Block
        if ($http_origin ~ hippo.com) {
        more_set_headers "Access-Control-Allow-Origin  $http_origin";
  }

• 응답 헤더 확인

  $ curl -D- -o/dev/null -H'host:hippo.cdn.co.kr' 127.0.0.1/sample.txt -H 'Origin:https://aaa.hippo.com'
  Server: nginx
  Date: Tue, 25 Feb 2020 04:53:45 GMT
  Content-Type: text/plain; charset=utf-8
  Content-Length: 1641
  Connection: keep-alive
  Last-Modified: Thu, 06 Feb 2020 03:24:17 GMT
  ETag: "1"
  Access-Control-Allow-Origin: https://aaa.hippo.com