CORS(Cross-Origin Resource Sharing)와 동작 시나리오

CORS

정의 : "브라우저가 리소스 로드를 허용해야 하는 자체 원본이 아닌 원본 (도메인, 구성표 또는 포트) 을 서버가 나타낼 수 있도록 하는 HTTP 헤더 기반 메커니즘"

 

 기본적으로 웹 브라우저는 동일 출처 정책을 적용하여, 스크립트가 다른 도메인의 리소스에 접근하는 것을 제한한다. 동일 출처 정책은 웹 사이트의 보안을 강화하는 데 중요한 역할을 하지만, 현대의 웹에서는 다양한 리소스를 활용해야할 필요성이 대두되어 왔다. 이러한 필요성을 충족시키기 위하여 CORS가 개발된 것.

 

동작 원리

- 서버가 어떤 출처가 웹 브라우저를 통해 그 정보를 읽을 수 있는지를 서술하게 하는 새로운 HTTP 헤더를 추가함으로써 동작

- 서버 데이터에 부수적인 효과를 일으킬 수 있는 HTTP 메서드 (GET, 특정 MIME 타입의 POST를 제외한 메서드)의 경우, 브라우저가 사전 요청(preflight)을 하도록 요구

    -  이는 서버에 HTTP OPTIONS 요청 메소드를 사용하여 지원하는 메소드를 요청하고, 서버의 "승인"을 받은 후에 실제 요청을 보내는 과정

- 서버는 요청과 함께 자격증명(쿠키 및 HTTP 인증)을 보내야 하는지의 여부를 클라이언트에게 알릴 수도 있음

 

동작 시나리오(예시)

웹 애플리케이션 http://example.com이 있고, 이 사이트는 이미지, 데이터 등을 저장하고 있는 다른 도메인 http://api.example.com 에서 리소스를 불러와야 함. 사용자는 http://example.com 페이지를 방문할 때, 이 페이지에서는 http://api.example.com 에서 제공하는 이미지를 보여줘야 함.

 

1. 사용자의 브라우저에서 CORS 요청 시작

// JavaScript를 사용하여 AJAX 요청을 생성
fetch('http://api.example.com/images/sample.jpg', {
    method: 'GET', // 요청 메소드 지정
    headers: {
      'X-Custom-Header': 'value' // 사용자 정의 헤더 추가
    }
})
.then(response => response.blob()) // 이미지 데이터를 Blob 형태로 변환
.then(imageBlob => {
    // 이미지 Blob을 이용하여 페이지 내에 이미지를 표시
    const imageObjectURL = URL.createObjectURL(imageBlob);
    const imageElement = document.createElement('img');
    imageElement.src = imageObjectURL;
    document.body.appendChild(imageElement);
})
.catch(error => console.error('Fetching image failed:', error));

• 사용자가 http://example.com에 접속
• 웹 페이지의 JavaScript가 이미지를 로드하기 위해 http://api.example.com/images/sample.jpg로 AJAX 요청을 시도

2. 브라우저의 사전 요청 처리

OPTIONS /images/sample.jpg HTTP/1.1
Host: api.example.com
Origin: http://example.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: X-Custom-Header

• 이 요청은 http://example.com (출처)에서 http://api.example.com (다른 출처)로의 요청이므로, 브라우저는 CORS 정책에 따라 자동으로 사전 요청을 시작
• 브라우저는 OPTIONS HTTP 메소드를 사용하여 http://api.example.com/images/sample.jpg에 대한 사전 요청을 보냄. 이는 실제 GET 요청을 보내기 전 서버가 요청을 허용하는지 확인하기 위함임

3. 서버의 응답

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: X-Custom-Header

• 이 헤더들은 http://example.com에서의 요청을 허용하며, GET 및 POST 메소드 사용을 승인하고, X-Custom-Header 헤더의 사용을 가능하게 함

4. 실제 요청의 수행

• 사전 요청이 성공적으로 통과되면, 브라우저는 실제 GET 요청을 http://api.example.com/images/sample.jpg로 보내 이미지를 로드
• 이 요청은 CORS 정책에 따라 승인되었기 때문에, 서버는 요청된 이미지를 포함하여 응답할 수 있음

5. 데이터 로드 및 표시

• 서버로부터 응답받은 이미지 데이터는 http://example.com의 페이지에서 처리되어 사용자에게 보여짐

 

 

 

 

 

 

참고 : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS