CORS (feat. SOP)

 

 

 

 

 

 

 

 

 

백엔드 개발자의 역할로 개발을 할 때, 서버의 기본이 되는 것들을 정리하여 게시하고자 하였다.
하지만 학습을 하다 보니 간단하게 기록하기엔 너무 초보를 위한 글이라 본래의 취지에 맞지 않았고, 양에 맞게 소분하여 기록하기로 하였다. 
오늘의 기록은 개발할 때 '이거는 통신을 걸러주는 역할을 하는 거야~' 정도로만 알고 있던 CORS에 대해서 학습하겠습니다.

 

NestJS와 Express에서의 cors를 사용했던 코드들이다

 

CORS는 웹 개발에서 네트워크와 관련된 주제 중 하나입니다.
웹 브라우저가 적용하는 보안 기능인데, 이는 현대에 많고 다양한 사이트들에서 정보들을 가져와야 할 때 출처를 허용해 줄 것인지 말 것인지에 대한 정책, 방식이라고 생각하면 됩니다.

 

본격적으로 학습을 시작하겠습니다.

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

- 차례

(1) 미디어에서 자주 접하고 있는 인터넷 보안 문제

(2) SOP란?

(3) CORS란?

(4) Origin이 뭔데?

(5) 백엔드 개발자가 브라우저를 통한 요청을 알아야해?

(6) CORS의 동작원리, 시나리오

(7) 심심풀이 문제

 

 

 

 

 

 

 

 

 

 

 

(1) 미디어에서 자주 접하고 있는 인터넷 보안 문제

 

우리는 일상적으로 스팸 메일이나 수상한 메일들을 받고 산다. 그저 광고를 위한 메일들도 있지만 사회적으로 문제를 일으킬 수 있는 해킹을 위한 메일들도 꽤나 존재한다. 뉴스나 주변 지인 등 모르고 눌러봤다가 개인정보가 유출되어 신상이 노출되거나, 인터넷 결제를 통해 금전적 손실을 보는 경우도 볼 수 있다. (SNS가 해킹되어 이상한 게시물이 올라오는 것들도 마찬가지이다)

 

 

예를 들어 보자면

-> 어느 일반 유저가 a라는 웹 서비스를 사용하기 위해 로그인을 하였다. (인증 토큰을 보유하게 됨)

-> 어느 악성 유저는 일반 유저에게 클릭을 유도하는 내용이나 링크를 메일을 통해 보냈다. (악성 유저, 해커)

-> 일반 유저는 메일을 읽고 흥미를 느껴 링크를 클릭하여 다른 사이트에 방문하게 된다. (다른 사이트란 해커가 만든 악의적인 사이트)

-> 악성 유저는 일반 유저의 인증 토큰을 탈취하여 악의적인 용도로 사용할 수 있게 되었다.

악성 유저는 일반 유저인척하며 일반 유저에게 해가 되는 행위를 할 수 있으므로 보안 정책이 필요하다는 것이 느껴질 것이다.

 

이를 해결해 주는 것이 SOP이라는 것이다.

 

 

 

 

 

 

 

(2) SOP란?

 

SOP, Same-Origin Policy

: 같은 출처끼리만 요청을 보낼 수 있게 해주는 정책

: 다른 출처의 리소스를 사용하는 것에 대해 제한하는 보안 방식

 

 

SOP이 존재하기 때문에 다른 사이트의 요청이 있다면 이를 차단해 준다.

 

여기서 생기는 문제!

그럼 내 웹 사이트에서 다른 웹 사이트를 불러오고 싶을 땐 어떻게 해야 하는데!

라고 생각할 수 있다. 이것을 해결해 주는 것이 바로 CORS이다.

 

 

 

 

 

 

 

(3) CORS란?

 

CORS, Cross-Origin Resource Sharing

: 다른 출처의 요청을 보낼 수 있게 해주는 정책

: 다른 출처의 자원을 공유하는 정책

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

 

 

 

 

 

 

 

(4) Origin이 뭔데 Same-origin, Cross-Origin 하는 거야?

 

URL에서 Protocol + Host + Port를 합친 것을 의미  ->  http://dohangang.com:80  

URL의 Protocol, Host, Port를 통해 같은 출처인지 다른 출처인지 판단할 수 있다.

(http://localhost:80과 http://127.0.0.1:80 은 같은 IP가 맞지만, 브라우저 입장에서는 string value를 비교하기 때문에 서로 다른 출처로 판단한다.)

 

 

 

 

 

 

 

 

(5) 백엔드 개발자가 브라우저를 통한 요청을 알아야 해?

 

SOP와 CORS는 브라우저 정책이고 백엔드 개발자는 브라우저를 거친 요청을 거의 하지 않는데 왜 알아야 할까?

 

-> 프론트엔드 개발자가 CORS error를 겪음

-> CORS 응답 헤더 설정을 하라는 해결책을 찾음

-> 서버 개발자가 해야 함

-> 백엔드 개발자야 해줘~

 

알아야겠죠?

 

 

 

 

 

 

 

(6) CORS의 동작원리, 시나리오

 

 ※ 동작원리

1. Request의 Origin Header에 현재 요청을 보내는 곳의 출처를 담는다. (FE)
2. Response의 Access Control Allow Origin Header에 허용할 출처를 지정해 준다. 
3. 브라우저는 요청 Header의 Origin과 응답 Header의 Access Control Allow Origin Header의 출처가 같은지 판단 후에 판단해 준다.

 

 ※ 접근 제어 시나리오

1. Simple Request, 단순요청
 Preflight 요청 없이 바로 요청하기 위해선, 다음 조건을 모두 만족해야 한다.
- GET, POST, HEAD 메서드
- ConTent-Type
     a. application/x-www-form-urlencoded
     b. multipart/form-data
     c. text/plain
- 헤더는 Accept, Accept-Language, Content-Language, Content-Type만 허용됨



2. Preflight Request, 프리플라이트 요청, 대부분의 요청, 일반 http 요청이 올 때
 예비 요청을 먼저 하고 본 요청을 한다.

PREFLIGHT REQUEST
  - Origin: 요청 출처
  - Access-Control-Request-Method: 실제 요청의 메서드
  - Access-Control-Request-Headers: 실제 요청의 추가 헤더
PREFLIGHT REQUEST
  - Access-Control-Allow-Origin: 서버 측 허가 출처
  - Access-Control-Allow-Methods: 서버 측 허가 메서드
  - Access-Control-Allow-Headers: 서버 측 허가 헤더
  - Access-Control-Max-Age: Preflight 응답 캐시 시간

Origin ≠ Access Control Allow Origin  →  CORS error
Origin = Access Control Allow Origin  →  출처 허용
(매번 한 번의 실행을 위해 두 번의 요청을 해야 한다는 것은 리소스적으로 좋지 않으므로 해당 응답에 대해 캐싱을 해두고 다음 요청에는 캐싱을 확인하고 바로 본 요청을 보낼 수 있다.)



3. Credentialed Request, 인증 정보 포함 요청, 쿠키나 세션 같은 정보가 담긴 인증 정보를 담은 http 요청이 올 때
예비 요청과 본 요청이 오는 기본은 Preflight와 동일하다.

다른 점은
(1) 요청 header에 쿠키나 세션같은 정보가 담겨 온다.
(2) Access Control Allow Origin 설정에서 * 불가, 모든 출처 허용 안됨, 허용할 출처 직접 지정
(3) Access Control Allow Credentials: true라는 header를 설정해야 한다.

JAVA spring에서 클래스 레벨 설정, 메서드 레벨 설정(@CrossOrigin), 전역 설정(@Configuration @Override) 등을 통해 CORS설정을 해줄 수 있다.

 

 

 

 

 

 

 

(7) 심심풀이 문제

http://Dohangang.com  같은 출처는? 

 

1) http://Dohangang.com/success

2) https://Dohangang.com

3) http://Dohangang.com:300/success?page=2

4) http://api.Dohangang.com

5) http://Dohangang.com:8000

 

 

답은 댓글에서 확인 바랍니다~

 

 

 

 

 

 

 

 

 

참고자료:

얄팍한 코딩사전, 웹개발 짜증유발자! CORS가 뭔가요?

우아한테크, 성하의 CORS

우아한테크, 나봄의 CORS