자바스크립트 보안 정책 바로알기

자바스크립트 보안 정책 바로알기!

Same Origin Policy

웹 리퀘스트 자신이 포함된 문서와 출처가 동일한 문서나 창의 프로퍼티만 읽을 수 있다.

출처 = 프로토콜 + 호스트 + 포트

Cross Domain

전제조건

• 현재 웹페이지의 주소는 http://www.ryanjin.net 이다.
• http://www.ryanjin.com의 페이지에서 http://www.google.com의 Rest API 를 호출하여 데이터를 가져오려고 한다.

결     론

서버의 도메인, 정확히 말하면 위에서 언급한 출처가 다를 경우 cross-domain 문제가 발생한다. 이러한 cross-domain은 서버 공격 및 보안 취약성을 갖게 되므로 서로 신뢰할 수 있는 경우에만 이를 허용하는 서비스를 구축하는 것이 일반적이다.

Cross Domain 제약 극복 방법

Cross domain proxy

클라이언트는 서버의 API를 호출하고 웹 서버가 실제 호출하려는 원격 서버의 API를 호출하는 방법입니다. 그리고 그 결과를 클라이언트에 돌려줍니다. Proxy 방법은 호출하는 전체 생명주기를 제어할 수 있습니다.

클라이언트에게 반환하기 전 뭔가 처리할 게 있으면 원격 서버에서 받은 데이터를 변환, 가공할 수도 있습니다.

Cross domain JSON

원격서버가 지원해야지만 사용할 수 있는 방법입니다. 원격서버는 Callback 함수 성격의 추가 파라미터를 받습니다. 원격 URL을 지정할 수 있게 클라이언트에 스크립트 태그를 넣어야 합니다. 요청에 지정한 callback 함수와 그 파라미터로 JSON 객체가 응답으로 옵니다. 서버에 어떤 작업을 하지 않아도 웹서비스 호출을 구현할 수 있다는 점입니다.

(참고) Jason Levitt가 XML.com에 쓴 “JSON and the Dynamic Script Tag”

(참고) 원리를 알고 싶으면 “Cross domain JSON 원리”를 참조하세요.

Sub-domain

다양한 서버를 운영하면서 www.ryanjin.net과 blog.ryanjin.net과 같이 서버의 도메인을 운영하게 됩니다. 내부적으로 보면 같은 회사, 같은 서버룸, 같은 아파치 웹서버를 쓰고 있습니다. 그래서 개발자에게는 동일한 것으로 보입니다. 그러나 호스트명이 다르기 때문에 JavaScript(Ajax)는 이것을 다른 도메인(출처)으로 봅니다. 따라서 이런 동일 서버에게 ajax 호출을 하려면 요청에 도메인을 넣지 말고 URL 경로만 사용해야 합니다.