웹 개발 분야에서 프런트엔드 애플리케이션과 백엔드 API 간의 안전한 통신을 보장하는 것은 매우 중요합니다. 교차 출처 리소스 공유(CORS)는 브라우저가 초기 웹 페이지를 제공한 도메인과 다른 도메인에 대해 요청을 처리하는 방법을 지배하는 중요한 보안 메커니즘으로 작용합니다.
아래 버튼을 클릭하여 Apidog에 대해 더 알아보세요!
CORS 구성 이해 및 효과적으로 테스트하는 것은 매끄러운 API 개발에 필수적입니다. 이 기사는 Postman CORS 테스트 개념을 깊이 다루어, 개발자들이 인기 있는 API 개발 플랫폼 내에서 이 기능을 활용하는 방법에 대한 포괄적인 이해를 제공합니다.
CORS란 무엇인가요?
교차 출처 리소스 공유(CORS)는 웹 브라우저가 이러한 교차 출처 요청과 관련된 잠재적 보안 위험을 완화하기 위해 구현한 웹 보안 개념입니다. 기본적으로 브라우저는 웹 페이지를 제공한 도메인과 다른 도메인에 요청을 하지 못하도록 제한합니다. 이는 한 도메인의 악의적인 스크립트가 다른 도메인에서 민감한 데이터에 접근하지 못하도록 방지합니다.
CORS의 주요 요소
출처
요청의 출처는 프로토콜(예: https), 호스트 이름(예: www.example.com), 포트 번호(일반적으로 표준 웹 트래픽의 경우 80)의 세 부분으로 구성됩니다. 이것은 요청이 어디에서 시작되었는지를 식별합니다. 예를 들어, https://www.example.com:8080은 완전한 출처 문자열입니다.
프리플라이트 요청
선택된 HTTP 메서드가 "선제적"으로 간주되는 경우(예: OPTIONS, GET, HEAD), 브라우저는 실제 요청 전에 프리플라이트 요청(OPTIONS)을 보낼 수 있습니다. 이 프리플라이트 요청은 서버에 특정 요청이 허용되는지를 묻는 정찰자 역할을 합니다.
CORS 헤더
서버는 응답에 특정 HTTP 헤더를 포함하여 교차 출처 요청이 허용되는지를 나타낼 수 있습니다. 이러한 헤더는 허용된 상호작용의 다양한 측면을 정의합니다:
- Access-Control-Allow-Origin: 이 헤더는 리소스에 접근할 수 있는 출처를 지정합니다. 특정 도메인(예:
https://www.example.com) 또는 모든 출처를 허용하는 와일드카드 문자(*)가 될 수 있습니다(일반적으로 보안상의 이유로 권장되지 않음). - Access-Control-Allow-Methods: 이 헤더는 CORS 요청에 허용되는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 정의합니다.
- Access-Control-Allow-Headers: 이 헤더는 CORS 요청 헤더에 포함될 수 있는 HTTP 헤더 필드를 지정합니다(예:
Content-Type,Authorization). - Access-Control-Allow-Credentials: 이 헤더는 CORS 요청에 자격 증명(예: 쿠키 또는 인증 토큰)을 포함하는 것이 허용되는지를 나타냅니다. 값은 일반적으로
true또는false로 설정됩니다.
단순 요청 vs. 프리플라이트 요청
HTTP 메서드, 사용된 헤더 및 자격 증명 존재 여부에 따라 CORS 요청은 단순 요청 또는 프리플라이트 요청으로 분류될 수 있습니다. 단순 요청은 프리플라이트 요청을 트리거하지 않으며, 프리플라이트 요청은 서버가 해당 유형의 교차 출처 상호작용을 허용하는지 확인합니다.
CORS 테스트의 목적
CORS 테스트는 웹 브라우저가 초기 웹 페이지를 제공한 도메인과 다른 도메인(출처)에 대해 요청을 처리하는 방법을 검증하는 데 사용됩니다. 이를 통해 자원에 안전하게 접근하고 의도한 대로 사용할 수 있습니다. 주요 목적은 다음과 같습니다:
API 접근성 보장
현대 웹 애플리케이션은 종종 별도의 도메인에 호스팅되는 API에 의존합니다. CORS 테스트는 개발자가 프런트엔드 애플리케이션(한 도메인에서 실행 중인)이 백엔드 API(다른 도메인)와 성공적으로 접근하고 상호작용할 수 있음을 확인하는 데 도움을 줍니다.
CORS 문제 디버깅
프런트엔드 애플리케이션이 백엔드 API에서 데이터를 가져오는 중 문제가 발생한다면, CORS 잘못 구성된 경우일 수 있습니다. CORS 테스트는 프런트 엔드의 관점에서 요청을 시뮬레이션하고 서버의 응답 헤더를 분석하여 이러한 문제를 지적하는 데 도움을 줍니다.
CORS 구성 확인
백엔드 서버에서 CORS를 구성할 때, CORS 테스트는 헤더가 올바르게 설정되었는지를 검증하는 방법을 제공합니다. 개발자는 다양한 출처, 메서드 및 헤더로 테스트하여 서버가 원하는 CORS 정책에 따라 적절하게 응답하는지 확인할 수 있습니다.
보안 취약점 방지
부적절한 CORS 구성은 보안 취약점을 도입할 수 있습니다. CORS 테스트를 통해 개발자는 잠재적인 약점을 식별하고 인가된 출처만 민감한 리소스에 접근할 수 있도록 보장할 수 있습니다.
Postman에서 CORS 테스트에 대한 단계별 가이드
1단계 - Postman 계정 만들기
먼저, 새로운 Postman 계정을 만들어야 합니다(계정이 없을 경우에만). 그리고 Postman 애플리케이션을 귀하의 장치에 다운로드하세요. 이 애플리케이션은 웹 버전보다 더 많은 기능을 제공합니다.
2단계 - Postman에서 새 API 요청 만들기
Postman을 설치한 후, Postman 창의 왼쪽 상단 모서리에 있는 New 버튼을 클릭하여 새 요청을 만듭니다. 위 이미지에 표시된 대로 HTTP Request를 선택하여 새 요청을 생성합니다.
3단계 - API 메서드 및 세부정보 입력
다음으로, 생성하려는 API 요청의 세부정보를 포함해야 합니다. 이는 URL, HTTP 메서드, 및 API에 필요한 추가 매개변수 등을 포함해야 합니다.
4단계 - API 요청 헤더 구성
Headers 섹션에서 "Origin"이라는 Key와 기본 URL 값을 가진 새 헤더를 추가합니다. 이 "Origin" Key 값은 교차 출처 요청 중 브라우저가 보내는 헤더를 시뮬레이션하는 데 사용됩니다.
5단계 - API 응답 헤더 보기
마지막으로, 위 이미지에서 볼 수 있는 헤더 섹션에서 관련된 CORS 헤더를 확인할 수 있습니다.
Apidog - CORS 테스트 및 그 이상 수행하기
Apidog는 API를 구축, 테스트, 모의 및 문서화할 수 있는 훌륭한 API 개발 플랫폼입니다. Apidog은 또한 여러 단계의 테스트 케이스(강화된 테스트 시나리오)를 제공하여 API가 원활하게 실행되도록 합니다.
Apidog을 사용한 API 테스트
첫 번째 단계는 테스트하려는 특정 API 엔드포인트를 입력하는 것입니다. 필요한 경우 테스트하는 특정 API에 대한 추가 세부정보를 포함하세요.
URL에서 여러 매개변수 사용이 확실하지 않다면, 이 기사가 더 큰 데이터 세트 내에서 정확한 리소스를 선별하는 방법을 안내해 줄 수 있습니다!
Apidog을 사용하여 API 테스트 시나리오 활용하기
일상적인 상황에서 사용되는 것처럼 API를 테스트하고 싶으신가요? Apidog의 테스트 시나리오 기능을 통해 실제 상호작용을 모방하는 복잡한 테스트 시나리오를 만들 수 있습니다.
먼저 Testing 버튼을 클릭한 후 + New Test Scenario 버튼을 클릭하세요.
Apidog은 새 테스트 시나리오에 대한 세부정보 기입을 요청합니다. 해당 기능이 예측 가능하도록 적절한 이름을 지정해야 합니다.
단계를 추가하려면 Add Step 섹션을 클릭하여 테스트 시나리오에 단계를 추가하세요. 아래의 이미지를 볼 수 있어야 합니다.
드롭다운 메뉴에서 "API에서 가져오기"를 선택하세요.
다음으로, 테스트 시나리오에 포함할 모든 API를 선택하세요. 위의 예시에서는 NumberConversionSOAP이라는 API가 포함되었습니다.
Run 버튼을 클릭하여 테스트 시나리오를 시작하기 전에, 테스트 시나리오 환경이 Testing Env로 변경되었는지 확인하세요. 화살표 1에 표시된 내용입니다.
API의 성능을 분석함으로써 강점과 약점에 대한 귀중한 통찰력을 얻을 수 있습니다. 이 지식은 다음 개발 단계에서 API를 개선하는 방법에 대한 정보에 기반한 결정을 내리는 데 중요합니다.
결론
Postman CORS 테스트는 개발자에게 프런트엔드 애플리케이션과 백엔드 API 간의 원활한 통신을 보장하는 사용자 친화적이고 효과적인 도구를 제공합니다. CORS 기본 사항을 이해하고 Postman의 테스트 기능을 활용함으로써 개발자는 개발 작업 흐름을 간소화하고 CORS 잘못 구성을 식별 및 수정하며 궁극적으로 안전하고 견고한 웹 애플리케이션을 구축할 수 있습니다.
정확한 CORS 구성 및 테스트를 통해 개발자는 API가 의도한 대로 작동하고 브라우저 보안 메커니즘을 준수하며 인가된 출처에서 무제한으로 접근할 수 있도록 보장할 수 있습니다. 이 문서에 설명된 단계를 따라 CORS 테스트를 개발 프로세스에 통합함으로써 개발자는 보다 안전하고 효율적인 웹 개발 경험을 조성할 수 있습니다.
