SOP(Same Origin Policy)

▶ Background

• Cookie에는 인증상태를 나타내는 민감한 정보가 보관되며, 브라우저 내부에 저장됨
  • 브라우저가 웹 서비스에 접속할 때 브라우저는 자동으로 쿠키를 헤더에 포함시켜 요청
  • 포털 사이트, SNS와 같은 웹 서비스에 한 번 로그인한 후 일정 기간 로그인 하지 않고 바로 서비스 사용 가능
  • 이용자가 악의적인 페이지에 접속했을 때, 페이지가 자바스크립트를 사용해 이용자의 SNS 웹서비스로 요청을 보내늘 경우! 해커가 마음대로 이용자의 sns에 글을 올리거나, 메신저를 읽는 등 행위 가능

 

▶ SOP(Same Origin Policy)

• Background 문제를 방지하기 위해 SOP 보안 메커니즘이 탄생

SOP 구조

• SOP는 Same Origin이라고 판정(scheme, host, port가 같을 경우) 정보를 읽을 수 있도록 설정
• 클라이언트 사이드 웹 보안에서 중요한 요소

※ 이미지, 자바스크립트, css등의 리소스를 불러오는 img,style,script등의 태그는 SOP영향X

※ 위 경우들 외에도 웹서비스에서 SOP를 완화하여 다른 출처의 데이터를 처리하는 CASE 有

    ex)특정 포털 사이트(메인), 메일 서비스를 아래의 주소로 운영중이라고 가정.

         메일: https://mail.dreamhack.io 메인: https://dreamhack.io

         각 서비스의 Host가 다르기 때문에 브라우저는 각 사이트의 오리진이 다르다고 인식

   이러한 환경에서, 이용자가 수신한 메일의 개수를 메인 페이지에 출력해야하는 상황

   개발자는 메인 페이지에서 메일 서비스에 관련된 리소스를 요청하도록 해야함

   이 때, 두 사이트는 오리진이 다르므로 SOP를 적용받지 않고 리소스를 공유할 방법이 필요

 

▶ CORS(Cross Origin Resource Sharing)

• 위와 같은 상황에서 자원을 공유하기 위해 사용할 수 있는 공유 방법
• HTTP 헤더에 기반하여 Cross Origin간에 리소스를 공유하는 방식
• 발신측에서 CORS 헤더 설정 -> 수신측에서 헤더를 구분하여 정해진 규칙에 맞게 데이터 획득

 

▶ JSONP(JSON with Padding)_과거에 사용하던 방식

• <script>태그를 이용하여 Cross Origin의 데이터를 획득
• <script>태그 내에서는 데이터를 자바스크립트의 코드로 인식하기 때문에 Callback함수를 활용해야함

<script>
//myCallback 이라는 콜백함수 지정
function myCallback(data){
	console.log(data.val)
    //전달받은 인자에서 data를 콘솔에 출력
    }
</script>


<!--test.com의 스크립트를 로드하는 html 코드
callback이라는 이름의 파라미터를 myCallback으로 지정함으로써 수신측에게 myCallback 함수를 사용해 수신받겠다는 의미 -->
<script src='http://test.com?callback=myCallback'></script>

// 수신측은 myCallback이라는 함수를 통해 요청측에 데이터 전달
myCallback({'val':'value!'});

• Cross Origin에 데이터 요청 시, callback 파라미터에 함수로 받아오는 데이터를 핸들링할지 넘겨주면 대상 서버는 전달된 Callback으로 데이터를 감싸 응답함