오늘의 공부 👍

오늘은 CORS 정책에 대해서 알아보겠다.

📝 CORS(Cross Origin Resource Sharing)의 이해

• SOP(same orgin policy)
  • 네이버(프론트) -> 네이버(백엔드) - 가능
  • 구글(프론트) -> 구글(백엔드) - 가능
  • 구글(프론트) -> 네이버(백엔드) - 불가능
    - 들어갈 수 있는 사이트가 한계가 있다보니 불편하고 개발이 안된다.

그래서 나온 것이 CORS정책이다 아무에게나 데이터를 줄 수 없으니 CORS를 설정해준다.

- 특정 사이트만 허락
cors({
	네이버, 구글
})
- 모든 사이트 허락
cors()

1. 네이버(프론트) -> 구글(백엔드)일때 CORS허용을 확인한다. (preflight)

2. 네이버(프론트) <- 구글(백엔드) CORS가 있는지 없는지 알려준다.

3-1. CORS가 있을 때 네이버(프론트) -> 구글(백엔드)로 진짜 API 전송

4. 인증완료!

3-2. CORS가 없을 때 네이버(프론트) -> 네이버(백엔드) -> 백엔드(구글)로 데이터 받아오기 가능!(우회)
프록시 서버 (대신 처리해줌) 브라우저가 막기 때문에 백엔드로 우회해서 요청을 보내는 것

핸드폰(인터넷 앱) -> 백엔드(구글) 가능

• 브라우저에서만 CORS가 막힌다.

📝 CSRF(cross site request forgery)

▷ cors 허용상태

• 네이버(프론트) -> 네이버(백엔드) 가능
• 나이버(프론트, 해커사이트) -> 네이버(백엔드) 가능
• 브라우저 쿠기저장소안에 있는 로그인증표는 네이버(백엔드)사이트에 요청을 할 때 어느 사이트에서 요청을 하던 같이 빨려들어간다.

▷ cors 금지상태

• 네이버(프론트) -> 네이버(백엔드) 가능
• 나이버(프론트, 해커사이트) -> 네이버(백엔드) 불가능
• 나이버(프론트, 해커사이트) -> 나이버(백엔드, 해커사이트) -> 네이버(백엔드) 불가능
• 왜냐하면 로그인증표가 나이버(프론트)에서 나이버(백엔드)로 가기 떄문에 나이버(백엔드, 해커사이트)에서 네이버(백엔드)로 요청했을 때 로그인 증표를 가져오라고 하기 때문에 우회해서 해킹하는건 불가능하다.

출처 및 참고
코드캠프