CORS(Cross-Origin Resource Sharing)

nais·2022년 1월 2일
0
post-thumbnail

SOP(Same-Origin Policy)

웹 보안 정책 중 Sama-origin-policy는 한 출처(origin) 에서 로드 된 문서나 스크립트가 다른 출처 자원과 상호작용하지 못하도록 제약

출처(origin)는 두 페이지의 protocol,Host,Port 가 같으면 동일출처(same-origin) 이다.

나오게된 배경

옛날의 웹 브라우저는 이러한 형태 유저가 웹 브라우저 주소창에 주소값을 입력하면 서버로 요청이 가고
서버에서는 응답을 할 때 HTML 페이지를 반환 , 추가 요청을 넣는다고 해도 이건 어디까지나 같은 도메인에서 일어나는 작업 환경

->웹 사이트에서 다른 서버로 요청을 날리다는 것 자체가 개인정보 유출, 보안상 악의적인 행동을 하는 것으로 의심하던 시절이기 때문에

👩‍🏫도메인이 다르면 요청을 주고 받을 수 없게 하려는게 웹 브라우저의 정책이 된것이다.

CORS (교차 출처 리소스 공유)

웹 페이지의 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로 부터 요청할 수 있도록 허용하는 구조

웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 speci

기존에 사용하던 방식

웹 페이지가 아닌 웹 어플리케이션을 만들기 시작하면서
기존 웹 브라우저 정책 때문에 불편한 점이 생기기 시작했다 웹 사이트 방문자들에게 다양한 기능을 제공하고 싶은게 그게 불가능 했다는 것이다

HTML script 파일로는 다른 도메인들을 불러오는게 가능했다

그래서 쓰였던 방식 JSONP

원래는 스크립트를 불러오라고 하는 기능을 우회적으로 사용.. 실제로 서버에서 데이터를 반환하는 용도인 것이다.

웹 브라우저에서 공식적으로 추가해준 CORS

  • 프론트엔드 단에서는 get 요청 보낼 때 CORS 옵션만 넣어주면 된다 (Request header 에 CORS 관련 옵션 넣어주기)

  • 웹 서버에서는 CROS를 끄고 켤수 있도록 되어져있다 (Reseponse header에 해당하는 옵션을 허용하는 내용을 넣으면된다)

  • 웹 서버에서 서로 다른 도메인의 리소스를 받기 위해서는 프론트엔드와 서버에서 작업을 해주어야한다

해결방법

Server 의 해결 (response)

HTTP 응답헤더 Access-Control-Allow-Origin : * 혹은 Access-Control-Allow-Origin: 허용하고자 하는 도메인 설정해주기.

클라이언트 해결 (request)

리소스 요청하는 서버 사이에 프록시 서버를 하나 거쳐서 요청,응답을 주고 받기.

프록시 서버 : 브라우저와 서버를 통신하는 과정 중간에서 정보교환을 도와주는 중간 서버 ( 브라우저 - 프록시 서버 - 서버 )

프록시 서버는 헤더를 추가하거나 요청을 허용/거부하는 역할을 중간에서 해줘서 Access-Control-Allow-Origin : *의 헤더를 담아 응답

아무래도 중간단계가 있기 때문에 속도가 느려지는 단점

https://evan-moon.github.io/2020/05/21/about-cors/

profile
왜가 디폴트값인 프론트엔드 개발자

0개의 댓글