[Node.js] SOP와 CORS에 대해

📌 SOP ( Same-Origin Policy )

SOP는 동일 출처 정책으로 같은 출처의 리소스만 공유가 가능하다는 것을 의미한다.

여기서 같은 출처(Origin)라 함은 프로토콜, 호스트, 포트 가 모두 동일한 것을 말한다

 

 

 

🧸 SOP가 필요한 이유 

SOP는 잠재적으로 해로울 수 있는 문서를 분리함으로써 해킹 등과 같은 위협으로부터 안전성을 보장하기 위해 생겨나게 되었다. 

한 마디로 해킹의 방어책으로 생긴 것이다. 그렇다면 이러한 SOP가 없다면 어떻게 될까 ?

 

개인정보가 담긴 사이트를 열어두고 다른 사이트를 방문한다는 상황을 가정해보자.

방문한 다른 사이트에 개인 정보를 노리는 코드가 작성되어 있다면 개인 정보 유출이 되는 문제가 발생할 것이다.

그렇기에 SOP가 출처를 검사하여 동일한 출처가 아니라면 자신이 갖고 있는 리소스를 공유하지 않도록 하는 것이 중요하다.

 

하지만, 클라이언트와 서버를 따로 개발하게 될 때만 해도 둘은 출처가 달라지기 때문에 다른 출처의 리소스를 가져와야 하는 경우는 발생할 수 밖에 업다. api를 사용할 때 또한 다른 출처의 리소스를 사용해야하기 때문에 이러한 것을 허용해주는 과정이 필요하다.

 

그것이 바로 CORS이다. 

 

 

 

📌 CORS ( Cross-Origin Resource Sharing )

교차 출처 리소스 공유 (Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 by MDN

위 사진은 SOP 때문에 다른 출처의 리소스를 사용하려 했을 때 나타나는 에러이다.

에러는  다른 출처의 리소스를 가져오려고 했지만 SOP 때문에 접근이 불가능하기에 CORS 설정을 통해 서버의 응답 헤더에 ‘Access-Control-Allow-Origin’을 작성하면 접근 권한을 얻을 수 있다고 설명해주고 있다.

 

 

🧸 CORS 동작 방식 

프리플라이트 요청 ( Preflight Request )

 

프리플라이트 요청은 OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것을 의미한다.

만약, 요청을 보낸 출처가 접근 권한이 없다면 브라우저에서 CORS 에러를 띄우게 되고, 실제 요청은 전달되지 않는다.

 

 

프리플라이트 요청이 필요한 이유 

• 실제 요청을 처음부터 통째로 보내는 것보다 리소스 측면에서 효율적
• CORS에 대비가 되어있지 않은 서버 보호 가능.

 

단순 요청 (Simple Request)

단순 요청을 프리플라이트를 실행하지 않고 바로 요청을 하는 것이다. 단, 특정 조건이 만족될 경우에만 프리플라이트를 생략하고 요청한다.

해당 조건은 아래와 같다

• GET, HEAD, POST 요청 중 하나.
• 자동으로 설정되는 헤더 외에, Accept, Accept-Language, Content-Language, Content-Type 헤더의 값만 수동으로 설정Content-Type 헤더에는 application/x-www-form-urlencoded, multipart/form-data, text/plain 값만 허용

 

 

인증정보를 포함한 요청 (Credentialed Request)

요청 헤더에 인증 정보를 담아 보내는 요청이다. 민감한 정보이기에, 출처가 다를 경우에는 별도의 설정을 하지 않으면 쿠키를 보낼 수 없다. 이러한 경우에는 프론트, 서버 양측 모두 CORS 설정이 필요하다.

• 프론트 측에서는 요청 헤더에 withCredentials : true 
• 서버 측에서는 응답 헤더에 Access-Control-Allow-Credentials : true 
• 서버 측에서 Access-Control-Allow-Origin 을 설정할 때, 모든 출처를 허용한다는 뜻의 와일드카드(*)로 설정하면 에러가 발생한다. 인증 정보를 다루는 만큼 출처를 정확하게 설정해주어야 한다.

 

CORS를 설정하는 방법에는 Node.js를 이용하는 방법과 Express를 이용하는 법 두 가지가 있다.

두 가지를 간단하게 비교해보자면 Node.js에 비해 Express가 더 유용한 기능들이 많아서 실제로 많이 사용하고 간편한 방법이다.

다음 포스트에서 두 가지 방법에 대해 알아보자