CORS에러는 왜 우릴 괴롭힐까? 해결방법과 CORS규제가 생긴 이유를 알아보자

 

우리는 프론트엔드와 백엔드를 개발하고 프론트엔드에서 백엔드로 api호출할 때  마주치는 에러가 있습니다.

바로 CORS에러입니다.

CORS는 Cross Origin Resource Sharing의 약자로 출처가 다른 자원들을 공유한다는 뜻입니다. 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하기 위해 허가가 필요하다는 뜻이고 허가 없이 자원을 호출하면 에러를 내보냅니다.

 

Corss - Origin은 총 3가지로 구분합니다.

1. 프로토콜 - http와 https

2. 도메인 - doyeonism.com과 doyeon.com

3. 포트번호 - 3000번과 8080번

 

Corss Origin의 구분 방법은 위 세가지중 하나라도 다를 경우 다르다고 규제합니다.

 

그래서 우리가 localhost에서 프론트엔드와 백엔드를 시작하고 서로 통신할 경우 Cors오류를 내보내게 됩니다. 이는 프로토콜, 도메인이 같지만 포트번호가 다르기 때문입니다.

 

위에 CORS정의에서 말씀드린

다른 출처에 있는 자원에 접근하기 위해 허가가 필요하다

라고 말했는데요.

 

해결방법은 생각보다 쉽습니다.

백엔드에서 프론트엔드의 Cross Origin을 허가하면 됩니다.

 

node+express로 api서버를 만든 경우를 예로 들겠습니다.

const app = express();

app.use(
  cors({
    origin: "http://localhost:3000/",
    credentials: true,
  })
);

위와 같이 cors설정을 해주시면 되는데요.

origin값은 ' * '로 표시하여 로컬에서 테스트할 때 간단하게 설정할 수 있습니다.

 

만약 프론트엔드를 호스팅하고 웹페이지의 도메인이 https://portfolio.doyeonism.com 이라고 할 경우,그리고 이 도메인에서 배포한 백엔드 서버에 자원을 요청할 경우

다음과 같이 백엔드에 설정을 해주면 되겠습니다.

const app = express();

app.use(
  cors({
    origin: "https://portfolio.doyeonism.com",
    credentials: true,
  })
);

 

 

CORS를 규제한 이유

백엔드에서 자원을 보내줄 프론트엔드의 도메인만 적으면 해결되는 이런 규제를 왜 정해놓은 것일까요?

보안상의 이유로 CORS규제를 만들었는데요.

 

---

만약 제가 약 1만명이 넘는 플랫폼을 운영한다고 가정합시다.

1만명이 넘는 플랫폼이고 다양한 기능이 있기 때문에 로그인기능이 들어가야겠네요.

하지만 이 플랫폼 개발자는 CORS규제가 귀찮아 origin값은 ' * '로 표시했다고 합니다.

 

이때 제 플랫폼에 있는 사용자들의 정보를 갖고싶은 해커가 플랫폼의 보안을 사펴보던 중 CORS 설정을 허술하게 했다는 점을 확인했습니다.

 

이럴 경우 해커는 제가 만든 플랫폼과 완벽하게 똑같은 프론트엔드를 개발하고 제가 만든 서버에 데이터를 요청합니다.

이 가짜 웹사이트를 플랫폼을 사용하는 사용자에게 링크를 줄 경우 문제가 발생합니다.

 

도메인을 확인하지 않은 사용자가 평소처럼 로그인을 하게 되고 서버에선 CORS 규제를 하지 않았기 때문에 로그인정보 호출에 따른 데이터를 보내줍니다. 로그인 정보, 쿠키 등 데이터가 있겠죠.

 

가짜 웹사이트에서 로그인이 가능하다는 것은 가짜 웹사이트에서 개인정보를 적거나 심하면 결제까지 무심코 하는 경우 심각한 문제가 생길 수 있습니다.

---

 

'하.. 귀찮게 왜 이런 규제를 만들어 놓은거야'라는 생각보단 보안을 위한 개발자들의 작은 노력이라고 생각한다면 CORS오류에 대한 짜증이 가라앉을 것 같네요.