cors는 Cross Origin Resoucre Sharing의 약자이다. origin resource가 무엇인지부터 알아보자.
Origin?
직역하면 '출처'이지만 실제 의미는 또 다르다.
Origin은 URL에서 프로토콜, 도메인, 포트 번호를 합친 부분을 의미한다.
즉, https://velog.io/@songhyun 이 url에서 프로토콜에 해당하는 부분은 http://, 도메인은 velog.id/@songhyun, 포트 번호는 80이다.
따라서 origin은 https://velog.io/@songhyun:80이다.
SOP?
SOP는 또 무엇인가?
SOP는 Same Origin Policy이다. CORS와 밀접하게 관련이 있으니 이것도 알아보자.
직역하면 '동일 출처 정책'이다. 이것 역시 브라우저 보안 정책인데 다른 Origin으로 요청을 보낼 수 없게 막는 정책이다.
예전에는 이것이 절대적인 규칙이었지만 다른 origin끼리 데이터를 주고받을 일이 많아지면서 SOP에 예외 사항들이 생긴 듯 하다.
그럼 중요한 것은 예외 사항들이겠다.
찾아보니
- <script> 태그로 js를 실행하는 경우
- 이미지를 렌더링하는 경우
- <link> 태그로 스타일 시트 파일을 가져오는 경우
- HTML 문서를 화면에 보여주는 경우
에는 다른 Origin으로의 요청을 허용한다고 한다.
또 한가지 경우가 더 있는데, 그게 CORS 정책을 지키는 요청의 경우이다.
즉, CORS란 다른 origin으로 요청을 보내기 위해 지켜야할 정책이다. 그러니 우리를 막는 것은 SOP이고 CORS는 그것을 풀어주는 역할이라는 것이다.
왜 필요한가?
지난 포스팅(https://velog.io/@songhyun/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC)에서 CORB에 대해 잠깐 언급했었는데, 위험한 주소가 숨겨져 있을 수도 있다고 간략하게 이야기했었다.
일단 아래 공격 방법들을 살펴보자.
XSS
1. 의미
Cross Site Scipting
웹사이트에 악의적인 스크립트를 삽입해 쿠키, 개인정보 등을 빼돌리는 해킹 기법이다.
예를 들어 게시글을 입력하는 곳에 <script>태그를 삽입해 악의적인 js 코드가 실행되도록 할 수 있다. 코드에 따라 쿠키나 개인정보 등을 빼올 수 있고, 특정 웹사이트로 이동 등 사용자가 의도하지 않은 동작을 수행한다. 주로 중요한 데이터를 다른 사이트로 빼돌리기 위해 사용하기 때문에 'Cross Site'라는 이름이 붙었다.2. 공격 과정 예시
- 공격할 웹사이트 탐색
- 웹사이트에 악성 스크립트 삽입
- 사용자가 해당 웹사이트 방문 시 사용자의 쿠키 탈취
CSRF
1. 의미
Cross Site Request Forgery
forgery는 '위조'이다. 즉 요청 위조로, 인증된(권한을 가진) 사용자가 자신의 의도와 무관하게 공격자가 의도한 어떤 행위를 하도록 유도하는 해킹 기법이다.
예를 들어 권한을 가진(브라우저에 로그인 정보가 저장되어 있는 경우 등) 사용자가 해커의 악성 링크에 접속하면 자동으로 권한을 가진 웹사이트에 해커가 원하는 요청을 보내는 것이다.(계정의 비밀번호를 바꾼다던가 하는 것들..)2. 공격 과정 예시
- 공격할 웹사이트 탐색
- 비밀번호를 바꾸는 요청을 만든 후, 이를 하이퍼링크에 심어 사용자가 누르도록 유도한다.
- 사용자가 해당 링크를 누르면 해커의 요청이 해당 웹사이트에 가게 된다.
- 해당 웹사이트의 서버는 인증된 사용자로 인식하기 때문에 비밀번호가 해커가 의도한대로 바뀐다.
위와 같은 공격들을 만약 다른 origin으로의 요청을 막는 정책이 있다면, 이러한 문제들을 어느정도 예방할 수 있다. 해커가 만든 웹사이트와 원래 웹사이트는 당연히 origin이 다를 것이기 때문에, 해커의 웹사이트에서 원래 웹사이트에 요청을 보낼 수 없기 때문이다. 따라서 SOP는 브라우저의 기본 보안 정책으로 존재한다.
CORS 동작 원리
기본 동작은 브라우저가 다른 origin으로 요청을 보낼 때 origin 헤더에 자신의 origin을 설정하고, 서버로부터 응답을 받으면 응답의 Access-Controll-Allow-Origin 헤더에 설정된 origin 목록에 요청의 origin 헤더 값이 포함되는지 검사한다.
즉, CORS 요청을 위해서는 서버의 응답의 Access-Controll-Allow-Origin 헤더에 허용되는 origin의 목록 혹은 와일드카드(*)를 설정해주면 된다.
와일드카드(*)는 모든 origin을 허용한다는 뜻이다.
세부적으로 보면 3가지 cors 요청 유형이 있지만 나중에 살펴보자.
