Keyword
Same Origin Policy(SOP); 동일 출처 정책
현재 페이지와 다른 출처로부터 온 데이터를 읽지 못하게 하는 브라우저의 보안 메커니즘
브라우저는 인증정보로 사용될 수 있는 쿠키를 브라우저 내부에 보관한다.
이용자가 웹 서비스 접속 시 브라우저는 쿠키(해당 웹 서비스에서 사용하는 인증정보)를 HTTP 요청에 포함시켜 전달한다.
사이트 직접 접속 외에도 웹 리소스를 통해 간접적으로 사이트에 접근할때도 인증정보인 쿠키를 함께 전송하는 특징이 있다.
=> 악의적인 페이지에서 클라이언트의 권한을 이용해 HTTP 요청을 보내고 응답정보를 획득하는 코드를 실행할 수 있는 것
고로, 데이터를 악의적인 페이지에서 읽을 수 없도록 해아하며, 이것이 바로 SOP에 해당한다.
SOP 구분 방법
Origin(브라우저가 가져온 정보의 출처)을 구분하는 법
- 프로토콜(Protocol, Scheme), 포트(Port), 호스트(Host)로 구성된다.
- 해당 구성요소가 모두 일치해야만 동일한 오리진이라 인식!
origin : https://example.com/일때,
https://example.com/sample = Same Origin(🙆♀️)
- path만 다르기 때문
http://example.com/sample = Cross Origin
- Scheme이 다르기 때문
https://cross.example.com/sample = Cross Origin
- Host가 다르기 때문
https://example.com:1111/ = Cross Origin
- Port가 다르기 때문SOP 제한 완화
브라우저에서 SOP에 구애받지 않고 외부 출처에 대한 접근을 허용해주는 경우,
이미지, js, css 등의 리소스를 불러오는 태그는 영향을 받지 않음
웹서비스에서 SOP를 완화하여 다른 출처의 데이터를 처리해야하는 경우도 있음
만약, 서로 다른 오리진을 가진 사이트들끼리 관련 리소스를 요청하기 위해서는 SOP를 적용받지 않고 공유할 방법이 필요하다.
리소스 공유를 위해 사용할 수 있는 방법을 교차 출처 리소스 공유(Cross Origin Resource Sharing, CORS)라고 한다.
CORS와 관련된 HTTP 헤더를 추가해 전송하는 방법을 사용한다.
Cross Origin Resource Sharing(CORS); 교차 출처 리소스 공유
HTTP 헤더에 기반, 서로 다른 오리진 간에 리소스를 공유하는 방법
CORS 헤더를 설정해 요청시, 수신측에서 헤더를 구분해 정해진 규칙에 맞게 데이터를 가져갈 수 있도록 설정
Header
- Access-Control-Allow-Origin : 헤더 값에 해당하는 Origin에서 들어오는 요청만 처리
- Access-Control-Allow-Method : 헤더 값에 해당하는 메소드의 요청만 처리
- Access-Control-Allow-Credentials : 쿠키 사용 여부를 판단
- Access-Control-Allow-Headers : 헤더 값에 해당하는 헤더의 사용 가능 여부를 나타낸다
JSON with Padding(JSONP)
< script > 태그로 Cross Origin의 데이터를 불러오게 되며, < script > 태그 내에서는 데이터를 js코드로 인식해 callback함수를 활용해야한다.
Cross Origin에 요청할때 callback파라미터에 어떤 함수로 받아오는 데이터를 핸들링할지 넘겨주면 대상 서버는 전달된 callback으로 데이터를 감싸 응답한다.
CORS가 생기기 전에 사용하던 방법, 현재는 거의 사용하지 않는 추세라 한다.
