본문 바로가기

Web/Frontend 기본 CS 정리

CORS와 Preflight의 개념

728x90

출처

웹 개발자 면접 단골 질문 1 | CORS와 Preflight의 개념

CORS란 무엇인지 설명해주세요

CORS는 Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유라고도 불립니다.

2009년에 HTML5 표준으로 채택된 프로토콜이며, SOP에 의해 제한된 교차 출처 간 리소스 공유를 허용하기 위한 방법입니다.

애플리케이션의 요구사항이 복잡해지면서, 다른 도메인의 리소스를 활용하는 경우가 많아졌기 때문에 등장한 프로토콜로, 서버에서 CORS 관련 헤더를 설정하여 다른 도메인에서의 리소스 요청을 허용할 수 잇습니다.

www.google.com에서 현재 서버로 리소스 요청하는 것을 허용, origin 외에도, 허용할 HTTP 메서드 종류, 요청 헤더 등 여러 옵션 설정이 가능

CORS 에러는 CORS 헤더를 적절히 설정하지 않은 상태에서 교차 출처 리소스를 요청하는 경우 발생할 수 있습니다.

SOP란 무엇인지 설명해주세요

SOP는 Same Origin Policy의 약자로, 동일 출처 정책을 의미합니다.

현재 출처와 동일한 출처의 리소스만 접근할 수 있도록 하는 정책입니다.

→ 여기서 동일 출처란, 도메인과 프로토콜, 포트번호가 모두 같은 경우를 의마하며 하나라도 다를 경우 동일 출처 정책에 의해 리소스 접근이 제한됩니다.

SOP가 없을 경우 가능한 보안 취약점은 무엇인가요?

사용자 인증 정보에 해당하는 세션 ID같은 정보들이 쿠키에 포함되어 있을 수 있기 때문에 이세션 정보를 탈취하여 Cross Site Scriptinh 혹은, CSRF와 같은 해킹 공격에 이용할 수 있습니다.

SOP 정책을 통해 리소스를 다른 도메인에서 접근하지 못하도록 제한한다면 이러한 해킹 공격을 어느 정도 완화할 수 있습니다.

CORS 프로토콜이 동작하는 원리를 설명해주세요

서버는 응답 처리 코드에서 CORS 관련 헤더를 설정할 수 있습니다.

이 헤더를 통해 요청을 허용할 도메인과 HTTP 메서드, 그리고 요청 헤더의 종류를 정의할 수 있습니다.

이후 브라우저에서 서버로 리소스를 요청할 때, 이 헤더에 설정한 정보와 일치하지 않는다면 브라우저에서 CORS 에러가 발생합니다.

CORS 프로토콜 스펙에서 정의한 비교적 보안적으로 민감하지 않다고 판단되는 요청들이 있는데,

이를 단순 요청이라하며, 이 요청을 제외한 모든 CORS 요청에는 실제 요청을 전송하기 전에 요청 허가를 위한 preflight 요청이 발생할 수 있습니다.

preflight 요청이란 무엇인지 설명해주세요

preflight 요청은 보안적으로 민감한 CORS 요청에 대해 요청이 가능한지를 먼저 확인하는 과정

→ 실제 리소스를 주고 받기 전, 허가된 요청인지 확인하는 과정

브라우저에서 자동으로 실행되는 요청으로 OPTIONS 메서드를 사용하며, 서버에서 설정한 CORS 관련 설정들을 Header 값으로 확인할 수 있습니다.

이 과정을 통해, 허용되지 않는 요청에 대한 처리 부하를 낮출 수 있습니다.

모든 CORS 요청마다 Preflight 요청이 일어나나요?

보안적으로 민감하지 않은 단순 요청이거나 이전에 응답받은 preflight 응답이 캐싱되어 있는 경우 preflight 요청이 일어나지 않습니다.

서버에서 Access Control Max Age라는 헤더값을 초 단위로 설정할 수 있고, 이전 요청의 응답 값이 아직 캐싱되어 있다면, 같은 요청에 대해서는 preflight 요청이 일어나지 않습니다.

단순 요청이 무엇인지 설명해주세요

요청의 메서드가 GET, HEAD, POST 중 하나이며, 헤더와 Content Type이 CORS 프로토콜에서 지정한 값인 경우가 단순 요청에 해당합니다.

이 경우는 preflight 과정을 통한 권한 조회 과정 없이 CORS 요청이 가능합니다.