CORS

CORS: 크로스 오리진 리소스 공유 이해 및 구현

CORS(크로스 오리진 리소스 공유)는 서로 다른 도메인 간에 리소스를 공유할 수 있는 메커니즘입니다. 악성 사이트가 다른 웹 사이트의 중요한 정보에 액세스하는 것을 제한하기 때문에 현대 웹 응용 프로그램의 필수 보안 기능입니다. 이 기사에서는 CORS의 기본 사항과 웹 응용 프로그램에서 CORS를 구현하는 방법에 대해 자세히 알아보겠습니다.

CORS란 무엇인가?
CORS는 웹 브라우저가 다른 도메인의 리소스에 액세스하는 것을 제한하는 보안 메커니즘입니다. 웹 사이트가 다른 도메인의 리소스에 액세스하려고 하면 브라우저는 도메인의 서버로 요청을 보냅니다. 그런 다음 서버는 적절한 헤더가 있는 응답을 다시 보내 요청을 허용할지 여부를 결정합니다. 헤더는 요청의 원본에 따라 브라우저에 리소스 액세스가 허용되는지 여부를 알려줍니다.

CORS가 왜 중요한가요?
CORS는 사이트 간 스크립팅(XSS) 및 사이트 간 요청 위조(CSRF) 공격을 방지하여 웹 응용 프로그램에 보안을 제공하기 때문에 중요합니다. XSS 공격은 악의적인 웹 사이트가 다른 웹 사이트에 스크립트를 주입할 때 발생하며, 이는 민감한 정보를 도용하거나 손상을 일으킬 수 있습니다. CSRF 공격은 악의적인 웹사이트가 다른 웹사이트에 요청을 보내 사용자 동의 없이 행동을 수행하게 할 때 발생한다.

CORS는 어떻게 작동하나요?
CORS는 HTTP 응답에 다음 헤더를 추가하여 작동합니다:

액세스-제어-허용-원점: 이 헤더는 리소스에 액세스할 수 있는 오리진을 지정합니다. 헤더가 *로 설정된 경우 모든 오리진이 리소스에 액세스할 수 있습니다.
액세스-제어-허용-방법: 이 헤더는 GET, POST, PUT, DELETE 등과 같이 리소스에 액세스할 수 있는 HTTP 메서드를 지정합니다.
액세스-제어-허용-헤더: 이 헤더는 내용 유형, 권한 부여 등과 같이 요청에서 허용되는 헤더를 지정합니다.
브라우저가 서버에 요청을 할 때, 먼저 HTTP OPTIONS 요청인 사전 비행 요청을 보냅니다. 사전 비행 요청은 실제 요청을 전송해도 안전한지 여부를 결정하는 데 사용됩니다. 서버가 응답에 적절한 헤더를 반환할 경우, 브라우저는 실제 요청을 발송합니다.

웹 애플리케이션에서 CORS를 구현하는 방법
CORS는 사용하는 기술에 따라 다양한 방식으로 구현될 수 있습니다. 이 섹션에서는 Express 프레임워크를 사용하여 Node.js에서 CORS를 구현하는 방법과 @angular/common/http 라이브러리를 사용하여 Angular에서 CORS를 구현하는 방법을 살펴보겠습니다.

Express를 사용한 Node.js에서의 CORS 구현
Express를 사용하여 Node.js에서 CORS를 구현하려면 CORS 미들웨어를 사용할 수 있습니다. cors 미들웨어는 응답에 CORS 헤더를 쉽게 추가할 수 있는 npm 패키지입니다.

다음은 Express 응용 프로그램에서 cors 미들웨어를 사용하는 방법의 예입니다:

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

app.use(cors());

app.get('/', (req, res) => {
  res.json({ message: 'Welcome to your API' });
});

app.listen(3000, () => {
  console.log('CORS-enabled web server listening on port 3000');
});

Angular에서 CORS 구현
Angular에서 CORS를 구현하려면 @angular/common/http 라이브러리에서 제공하는 Http Interceptor 인터페이스를 사용할 수 있습니다. HttpInterceptor 인터페이스를 사용하여 HTTP 요청을 서버로 전송하기 전에 수정할 수 있습니다.