Node js Cors(Cross-Origin Resource Sharing)란?

안녕하세요 이번에는 웹의 보안정책  Cors에 대해 알아보겠습니다. 

 

📑목차
1. Cors
1-1. Cors란?
1-2. Cors의 원리
1-3. Preflight 요청이란?
1-4. Origin 속성
1-5. Method 속성
1-6. Credentials 속성
1-7. Cors 문법 코드

서론

먼저 본론으로 들어가기 전 Cors에 대해 들어보셨을까요? 저는 처음 들어보는 키워드여서 생소합니다. 웹 보안정책 중 하나로 알려지고 있다는데 자세히는 알고 싶어서 포스팅을 작성하고자 합니다. 그럼 본문으로 넘어가겠습니다~~

 

본론

1. Cors( Cross-Origin Resource Sharing)

1-1. Cors란?

웹 어플리케이션에서 다른 도메인에서 리소스를 요청할 때 발생할 수 있는 보안문제를 해결할 수 있는 방안

참고 내용

## CORS
> CORS는 웹의 보안정책들 중에서 하나로 웹 어플리케이션의 서로 다른 도메인의 리소스를 접근할 때 발생하는 보안의 이슈로 제어하기 위한 정책을 해결하는 방안. 쉽게 말하면 보안은 유지하되, 요청과 응답간에 서로 다른 도메인의 서버여도 리소스의 접근이 가능하게 해결한다.
> 보안정책은 `Same-origin-policy` 동일한 출처 정책
// www.naver.com ==> 프론트 서버
// www.back.naver.com ==> 백엔드 서버

// www.naver.com ==> 프론트 서버
// www.naver.com ==> 백엔드 서버

// 서버의 아키텍처를 설계하다보면 이렇게 동일한 출처의 정책을 지킬 수 없고
// 해결하는 방안이 필요하게 되었다.

> SOP의 문제를 해결하기 위해서 탄생한 cors 자바스크립트가 다른 도메인의 API에 요청을 하는것을 제안하는 내용을 해결해준다.
> 출처와 프로토콜 도메인 포트가 동일해야 요청이 가능한 정책
> 악성의 유저가 요청으로 인해 사용자의 민감한 정보나 잘못된 리소스의 요청을 할 수 있기 때문에 위험성이 있다.

> React나 등등 라이브러리나 프레임워크들도 등장을 하게 되면서 도메인을 길게 사용하는 경우가 어려워졌다. 다른 도메인을 많이 사용하게 된것, CORS가 등장할 수 밖에 없던것.

1-2. Cors의 원리

 

웹 브라우저는 보안상의 이유로 같은 출처에서만 데이터를 요청할 수 있습니다. 예를 들어 A사이트에서 다른 서버인 B서버에서 데이터를 가져오려고 하면 차단됩니다. 이런 문제를 해결하기 위해 Cors를 사용합니다. 서버에서 허용할 출처를 명시하게 되면 다른 도메인에서 리소스를 요청한 접근에 대한 제한이 없어지게 됩니다.

 

1-3. preflight 요청이란?

Cors가 적용될 때 브라우저가 서버에 사전에 허용할 출처인지 검증하는 요청

 

1-4. origin 속성이란?

서버가 허용할 도메인을 지정하는 속성

 

1-5. Method 속성이란?

서버가 허용할 요청 메서드를 지정하는 속성

 

1-6. Credentials 속성이란?

클라이언트가 서버에 요청을 보낼때 인증정보(쿠키, HTTP 인증, 세션)등을 포함할 수 있도록 허용하는 속성

 

 

1-7. Cors 문법 코드

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

// 미들웨어 요청이 들어오면 헤더의 내용을 추가해서 다음 미들웨어로 진행
app.use(cors({
    origin : "허용할 도메인",
    methods : "GET, POST, PUT, DELETE",
    allowedHeaders : "content-type"
}))

// Access-Control-AlloW-Origin
// Access-Control-AlloW-Methods
// Access-Control-AlloW-Headers

// 프리플라이트 요청이 발생
// 프리플라이트 : 요청을 허용한 출처인지를 한번 확인

// TCP 통신 진행

app.listen(3000, () => {
    console.log("서버 작동중..")
})

 

결론

CORS를 설정하면 다른 도메인에서도 안전하게 리소스를 요청할 수 있습니다. Cors에서 origin, methods, credentials 등의 속성을 적절히 설정하면 보안과 기능을 조화롭게 관리할 수 있습니다.