[Django] CORS

CORS

SOP(Same-Origin Policy)

1️⃣ SOP란?

• 동일 출처 정책

• 특정 출처(origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 보안 방식

• 잠재적으로 해로울 수 있는 문서를 분리 ➡️ 공격받을 수 있는 경로 줄임

2️⃣ Origin(출처)

• 두 URL의 Protocol, Port, Host가 모두 같아야 동일한 출처

*️⃣ http://localhost:3000/posts/3

Scheme / Protocol	Host	Port	Path
http	localhost:	3000	posts/3

CORS

1️⃣ Cross-Origin Resource Sharing

• 교차 출처 리소스(자원) 공유
• 추가 HTTP Header를 사용 ➡️ 특정 출처에서 실행중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
• 리소스가 자신의 출처(Domain, Protocol, Port)와 다를 때 교차 출처 HTTP 요청을 실행
• 보안 상의 이유로 브라우저는 교차 출처 HTTP 요청을 제한 ➡️ SOP
• 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS Header를 포함한 응답을 반환

2️⃣ CORS Policy

• 교차 출처 리소스(자원) 공유 정책
• 다른 출처에서 온 리소스를 공유하는 것에 대한 정책
• SOP와 반대

3️⃣ 교차 출처 접근 허용 방법

• CORS는 HTTP의 일부
• 어떤 호스트에서 자신의 컨텐츠를 불러갈 수 있는지 서버에 지정

4️⃣ CORS의 특징

• 브라우저&웹 애플리케이션 보호
  • 악의적인 사이트의 데이터를 가져오지 않도록 사전 차단 가능
  • 응답으로 받는 자원에 대한 최소한의 검증
  • 서버는 정상 응답 BUT 브라우저에서 차단
• 서버의 자원 관리
  • 누가 해당 리소스에 접근할 수 있는지 관리 가능

5️⃣ HTTP Header

• Access-Control-Allow-Origin
  • 요청을 허용한 출처(Origin)을 명시할 때 사용
  • *을 사용하면 모든 출처의 리소스 요청을 허용
  • 여러 출처 명시 불가능
• Access-Control-Allow-Credentials
  • 쿠키를 요청에 포함
• Access-Control-Allow-Headers
  • 어떤 헤더들을 허용할 것인지 명시
• Access-Control-Allow-Methods
  • 어떤 메서드를 허용할 것인지 명시

CORS 시나리오

1. Vue.js ➡️ A 서버 요청
2. A서버 ➡️ Access-Control-Allow-Origin에 특정 origin을 포함 시켜 응답
   • 서버는 CORS Policy와 연관 없이 단순히 요청에 응답
3. 브라우저 ➡️ 응답에서 Access-Control-Allow-Origin 확인 후 허용 여부 결정

django-cors-headers

• 응답에 CORS Header를 추가해주는 장고 라이브러리

• 다른 출처에서 보내는 Django 어플리케이션에 대한 브라우저 내 요청 허용

• Django app이 header 정보에 CORS 설정한 상태로 응답을 보낼 수 있게 지원 ➡️ 브라우저는 다른 Origin에 요청 가능

• 설치 및 등록

  • 설치

    pip install django-cors-headers

  • INSTALLED_APPS에 등록

  • MIDDLEWARE 추가

    • ⚠️ settings.py에 등록할 때 CommonMiddleware보다 위에 위치해야 함

  • CORS_ALLOWED_ORIGINS에 교차 출처 자원 공유 허용할 Domain 등록