본문 바로가기
Frontend

CORS

by 프로그레머 2024. 3. 6.

 

CORS 처리 방법

 

CORS (Cross-Origin Resource Sharing)

웹 애플리케이션에서 발생하는 보안 메커니즘 중 하나

다른 출처(origin)에서 실행 중인 웹 페이지가 현재 출처와 다른 출처의 리소스에 접근할 수 있도록 허용하는 방법을 정의

기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 적용하여,

스크립트가 다른 출처의 리소스에 접근하는 것을 제한함

이는 보안상의 이유로, 예를 들어 XSS(Cross-Site Scripting) 공격을 방지하기 위함이다

 

CORS 동작 원리

CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 다른 출처로의 요청이 안전한지를 브라우저에 알려준다

서버는 Access-Control-Allow-Origin 과 같은 CORS 관련 헤더를 응답에 포함시켜,

해당 리소스에 대한 접근을 허용할 출처를 명시할 수 있다

브라우저는 이 헤더를 검사하여 요청을 보낸 웹 페이지의 출처가 허용 목록에 있는지 판단하고,

그에 따라 리소스 접근을 허용하거나 차단한다

 

개발 중 CORS ?

보안을 해치지 않으면서 리소스에 대한 접근을 적절히 허용한다

  • 백엔드에서 CORS 허용
    • 일반적으로 백엔드 서버에서 Access-Control-Allow-Origin 헤더를 적절히 설정하여 특정 출처(또는 모든 출처)의 프론트엔드 애플리케이션이 리소스에 접근할 수 있도록 허용
  • 프록시 서버 사용
    • 프론트엔드 개발 서버에서 프록시 설정을 사용하여 API 요청을 중계할 수 있다 (보안상 문제로 개발 단계에서만)