SOP, CORS

😀이번 포스팅엔 CORS를 알아보고자 한다. CORS를 알아보기 위해서 사전지식으로 SOP를 알아야한다.

SOP란?

Same-Origin Policy의 약자로 웹 보안 정책 중 하나이다. 다른 출처(Origin)에서 로드된 문서나 스크립트 등이 사용자의 브라우저와 상호작용하는 것을 제한하는 보안 메커니즘이다.

일반적으로 같은 출처에 해당하는 리소스끼리는 서로 자유롭게 접근할 수 있고, 다른 출처의 리소스에 대해서는 일부 제약을 두며, 브라우저는 서로 다른 출처에서 리소스를 요청하려고 하면, 해당 요청이 차단되도록 한다.

만약 SOP가 없다면 악성 스크립트가 사용자의 브라우저에서 다른 출처의 데이터를 자유롭게 읽거나 조작할 수 있게 된다.

🙄❓Origin이란?
Origin(출처)이란 URL의 프로토콜, 호스트명, 포트 번호를 합친 것을 의미한다.
URL의 구성이 궁금하면 URL + URN = URI ? 포스팅을 참고해보자

• 동일 출처의 비교

CORS란?

CORS란 (Cross-origin resource sharing)의 약자로 직역하면 '교차 출처 리소스 공유'라 해석하고 말그대로 출처가 다른 자원들을 공유한다는 뜻을 가진다.

CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 실행되는 애플리케이션에서, 서로 다른 도메인으로부터 리소스를 요청할 때 발생하는 보안 문제를 해결하는 메커니즘이다.

CROS는 브라우저에서 요청을 보낼 때, 요청 헤더에 Origin 값을 추가하여, 특정 출처에서 실행중인 웹이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. Origin값이란 일반적으로 도메인을 나타내며, 서버에서는 이 Origin값을 확인하여 해당 요청이 허용되는 도메인 인지 확인하고, 허용되는 요청에 대해서 차단하지 않는다.

즉 브라우저는 SOP에 의해 기본적인 다른 출처의 자원 공유를 막지만 CORS를 사용하게 되면 접근 권한을 얻을 수 있게 된다.

😀아무리 보안이 중요하지만, 개발을 하다 보면 기능상 어쩔 수 없이 다른 출처 간의 상호작용을 해야 하는 케이스도 있으며, 또한 실무적으로 다른 회사의 서버 API를 이용해야 하는 상황도 존재한다. 따라서 이와 같은 예외 사항을 두기 위해 CORS 정책을 허용하는 리소스에 한해 다른 출처라도 받아들인다는 것이다.

CORS의 동작방식

1. 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달한다.

• 기본적으로 웹은 HTTP 프로토콜을 이용하여 서버에 요청을 보내게 되는데,
  이때 브라우저는 요청 헤더에 Origin 이라는 필드에 출처를 함께 담아 보내게 된다.

2. 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달한다.

• 이후 서버가 이 요청에 대한 응답을 할 때 응답 헤더에 Access-Control-Allow-Origin이라는 필드를 추가하고 값으로 '이 리소스를 접근하는 것이 허용된 출처 url'을 내려보낸다.

3. 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한다.

• 이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해본 후 차단할지 말지를 결정한다.

  위의 경우에는 둘다 http://localhost:3000이기 때문에 유효하니 다른 출처의 리소스를 문제없이 가져오게 된다.

  만약 유효하지 않다면 그 응답을 사용하지 않고 버린다. (CORS 에러 !!)

사용예시

😀 필자는 Node.js로 프로젝트를 진행하고 Express 프레임워크를 사용하였을 때 npm으로 cors라이브러리를 간단하게 설치하여 미들웨어로 쉽게 사용하였다.

기본적인 사용방법은 아래와 같다.

const express = require('express')
const cors = require("cors"); // cors 설정을 편안하게 하는 패키지
const app = express();

// ...

app.use(cors({
    origin: "https://naver.com", // 접근 권한을 부여하는 도메인 
    credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가
    optionsSuccessStatus: 200, // 응답 상태 200으로 설정
}));

만약 모든 출처에 대해서 허용하려면 origin을 *로 설명하면 된다.

참고자료(출처)

티스토리 Richet의 테크 블로그 포스팅 [웹 개발] CORS란 무엇인가? (what is Cross Origin Request Sharing?) (CORS 한번에 뿌시기) (nginx CORS에러)
Velog sangbin2 블로그 포스팅 CORS 설정 방법
티스토리 인파 블로그 포스팅