Proxyman으로 CORS 정책 우회하는 방법

이 글에서는 웹사이트나 모바일 앱(iOS 및 Android)을 개발할 때 CORS(Cross-origin resource sharing)를 우회하는 방법을 안내합니다.

앱 개발 중 CORS 정책을 우회하는 방법

CORS는 추가 HTTP 헤더를 사용해 제한된 리소스에 어떤 도메인이 접근할 수 있는지 브라우저에 알려주는 메커니즘입니다. CORS에 대한 자세한 기술 문서는 MDN에서 확인할 수 있습니다.

다음과 같은 경우에 이런 상황이 발생할 수 있습니다.

localhost에서 실행 중인 웹사이트가 운영 엔드포인트(Production Endpoint)에 접근하는 경우
iOS / Android 개발 중인 앱이 운영 엔드포인트에 접근하는 경우

다음과 같은 오류가 표시될 수 있습니다.

Access to fetch at https://your-production-endpoint.com from origin http://localhost:8080 has been blocked by CORS Policy.

출처: Rodrigo Fernández

CORS를 우회하는 방법

CORS 메커니즘을 우회하는 간단한 방법은 응답에 특정 HTTP 헤더를 주입하는 것입니다.

Proxyman으로 디버깅하고 있다면 해결 방법이 여러 가지 있습니다. Scripting Tool이나 Map Local Tool을 사용하면 쉽게 구현할 수 있습니다.

Scripting Tool

Scripting Tool을 사용하면 조건에 맞는 요청이나 응답에 원하는 헤더를 주입할 수 있습니다.

작업 중인 모든 응답에 CORS 헤더를 주입할 때 편리한 도구입니다.

도메인에 대한 Matching Rule을 만듭니다. Scripting Matching Rule은 http://localhost:8080 또는 https://dev.mydomain.com이 될 수 있습니다.
스크립트를 설정하고 응답에 Access-Control-Allow-Origin 헤더를 주입합니다.

///
/// This func is called if the Response Checkbox is Enabled
/// You can manipulate the Response Data here before it goes to the client
/// Ex: Add/Update/Remove: headers, statusCode and body (json, plain-text)
/// Use console.log(response) to see all available fields
///
function onResponse(context, url, request, response) {
  
  // Allow all
  response.headers["Access-Control-Allow-Origin"] = "*";

  // Done
  return response;
}

Map Local File

Map Local File을 사용해서도 CORS를 우회할 수 있습니다.

처음부터 만들거나 선택한 Flow에서 Map Local Rule을 생성합니다.
URL을 포함하도록 Rule을 설정합니다.
Header 섹션에 Access-Control-Allow-Origin: *를 추가합니다.

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Access-Control-Allow-Origin: *

{
  "status": "ok"
}

Map Local Directory

로컬 디렉터리를 매핑하는 경우에는 Map Local과 Scripting Tool을 함께 사용해 구현할 수 있습니다.

Map Local Directory를 올바르게 설정합니다. 다음 단계로 넘어가기 전에 매핑이 제대로 되었는지 확인하세요.
같은 URL에 매칭되는 Scripting Rule을 만듭니다.
응답에 Access-Control-Allow-Origin 헤더를 주입합니다.

///
/// This func is called if the Response Checkbox is Enabled
/// You can manipulate the Response Data here before it goes to the client
/// Ex: Add/Update/Remove: headers, statusCode and body (json, plain-text)
/// Use console.log(response) to see all available fields
///
function onResponse(context, url, request, response) {
  
  // Allow all
  response.headers["Access-Control-Allow-Origin"] = "*";

  // Done
  return response;
}

참고 문서

자세한 내용은 아래 문서를 참고하세요.

Scripting Tool: https://proxyman.com/docs/scripting/script
애드온 및 스니펫 코드: https://proxyman.com/docs/scripting/addons
Map Local: https://proxyman.com/docs/advanced-features/map-local

중요: 테스트 용도로만 사용하세요

Proxyman에서 응답을 바꾸면 로컬에서 계속 작업할 수 있지만, 실제 사용자를 위해 서버를 고치는 것은 아닙니다. 운영 서버는 앱에 필요한 오리진, 메서드, 헤더만 허용해야 합니다. 브라우저가 OPTIONS 프리플라이트 요청을 보내면 그 응답에도 올바른 CORS 헤더가 포함되어 있는지 확인하세요. 인증 정보나 비공개 데이터가 관련된 경우에는 Access-Control-Allow-Origin: *를 사용하지 마세요.

Proxyman은 iOS 기기, iOS 시뮬레이터, Android 기기에서 실행되는 앱과 도메인의 HTTP/HTTPS 요청을 캡처하고 검사할 수 있게 해 주는 고성능 macOS 앱입니다.

다운로드: https://proxyman.com

Noah Tran

2020년 8월 31일