CORS

2021-06-16글

[10분 테코톡] 🌳 나봄의 CORS을 들으며 정리한 글입니다.

배경 지식

SOP(Same Origin Policy)

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

왜 SOP?

• CSRF Attack 때문!
• 사용자는 인증 토큰을 가지고 있는 상태
• 해커가 만든 주소로 이동하는데, 여기다 해커는 악의적인 스크립트를 심음
• 해커는 인증 토큰을 가지고 악의적인 스크립트를 실행할 수 있음
• 만약 송금이나 민감한 정보를 건드릴 시 굉장히 위험

여기서 SOP가 위력을 발휘

• 웹사이트 입장에서는 자신과 다른 출처를 가지기 때문에 위 요청은 받을 수 없다고 판단

출처(Origin)란?

• Protocol, Host, Port 세가지가 같아야 같은 출처라고 판단
• 참고로 인터넷 익스플로어는 출처판단에 Port가 포함되지 않음

🤔 그러면 다른 출처 리소스가 필요하면 어떻게해??

CORS!!

---

CORS란?

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

CORS 접근제어 시나리오

단순 요청 (Simple Request)

• Preflight 요청 없이 바로 요청

조건을 모두 만족해야 함

• 메서드는 아래만 허용
  • GET, POST, HEAD
• Content-Type은 아래만 허용
  • application/x-www-form-urlencoded
  • multipart/form-data
  • test/plain
• Header는 아래만 허용
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type

프리플라이트 요청 (Preflight Request)

• 쉽게 말하자면 사전 확인 작업
• OPTIONS 메서드를 통해 다른 출처의 리소스에 요청이 가능한지 확인하는 작업
• 요청이 가능하면 실제 요청(Actual Request)을 보냄

• 클라이언트가 사전 요청을 보냄
• 서버는 이에 응답
• 만약 이 요청이 거부된다면 Actual Request는 보내지 않음

Preflight Request 포맷

• Origin : 요청 출처
• Access-Control-Request-Method : 실제 요청의 메서드
• Access-Control-Request-Headers : 실제 요청의 추가 헤더

Preflight Response 포맷

• Access-Control-Allow-Origin : 서버 측 허가 출처
• Access-Control-Allow-Methods : 서버 측 허가 메서드
• Access-Control-Allow-Headers : 서버 측 허가 헤더
• Access-Control-Max-Age: Preflight 응답 캐시 기간
  • 사전 요청과 실제 요청을 매번 보내면 효율적이지 않으니 브라우저는 사전 요청을 캐싱해둠

Preflight Response 특징

• 응답 코드는 200대여야 함
• 응답 바디는 비어있는 것이 좋음

왜 Preflight가 필요할까?

• 사전 요청이 없으면 서버는 요청에 대해 모든 로직을 일단 수행함
• 그리고 나서 Origin을 판단
• 일단 로직이 수행된 후 CORS 이슈가 발생
• 사전 요청이 있으면 요청을 수행하기 전 Origin을 판단
• 때문에 서버는 안전히 잘 지켜짐

인증정보 포함 요청 (Credentialed Request)

• 인증 관련 헤더를 포함할 때 사용하는 요청
• 클라이언트 측
  • credentials : include
• 서버 측
  • Access-Control-Allow-Credentials : true
  • 대신 이러면 아래와 같은 조건이 충족되어야 함

조건

• Access-Control-Allow-Origin에는 *를 사용할 수 없으며, 명시적인 URL이어야함
• 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true가 존재해야함

🚨 Access to fetch at ’https://localhost:8080’ from origin ’http://localhost:8000’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ’*’ when the request’s credentials mode is ‘include’.

CORS 해결하기!

프론트 프록시 서버 설정(개발 환경)

• 브라우저 입장에서는 origin과 target이 같기 때문에 same origin

추가

• 내가 CORS 이슈를 해결한 방법 - Proxy

스프링 부트 이용

@CrossOrigin 어노테이션 사용

참고

• Origin을 설정 안해주면 Default 값으로 모든 Origin을 허용함
• 때문에 설정해주는 것이 좋음

전역으로 설정하는 방법 - Config

---

참고 자료

• [10분 테코톡] 🌳 나봄의 CORS
• CORS는 왜 이렇게 우리를 힘들게 하는걸까?