[241114 TIL] 본캠프 32일차

CORS (Cross Origin Resource Sharing)

한 도메인에서 로드되어 다른 도메인에 있는 리소스와 상호작용하는 클라이언트 웹 애플리케이션에 대한 방법을 정의한다.

• 브라우저를 사용하여 동영상 플랫폼 API에서 동영상 가져오기
• 공용 글꼴 라이브러리 사용하기
• 국가 날씨 데이터베이스의 날씨 데이터 사용하기

CORS를 사용하면 클라이언트 브라우저에서 데이터를 전송하기 전에 서드 파티 서버를 확인해서 요청 승인 여부를 확인할 수 있다.

 

CORS가 중요한 이유

과거에는 CSRF(크로스 사이트 요청 위조) 문제로 인해 사용자의 브라우저에서 다른 애플리케이션으로 가짜 클라이언트 요청을 전송하는 경우가 많았다. 이를 방지하기 위해서 모든 브라우저에서는 동일 Origin 정책을 구현한다.

 

동일 Origin 정책

클라이언트는 클라이언트의 URL과 동일한 Origin의 리소스로만 요청을 보낼 수 있다. 즉, 클라이언트 URL의 프로토콜, 포트, 호스트 이름 등은 모두 클라이언트에서 요청하는 서버와 일치해야 한다.

• http://store.aws.com/dir/page.html
• http://store.aws.com/dir2/new.html (동일 Origin)
• http://store.aws.com/dir/inner/other.html (동일 Origin)
• https://store.aws.com/page.html (프로토콜이 다른 Origin)
• http://store.aws.com:81/dir/page.html (포트가 다른 Origin)
• http://news.aws.com/dir/page.html (호스트가 다른 Origin)

CORS는 동일 Origin 정책을 확장한 것으로, 외부의 서드 파티와 승인 하에 리소스를 공유하기 위해서는 CORS가 필요하다.

 

CORS 작동 원리

브라우저는 애플리케이션 서버에 HTTP 요청을 보내고 HTTP 응답으로 데이터를 수신해서 표시한다.

• 현재 Origin : 현재 브라우저의 URL
• 크로스 Origin : 서드 파티 URL

크로스 Origin 요청 시 요청-응답 프로세스

1. 브라우저는 현재 Origin의 프로토콜, 호스트, 포트에 대한 정보가 포함된 Origin 헤더를 요청에 추가
2. 서버는 현재 Origin의 헤더를 확인하고 요청된 데이터와 Access-Control-Allow-Origin 헤더로 응답
3. 브라우저는 액세스 제어 요청 헤더를 확인하고 반환된 데이터를 클라이언트 애플리케이션과 공유

 

CORS 사전 요청

HTTP에서 요청 메서드는 클라이언트가 서버를 통해 수행하고자 하는 데이터 작업으로, 일반적으로 GET, POST, PUT, DELETE가 있다.

 

일반적인 CORS 상호 작용에서 브라우저는 요청과 액세스 제어 헤더를 동시에 전송하는데, 이러한 요청은 일반적으로 GET 요청이며 위험이 낮은 것으로 간주된다. 하지만 일부 요청은 복잡한 것으로 간주되기 때문에 실제 요청을 보내기 전에 서버 확인이 필요하다.

• GET, POST,HEAD 외의 메서드
• Accept-Language, Accept, Content-Language 외의 헤더
• multipart/form-data, application/x-www-form-urlencoded, text/plain 외의 Content-Type 헤더

 

사전 요청 작동 방식

1. 브라우저는 실제 요청 전에 사전 요청을 보냄
2. 서버는 서버가 클라이언트 URL에서 수락할 의향이 있는 요청에 대한 정보를 사용해서 응답
   • Access-Control-Allow-Methods
   • Access-Control-Allow-Headers
   • Access-Control-Allow-Origin
   • Access-Control-Max-Age (경우에 따라 포함)

 

JSONP (JSON with Padding)

서로 다른 도메인에서 실행되는 웹 애플리케이션 간의 통신을 가능하게 하는 기존 기술이다.

 

JSONP를 사용하면 클라이언트 페이지에서 HTML 스크립트 태그를 사용할 수 있다. 스크립트 태그는 외부 JavaScript 파일을 로드하거나 HTML 페이지에 JavaScript 코드를 직접 임베드한다.

 

데이터는 JSON 형식이어야 하고, 외부 도메인의 신뢰성에 의존해서 데이터를 제공하기 때문에 CORS보다 덜 안전하다.

 

CORS 구성 시 유의할 점

적절한 액세스 목록 정의

쉼표로 구분된 목록을 사용해서 개별 도메인에 대한 액세스 권한을 부여하는 것이 항상 가장 좋다.

 

목록에서 null Origin 사용 방지

일부 브라우저는 파일 요청 또는 로컬 호스트의 요청과 같은 특정 시나리오에서 요청 헤더에 null 값을 전송하는데, null 헤더가 포함된 무단 요청에 액세스 권한이 부여될 수 있기 때문에 보안 위험이 발생할 수 있다.