search

Hah-nna / Tech_Interview

0 stars 0 forks source link

[Network] CORS 에러란? #13

Open young-02 opened 12 months ago

young-02 commented 12 months ago

CORS 에러란?

요청 방식에 따라 다른 CORS 발생 여부

Cross-Origin

<img>,<video>,<script>,<link> 태그 는 다른사이트의 리소스에 접근하는것이 가능하다.

Same-Origin

CORS 란?

Cross-Origin Resource Sharing 는 웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법이다.

origin 란?

Protocol + Host + Post 모두 합쳐진 URL을 의미한다.

Protocol: http, https Host: domain Port: 포트 번호 Path: 사이트내부 경로 Query string: 요청의 key와 value값 Fragment: 해시태그

동일 출처 정책(Same-Origin Policy)

SOP (Same-Origin Policy)

동일한 출처에 대한 정책 = 동일한 출처에서만 리소스를 공유할 수 있다. 다른출처(Cross-Origin) 서버에 있는 이미지나 유튜브 영상 같은 리소스는 상호작용이 불가능하다.

동일 정책이 필요한 이유

해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등의 방법을 이용해서 어플리케이션에 해커를 심어놓은 코드가 실행하여 개인 정보를 가로챌수 있다. 이러한 경우를 방지 하기위해 사전에 방지 하는 것이다.

출처의 구분

URL의 구성요소 중 Protocal, Host,Port 3가지만 동일하면 동일 출처로 판단한다.

출처비교와 차단은 브라우저가

출처를 비교하는 로직은 브라우저에 구현된 스팩이다.(브라우저가 응답을 받아 동일 출처가 아니며 에러를 보낸다.)

교차 출처 리소스 공유(Cross-Origin Resource Sharing)

다른 출처의 리소스 공유에 대한 허용/비허용 정책이다.

CORS는 예외 조항을 두고 다른 출처의 리소스 요청이라도 이 조항에 해당할 경우 허용한다.

브라우저 CORS 기본동작

  1. 클라이언트에서 HTTP 요청의 헤더에 Origin을 담아 전달
    1. 기본적으로 웹은 HTTP프로토콜을 이용하여 서버에 요청을 보낸다.
    2. 브라우저는 요청 헤어데 Origin이라는 필드에 출처를 담아 보내게 된다.
    3. ![[스크린샷 2023-11-30 오후 8.06.56.png]]
  2. 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달한다.
    1. 서버가 이 요청에 대한 응답을 할 때 응답 헤어데 Access-Control-Allow-Origin이라는 필드를 추가하고 값으로 이 리소스를 접근하는 것이 허용된 출처 url을 내려보낸다.
    2. ![[스크린샷 2023-11-30 오후 8.09.05.png]]
  3. 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한다.
    1. 비교해 본후 차단할지 말지 결정
    2. 유효하지 않다면 응답하지 않고 CORS에러
    3. 유효하다면 다른출처의 리소스를 문제없이 가져오게 된다.

CORS 에러가 발생하는 경우

  1. 출처가 다른 도메인 또는 포트로 리소스를 요청할 때
    • Access-Control-Allow-Origin 헤더 설정하여 요청 허용
  2. HTTPS에서 HTTP로 리소스를 요청할 때
  3. 인증 정보를 포함한 요청을 보낼 때
    • Access-Control-Allow-Credentials 헤더 설정 (설정되어 있지 않으면 브라우저는 인증 정보가 포함된 요청을 거부함)
  4. 허용되지 않은 메서드를 사용할 때
    • Access-Control-Allow-Headers 헤더를 설정하여 요청을 허용한다.
  5. 프리플라이트 요청에 대한 응답이 없는 경우
  6. 브라우저가 CORS를 지원하지 않는 경우
  7. CDN 등에서 제공하는 리소스를 요청할 때
    • CDN 등 제공하는 리소스 요청 할때도 CORS에러가 발생할 수 있다. 해당 설정 확인해야함
  8. 허용되지 않은 헤더를 사용할 때
    • Access-Control-Allow-Headers 헤더를 설정
  9. 브라우저 설정 문제

프론트에서 인증정보 포함한 요청을 보낼 때

인증 정보를 포함한 요청을 보낼 때 프론트에서도 처리해줘야 할것이 있는데 withCredentials옵션을 추가 하는 것이다.

young-02 commented 11 months ago

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F