개요

공식 홈페이지Sandboxes의 CORS Filter에 시도해 봤기 때문에 필기를 하는 김에 기사를 썼습니다.

환경 확인

macOS - High Sierra 10.13.6

Docker - 18.06.1-ce

Docker Machine - 0.15.0

Docker Compose - 1.22.0

사전 준비

envoy의 창고 사전 클론이 필요합니다.

Sandbox의 구축

기본적으로 문서와 같다.
두 개의 터미널을 시작한 후 각 터미널에서 다음 명령을 실행합니다.
터미널 1

$ docker-machine create --driver virtualbox frontend
$ eval $(docker-machine env frontend)

터미널 2

$ docker-machine create --driver virtualbox backend
$ eval $(docker-machine env backend)

복제된 envoy 창고의 examples/cors/fronted 디렉터리와 examples/cors/backend 디렉터리에 저장된 모든 docker-compose입니다.yml에서 서비스를 시작합니다.
터미널 1

$ cd envoy/examples/cors/frontend
$ docker-compose up --build -d

터미널 2

$ cd envoy/examples/cors/backend
$ docker-compose up --build -d

이렇게 Sandbox 구축이 완료되었습니다.

fronted를 통해backend에 요청을 보냅니다.

Sandbox를 만들면 가상 컴퓨터의 IP와 서비스에 분배된 IP를 사용하여fronted 서비스에 접근할 수 있습니다.
먼저 가상 시스템의 IP를 확인합니다.
터미널 1

$ docker-machine ip frontend
192.168.99.100

fronted의 응용 프로그램 동작은 백엔드의 가상 기기의 IP가 필요하기 때문에 이 시기에 미리 조사한다.
터미널 2

$ docker-machine ip frontend
192.168.99.101

다음은 서비스에 할당된 포트를 확인합니다.
터미널 1

$ docker ps -a
CONTAINER ID        IMAGE                       COMMAND                  CREATED             STATUS              PORTS                                                     NAMES
897e22a5cec3        frontend_frontend-service   "/bin/sh -c /usr/loc…"   2 hours ago         Up 2hours          80/tcp, 10000/tcp                                         frontend_frontend-service_1
c07e94bee417        frontend_front-envoy        "/docker-entrypoint.…"   2 hours ago         Up 2hours          0.0.0.0:8001->8001/tcp, 10000/tcp, 0.0.0.0:8000->80/tcp   frontend_front-envoy_1

내 환경에서fronted 응용 프로그램의 URL은http://192.168.99.100:8000/이기 때문에 나는 브라우저에서 접근하려고 한다.다음 화면이 표시됩니다.그나저나 8001호 포트는 엔보이의admin에 접근할 수 있습니다.

이후 백엔드가 실행하는 가상 기기의 IP를 입력한 후Remote IP만 누르면 된다.전환Fetch asset을 통해 CORS Enforcement, CORS Filter が無効な URL 및 あらゆる　origin　が有効な URL가 요청한 발송 목적지를 전환할 수 있습니다.

curl을 사용하여backend에 요청을 보냅니다.

위에서 말한 바와 같이 fronted 응용 프로그램은 백엔드의 URL을 전환하여 CORS Filter의 설정값이 다른 URL에 요청을 보냅니다.따라서 特定の origin のみを許可する URL를 통해 직접 요청을 보내면 응답 페이지의 눈썹 내용도 확인할 수 있다.
backend의 각 URL과 각각의 CORS의 설정은 envoy 창고의 examples/cors/backend/fronnt-envoy입니다.yaml에서 확인할 수 있습니다.

$ yq -y '.static_resources.listeners[].filter_chains[].filters[].config.route_config' front-envoy.yaml
name: local_route
virtual_hosts:
- name: services
  domains:
  - '*'
  cors:
    allow_origin:
    - '*'
    allow_methods: GET
  routes:
  - match:
      prefix: /cors/open
    route:
      cluster: backend_service
  - match:
      prefix: /cors/disabled
    route:
      cluster: backend_service
      cors:
        enabled: false
  - match:
      prefix: /cors/restricted
    route:
      cluster: backend_service
      cors:
        allow_origin:
        - envoyproxy.io
        allow_methods: GET
  - match:
      prefix: /
    route:
      cluster: backend_service

API 문서에서 각 설정 값을 확인한 결과 CORS Filter의 유효한 경로는 curl 및 /cors/open입니다.또한 잘못된 CORS Filter 경로는 /cors/restricted입니다./cors/disabled에 요청을 보내보세요.

$ curl -I http://192.168.99.101:8000/cors/open -H 'Origin: https://foo.com'
HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
content-length: 8
server: envoy
date: Fri, 04 Jan 2019 15:04:03 GMT
x-envoy-upstream-service-time: 1
access-control-allow-origin: https://foo.com

응답 헤더에 추가된 것을 확인했습니다 /cors/open.
다음에 access-control-allow-origin에 요청을 보냅니다.

$ curl -I http://192.168.99.101:8000/cors/disabled -H 'Origin: https
://foo.com'
HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
content-length: 8
server: envoy
date: Fri, 04 Jan 2019 15:05:44 GMT
x-envoy-upstream-service-time: 2

응답 헤드에 없음/cors/disabled을 확인할 수 있습니다.