CORS는 뭐에요?
브라우저에서 cross-origin으로 요청을 하려면 서버의 허락을 맡아야 합니다. 왜냐하면 보안의 측면에서 출처가 불분명한 곳에서 온 요청을 함부로 허락하게 된다면, 나의 개인적인 정보들은 어떻게 될지 모릅니다.
위와 같은 과정을 우리는 HTTP-header를 이용해서 할 수 있고, 이것을 CORS(Cross-Origin Resource Sharing)라고 합니다.
cross-origin에 해당하는 경우
- http, https 각각 다른 통신 프로토콜을 사용하는경우
- 도메인이 다른 경우
- 포트번호가 다른 경우
경우에 따라 Simple Request, Preflight Request가 있는데 Simple Request의 경우 요청한 Origin 값과 응답한 Header에 포함된 값을 비교하여 유효하지 않은 요청이라면 브라우저에서 막고 에러가 발생합니다.
Preflight Request의 경우 미리 OPTIONS 메소드로 확인을 하고, 유효하면 원래 보내려고 하던 내용을 보내 과정을 진행합니다.
CORS 해결방법
- CORS 모듈을 이용하여 설정을 해줍니다.
- 직접 응답 헤더에 값을 집어넣습니다.
허용가능한 메소드와 Origin을 설정가능합니다.
쿠키는 뭐에요?
브라우저가 서버에 요청을 보냈는데, 응답에 Set-Cookie 헤더가 있는 경우, 브라우저는 Set-Cookie에 있는 데이터를 저장하고 이것을 쿠키라고 합니다.
퍼스트 파티 쿠키, 서드 파티 쿠키
쿠키는 도메인을 설정할 수 있는데, 이 도메인을 기준으로 각각 나눠집니다.
먼저, 서드 파티 쿠키는 브라우저의 도메인과는 다른 도메인으로 보내지는 요청에 전송되는 쿠키입니다. 예를들어 내가 blog.shbox.kr인데 api.shbox.kr이라는 곳으로 보내지는 요청에 포함되어 있는 쿠키가 서드파티 쿠키가 될 수 있습니다.
반대로 퍼스트 파티 쿠키는 현재 브라우저와 같은 도메인으로 보내지는 쿠키입니다.
CSRF 문제
CSRF(Cross Site Request Forgery)는 쿠키에 별도의 설정이 없으면 모든 HTTP 요청에 대해 쿠키를 전송하게 됩니다. 이것은 큰 문제가 될 수 있습니다.
1. 현재 사이트는 쿠키로 사용자 정보를 넘겨줍니다.
2. 사용자는 사이트에 로그인하여, 정보를 쿠키에 저장합니다.
3. 공격자는 그럴듯한 사이트 링크를 삽입하여 사용자가 클릭하도록 합니다.
4. 사용자가 링크를 클릭하는 순간 공격자의 서버로 내 정보 쿠키가 들어가게 됩니다.
SameSite
위에서 말한 보안적인 문제를 해결하기 위해서 등장한 기술입니다. Cross Site로 전송되는 요청의 경우 쿠키 전송에 제한을 둡니다. None, Lax, Strict 3가지의 제한 방식이 존재합니다.
- None : 기존의 쿠키와 동작하는 방식이 같습니다.
- Strict: 가장 보수적인 방식입니다. Cross Site로는 쿠키가 전송되지 않습니다. 즉, 퍼스트 파티 쿠키만 전송됩니다.
- Lax : Strict에 비해 자유롭습니다. Lax로 설정된 경우, 대체적으로 서드파티 쿠키는 전송되지 않지만 예외적인 요청에는 전송할 수 있습니다. 크롬의 쿠키 기본 설정은 Lax로 되어있습니다.
Secure
마찬가지로 쿠키에 제한을 둘 수 있습니다. Secure설정이 된 쿠키는 HTTPS가 적용된 요청에만 전송되는 쿠키입니다.
httpOnly
쿠키가 브라우저 내 자바스크립트로 위 변조 되는 것을 막기 위한 옵션입니다.
1. document.cookie와 같은 자바스크립트로 쿠키를 조회하는 것을 막습니다.
2. 브라우저에서 해당 옵션이 활성화 되어 있는 쿠키를 조회할 수 없습니다.
3. 서버로 HTTP Request 요청을 보낼 때만 쿠키를 전송합니다.
4. XSS(Cross Site Scripting) 공격을 차단할 수 있습니다. (1번의 이유 때문에)
