SOP 개념 & 실습

 웹 서비스에 접속 할 때, 브라우저는 해당 웹 서비스에서 사용하는 쿠키를 HTTP 요청에 포함시켜서 전달

쿠키에는 인증상태를 나타내는 정보가 보관되며, 브라우저 내부에 저장됨.

> 브라우저가 웹 서비스에 접속할 때 브라우저는 자동으로 쿠키를 헤더에 포함시켜 요청을 보냄
> so 한번 로그인한 후 일정 기간 동안 로그인 없이 바로 서비스 사용이 가능
> 이것을 악의적으로 이용할 수 있음
> 동일 출처 정책 보안 메커니즘 탄생
SOP(Same Origin Policy)

 

SOP의 Origin 구분 방법
오리진: 프로토콜(protocol,scheme), 포트(port), 호스트(host)로 구성.
모두 일치해야 동일한 오리진

ex) https://s-o.com/ 

scheme: "https:" == "https:"

host: "s-o.com" == "s-o.com"

port: "443" == "433"

이렇게 다 같아야 same origin

 

SOP 실습

 

window.open : 새로운 창을 띄우는 함수

object.location.href : 객체가 가리키고 있는 url 주소를 읽어오는 코드

https://dreamhack.io

해커들의 놀이터, Dreamhack

 

이 창에서 개발자 도구를 열고 (f12) 콘솔창에 코드를 입력해 보면서 실습/ 한줄씩 입력

Same Origin

 

1. sameNewWindow =

window.open('https://dreamhack.io/lecture');

2. console.log(sameNewWindow.location.href);

3.결과: https://dreamhack.io/lecture

 

Cross Origin

crossNewWindow =

window.open('https://theori.io');

console.log(crossNewWindow.location.href);

결과: Origin 오류 발생

 

> 외부 출처에서 불러온 데이터 읽으려고 할 때는 오류 발생!

> 읽는 것 외에 쓰는 것은 동작함. 아래 코드는 동작

1. crossNewWindow = window.open('https://theori.io');

2. crossNewWindow.location.href = "https://dreamhack.io";