피드로 돌아가기
Dev.toSecurity
원문 읽기
Serverless Proxy 패턴을 통한 CORS 제한 해결 및 Secret Key 보안 강화
Why Your API Calls Are Being Blocked In The Browser (and How to Fix It in 12 Lines)
AI 요약
Context
브라우저 보안 메커니즘인 CORS 정책으로 인한 외부 API 호출 차단 발생. Client-side에 Secret Key를 노출할 경우 발생하는 보안 취약점을 방지하기 위해 API 제공자가 의도적으로 CORS 헤더를 제한한 상황.
Technical Solution
- Frontend와 외부 API 사이에 Serverless Function 기반 Proxy 계층 도입
- Same-origin 요청을 통한 브라우저 CORS Preflight 검사 우회 구조 설계
- Environment Variable을 활용한 Secret Key의 서버 사이드 관리로 클라이언트 노출 원천 차단
- Browser → Serverless Proxy → External API로 이어지는 Request Chain 구성
- Server-to-Server 통신 특성을 이용한 CORS 제한 없는 데이터 패치 수행
- HTTP 429 Rate Limit 응답의 캡처 및 가공을 통한 Frontend 에러 핸들링 최적화
실천 포인트
- API Secret Key를 Client-side 코드나 LocalStorage에 저장하고 있는지 검토 - 외부 API의 CORS 제한 발생 시 단순 헤더 수정이 아닌 Proxy 계층 도입 고려 - Serverless Function을 활용하여 API 요청의 추상화 및 인증 로직 중앙화 적용 - Rate Limit 응답 시 'Retry-After' 헤더를 처리하는 에러 핸들링 로직 구현