Same Origin Policy (SOP)

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

그리고 브라우저가 웹 서비스에 접속할 때 브라우저는 자동으로 쿠키를 헤더에 포함시켜 요청을 보낸다.

이 덕분에 우리는 사이트, SNS 와 같은 웹 서비스에 한 번 로그인 한 후 일정 기간은 로그인하지 않고도 바로 서비스를 

사용할 수 있다.

 

하지만 악의적인 페이지를 접속했을 때, 페이지가 javascript를 이용해 이용자의 SNS 웹 서비스로 요청을 보내거나 악의적인 행동을 할 수 있다.

해당 악의적인 자바스크립트는 사용자의 계정으로 로그인하지 않고도 쿠키를 통해 사용자 권한으로 악의적인 행동을 하게끔 로직을 보내게 되고 해당 사이트에선 응답을 받게 되며 수락하게 되는 것이다.

 

이와 같은 문제를 방지하기 위해 동일 출처 정책 , Same Origin Policy (SOP) 보안 매커니즘이 탄생했다.

 

SOP 는 웹 페이지 간의 상호작용을 제한하여 보안을 강화한다.

구체적으로 SOP는 하나의 출처에서 로드된 웹 페이지가 다른 출처의 자원에 접근하는 것을 제한한다.

여기서 출처는 세 가지 요소로 정의된다.

1. 프로토콜 

2. 호스트

3. 포트

 

 

URL결과이유

https://same-origin.com/frame.html	Same Origin	Path만 다름
http://same-origin.com/frame.html	Cross Origin	Scheme이 다름 (프로토콜)
https://cross.same-origin.com/frame.html	Cross Origin	Host가 다름
https://same-origin.com:1234/	Cross Origin	Port가 다름

 

이해하기 쉽게 좀더 간단하게 설명하자면

same-origin.com 사이트에서 페이지 간의 상호작용이 되는 경우는 

https://same-origin.com/frame.html 이런식으로 출처가 같아야 한단것이다.

출처가 세가지중 한가지만 달라도 아예다른 사이트로 인식하기 때문에 상호작용이 불가능하다.

 

 

실습을 해보며 알아보자.

구글 메인창을 띄워준다.

그후 F12를 눌러 콘솔창에서 변수를 하나 만들어 같은 출처의 사이트를 하나 넣어주고 해당 변수를 실행해본다.

test1 = window.open('https://www.google.com/imghp?hl=en&ogbl');
console.log(test1.location.href);

 

 

출처 3개모두 맞아 안정적으로 결과물이  뜬다.

 

 

이번엔 두번째 변수를 만들어 네이버로 바꾸어 넣고 똑같이 실행했더니 오류가 뜬다.

왜냐하면 구글 페이지 내에서 출처가 다른 네이버창을 띄우게 하려니 SOP 에 의하여 안되는 것.

 

 

이렇게 SOP는 출처가 다른 페이지의 상호작용을 막고 보안을 강화해주는 정책이다.