TIL102. HTTP : Cross-Origin Resource Sharing

🌈 CORS 란?

🔥 SOP와 CORS의 등장 배경

🔥 Cross-Origin Resource Sharing 란?

🔥 CORS 시나리오

🔥 CORS 에러 해결하기

1. SOP와 CORS의 등장 배경

🤔 동일 출처 정책(Same-Origin Policy) 란?

✔️ 웹 생태계에는 다른 출처로의 리소스 요청을 제한하는 것과 관련된 두 가지 정책이 존재한다. 한 가지는 CORS, 그리고 또 한 가지는 SOP(Same-Origin Policy)이다.

✔️ 이 중 SOP는 2011년, RFC 6454에서 처음 등장한 보안 정책으로 말 그대로 “같은 출처에서만 리소스를 공유할 수 있다”라는 규칙을 가진 정책이다.

✔️ 같은 출처와 다른 출처에 대해서는 이미 정리(참고 : Same Origin)해 두었다.

✔️ 이에 따라 SOP는 어떤 출처(origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용 하는 것을 제한시키는 중요한 보안 방식이다.

✔️ SOP 정책을 통해 클라이언트와 서버가 통신함에 있어서 XSS나 XSRF 등의 보안 취약점을 방어할 수 있다.

• XSS(Cross Site Scription, 사이트 간 스크립팅) : 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 행위

• XSRF(Cross Site Request Forgery, 사이트 간 요청 위조) : 사용자가 자신의 의지와는 무관하게 공격자가 이도한 행위(수정, 삭제, 등록 등)를 웹사이트에 요청하게하는 공격 행위

🤔 CORS 등장 배경

✔️ 웹이라는 생태계에서 다른 출처에 있는 리소스를 가져와서 사용하는 일은 굉장히 흔한 일이고, 점차 이러한 필요성이 커지게 되면서 SOP의 정책은 보완의 필요성을 가지게 된다.

✔️ 특히, SOP로 인해 외부 리소스를 가져오지 못하는 불편이 발생한다. 이에 많은 개발자들이 JONP, Reverse Proxy, Flash Socker 등 우회하는 방법을 만들었지만 Cross Domain 이슈를 해결하는 표준의 필요성이 커지게 되었다.

✔️ 이에 W3C의 권장사항으로 CORS 정책을 발표하게 된다.

2. Cross-Origin Resource Sharing 란?

🤔 Cross-Origin Resource Sharing

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

✔️ 즉, 우리가 다른 출처로 리소스를 요청한다면 SOP 정책을 위반한 것이 되고, 거기다가 SOP의 예외 조항인 CORS 정책까지 지키지 않는다면 다른 출처의 리소스를 사용할 수 없게 되는 것이다.

✔️ 이에 SOP 또는 CORS 정책에 의거해서 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지, 웹브라우저에 의해 평가되고 결정된다.

3. CORS 시나리오

🤔 Preflight Request

✔️ Preflight Request는 본 요청 이전에 이뤄지는 예비 요청 개념이다. 이 사전 요청은 OPTIONS라는 매서드를 통해 이뤄진다.

✔️ 이 예비 요청에서 request의 origin값과 response의 Access-Control-Allow-Origin이 일치하면, 브라우저에서는 같은 출처라 인식해서 본 요청을 보내게 된다.

✔️ 이에 브라우저는 같은 출처라 인식하게 되면 CORS 정책에 위반되지 않았다 판단하고, 본 요청에 제대로된 응답을 받을 수 있게 된다.

✔️ 만일 예비 요청에서 origin값과 Access-Control-Allow-Origin값이 불일치하다면 본 요청은 이뤄지지 않는다.

🤔 Simple Request

✔️ Simple Request는 Preflight Request 요청이 별도로 존재하지 않고, Simple Request 때 모두 포함되어있는 개념이다.

✔️ 이 또한 origin과 Access-Control-Allow-Origin을 비교해서 동일 출처인지 브라우저를 통해 판단되고 동일할 경우, 요청에 대한 응답을 처리한다.

✔️ 단, Simple Request는 HEAD, GET, POST 중 하나의 메서드 일 때만 사용가능하고, 사용할 수 있는 header의 종류가 제한적이다. 특히, Content-Type으로 application/json을 사용할 수 없다.

🤔 Credentialed Request

✔️ Credentialed Request는 보다 보안을 강화시킨 방식으로 쿠기를 담기 위해 옵션이다. 이 옵션으로 same-origin(기본값), include, omit을 줄 수 있다.

✔️ same-origin은 같은 출처 간 요청에만 인증 정보를 담겠다는 옵션 값이고, include는 모든 요청에 인증 정보를 담을 때 사용한다. omit은 모든 요청에 인증 정보를 담지 않을 때 사용한다.

✔️ 참고로 위 옵션값들은 fetch를 줄 때, 사용하는 옵션이다.

fetch('https://jaewon.com/products/1', { credentials: 'include'})

✔️ 단, Access-Control-Allow-Origin에 *을 사용할 수 없고, 명시적인 URL을 지정해야 한다. 또한 응답 header에 Access-Control-Allow-Credentails:true가 존재해야 한다.

4. CORS 에러 해결하기

🤔 프록시 서버 사용하기

✔️ 현재 프론트 자신이 프론트 입장이거나, 해당 서버를 제어할 수 없는 상황이라면 프록시 서버를 이용해서 CORS 문제를 해결해야 한다.

✔️ 이를 위해 남이 만든 만들어진 프록시 서버를 이용하거나 직접 프록시 서버를 구축해야 한다.

✔️ 즉, 이 중계서버를 이용해서 요청을 가로챈 뒤, Access-Control-Allow-Origin : * 을 설정해서 서버에 요청되게 하는 것이다.

🤔 django에서 cross origin HTTP 요청을 허가시키기

✔️ pip install로 django-cors-headers 앱을 설치한다.

✔️ installed apps과 middleware에 아래 내용을 추가 한다. 중요한 점은 middleware에 cors 설정을 가장 높게 위치시킨다.

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # < 가능한한 높게 위치시킨다.
    ...
]

✔️ 아래는 모든 호스트를 허용시키기 위해 CORS_ORIGIN_ALLOW_ALL을 True로 지정한 것이다.

✔️ CORS_ALLOW_CREDENTIALS은 쿠키가 cross-site HTTP 요청에 포함될 수 있게하기 위한 설정이고 Default는 False다.

##CORS
CORS_ORIGIN_ALLOW_ALL=True
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_METHODS = ( # 👈 custom method가 있다면 여기 추가한다.
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)
CORS_ALLOW_HEADERS = (  # 👈 custom header가 있다면 여기 추가한다.
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

✔️ 모든 호스트가 아닌, 특정 호스트를 허용시키고 싶다면 CORS_ORIGIN_WHITELIST를 작성해야한다.

##CORS
CORS_ORIGIN_WHITELIST = (
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:8080",
    "http://127.0.0.1:9000"
)
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

🤔 nginx에서 CORS 설정을 통해 error 해결

✔️ 용량이 큰 사진을 업로드할 경우, nginx에서 CORS에러를 발생시킨다는 이슈를 본적이 있어 간략하게 정리해본다.

✔️ 이 이슈를 요약해보면, nginx에서 client_max_body_size가 1mb로 제한되어 발생하는 문제라고 한다.

✔️ nginx가 설치된 폴더 안에 conf/nginx.conf 파일을 수정해야 한다.

location / {
    #root   html;
    root e:/;
    add_header 'Access-Control-Allow-Origin' '*'; # 👈 cors 허용 추가
    index  index.html index.htm;
}
http {
    ...
    client_max_body_size 20M; # 👈 사진 사이즈 제한 변경
}