[CORS] CORS 뽀개기

 

 

CORS

 

Cross-origin resource sharing (CORS)란 외부 도메인의 자원에 제한적으로 접근할 수 있도록 하는 브라우저 메커니즘을 뜻한다. SOP에 유연성을 더하는 역할을 한다. 하지만 만약 웹사이트의 CORS 정책이 조악하게 설계되었다면 잠재적으로 크로스 도메인 공격을 받을 가능성이 있다. CORS는 CSRF와 같은 공격을 막는 용도가 아니다. 

 

Same-Origin Policy 

SOP란 외부 소스 도메인 자원과 교신하는 것을 막는 정택을 말한다. SOP는 다른 유저의 개인정보를 탈취하는 등 악의적 크로스 도메인 상호작용의 위험성을 막기 위해 고안되었다.

 

Relaxation of the SOP

SOP는 CSRF와 같은 공격을 막는 데는 효과적이었지만, 다른 도메인 리소스 접근을 막아버리기 때문에 사용자 경험면에서는 좋지 않은 결과를 가져왔다. 그리고 많은 웹사이트들이 서브도메인 혹은 제삼자 웹사이트와 cross-origin 접근을 해야 하는 상황이었다. 따라서 CORS를 메커니즘을 고안하게 된 것이다. 

 

CORS는 HTTP 헤더로 신뢰할 수 있는 origin과 메서드 등을 주고받아 제한적으로 cross-origin 접근을 가능하게 한다. 

이는 preflight 요청(OPTIONS 메서드)을 통해 이루어 지는데, CORS 헤더라고도 불리는 HTTP 요청 헤더와 이에 상응하는 헤더를 서로 교환하여 이루어진다.  

 

참고로 Simple request의 경우 preflight 요청을 보내지 않는다. 

 

Simple request란 

• GET/HEAD/POST 요청일 경우
• POST 요청일 때 Content-Type은 아래 중 하나
  • application/x-www-form-unlencoded
  • multipart/form-data
  • text/plain

 

 

 

 

 

 

 

요청 헤더는 무엇이고 무엇을 할까?

Access control request 헤더는 꽤나 직관적이고 단어자체가 의미를 함축하고 있다.

• Origin: 브라우저로 부터 요청이 이루어진 도메인
• Access-Control-Request-Method: 실제 요청에서 사용하고픈 메서드
• Access-Control-Request-Headers: 실제 요청에서 함께 보낼 것이라 예상하는 커스텀 헤더

 

Access Control Allow Headers는 무엇이고 어떻게 CORS 요청에 응답할까?

요청 헤더와는 다르게 Access Control Allow 헤더는 브라우저간 기준이 명확하지 않아 조금 더 복잡하다. 

 

• Access-Control-Allow-Origin
  • 도메인 간 요청을 할 수 있는 권한이 부여된 도메인을 지정한다.
• Access-Control-Allow-Credentials
  • 도메인 간 요청에 credential 권한이 있는지 없는지 지정한다.
• Access-Control-Expose-Headers
  • 노출하기에 안전한 헤더를 나타낸다.
• Access-Control-Max-Age
  • pre-flighted 요청이 얼마만큼의 시간동안 캐시 되는지
• Access-Control-Allow-Methods
  • 리소스에 접근할 때 메서드가 허용되는지
• Access-Control-Allow-Headers
  • 어떤 헤더 필드 네임이 실제 요청에서 사용할 수 있는지 가리킨다.

 

 

Express에서 CORS는 어떻게 사용할 수 있을까?

express에서 CORS를 사용할 때는 CORS 미들웨어를 사용하면 된다. 

여기서 미들웨어란, 운영체제에서 제공하지 않는 일반적인 서비스와 기능을 애플리케이션에 제공하는 소프트웨어이다. 즉 중간에서 매개 역할을 하는 소프트웨어라고 생각하면 된다. 

 

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

const whiteList = ["http://localhost:8080"];
const corsOptions = {
	origin: function (origin, callback) {
    	if (whitelist.indexOf(origin) !== -1) {
        	callback(null, true);
        } else {
        	callback(new Error("Not Allowed Origin!"));
        }
    },
};

app.use(cors(corsOptions));

 

참고자료

• https://handhand.tistory.com/35

Node.js CORS 설정하기

• https://www.stackhawk.com/blog/what-is-cors/

What is CORS?

• https://portswigger.net/web-security/cors

What is CORS (cross-origin resource sharing)? Tutorial & Examples | Web Security Academy