CORS(Cross-Origin Resource Sharing)란 정확히 무엇입니까?

CORS는 웹 페이지에서 문서가 생성된 도메인과 다른 도메인의 리소스에 대한 액세스를 제어하기 위해 웹 브라우저에서 구현하는 보안 메커니즘입니다. CORS의 목적은 브라우저가 서버에서 명시적으로 허용하지 않는 한 웹 애플리케이션이 도메인 간 요청을 수행하지 못하도록 제한하는 정책을 시행하여 CSRF(교차 사이트 요청 위조) 및 데이터 도난과 같은 공격으로부터 사용자 데이터를 보호하는 것입니다.

CORS 작동 방식

CORS는 브라우저와 서버 간의 HTTP 헤더 교환을 통해 작동합니다. 단계별 프로세스는 다음과 같습니다.

1. 브라우저가 교차 출처 요청을 합니다

 

브라우저에서 실행 중인 JavaScript가 원본 도메인과 다른 도메인에 요청을 시도하는 경우(예: API 리소스를 가져오는 경우) 브라우저는 요청에 'Origin' 헤더를 자동으로 첨부합니다. 'Origin' 헤더에는 요청 사이트의 도메인이 포함되어 있습니다.

 

2. 서버가 요청을 평가합니다.

 

서버는 요청을 수신하고 CORS 정책과 비교하여 'Origin' 헤더를 확인합니다. 원본 사이트에 대한 액세스가 허용되면 서버는 Access-Control-Allow-Origin 헤더로 응답합니다.

 

모든 도메인이 리소스에 액세스할 수 있도록 허용하는 와일드카드(*)입니다. 이는 일반적으로 민감한 데이터에는 권장되지 않습니다.

 

3. 브라우저가 CORS 응답을 강제합니다

 

응답을 받으면 브라우저는 Access-Control-Allow-Origin 헤더를 확인합니다. 요청 사이트의 원본이 이 헤더에 포함되거나 와일드카드(*)가 사용되는 경우 브라우저는 응답 데이터가 요청 웹 페이지와 공유되도록 허용합니다. 그렇지 않은 경우 브라우저는 응답을 차단하고 JavaScript 코드는 데이터에 액세스할 수 없습니다.

 

JavaScript에서 CORS 처리하기

Front-End 에서는 브라우저의 서버 CORS 헤더 적용을 재정의할 수 없습니다. 대신 수행할 수 있는 작업은 다음과 같습니다.

오류 처리

 

CORS가 요청을 차단할 때 오류를 처리하고 사용자 피드백을 제공하려면 promises와 함께 try-catch 블록 또는 '.catch()'를 사용합니다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(e => console.log('Error accessing the API:', e.message));

 

서버측 CORS 구성

서버를 제어하는 ​​경우 CORS를 구성하는 방법은 다음과 같습니다.

Express를 사용하여 Node.js에서 수동으로 CORS 헤더 설정

 

CORS 헤더를 포함하도록 미들웨어를 구현합니다.

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // Open access, replace '*' with specific domains as needed
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'CORS settings are enabled.' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

 

실행 전 요청 처리

서버가 단순 가져오기 이상의 작업을 수행하는 경우 실행 전(OPTIONS) 요청을 명시적으로 관리합니다.

app.options('*', (req, res) => {
  // Responds to preflight requests
  res.sendStatus(204);
});

 

결론

브라우저와 서버 모두에서 CORS를 올바르게 이해하고 구현하는 것은 웹 애플리케이션의 보안과 기능에 매우 중요합니다. 서버에서 CORS 응답을 올바르게 구성하고 JavaScript 코드에서 CORS 오류를 적절하게 처리하면 애플리케이션에서 더 원활하고 안전한 교차 출처 상호 작용을 보장할 수 있습니다.

 

만약, CORS에 대해서 상대하기가 너무 싫고 처리하기 싫다면 하나의 서버에 프론트와 백엔드를 동시에 사용하시면 됩니다.
다만, 보안적이나 협업 관련 문제에서는 작업자의 몫입니다.

 

추가적으로 CORS 처리 관련에 대해서는 언어별 마다 처리방식이 다릅니다. 본인이 사용하는 언어가 무엇인지 참고하여 진행해주시면 감사하겠습니다. 해당 게시물에는 Front-End는 쉽게 접할 수 있는 Javascript와 Back-End는 Node.js를 예제로 들었습니다.