ajax통신간 jsonp를 이용한 크로스도메인 이슈 해결

ajax통신간 jsonp를 이용한 크로스도메인 이슈 해결

웹 사이트 개발 시, 주요한 이슈중의 하나를 꼽자면 크로스 도메인(Cross Domain)이 있습니다.

최근 대부분의 웹 브라우저는 Javascript(JQuery)를 이용하여 AJAX 등을 통해서 다른 도메인의 서버의 URL 을 호출하여 데이터를 가져오는 경우, 보안 문제를 발생시킵니다.

만약 우리 웹 서비스에서만 사용하기 위해 다른 서브 도메인을 가진 API 함수를 제공하는 API 서버를 구축하였는데, 다른 웹 서비스에서 이 API 서버에 접근하여 마음대로 API를 호출하여 사용한다면 분명 문제가 됩니다.

그래서 Javascript 는 동일 출처 정책(Same Origin Policy) 라는 정책을 두어 다른 도메인의 서버에 요청하는 것을 보안 문제로 간주하고 이를 차단합니다. 즉, Javascript는 자신이 속한 동일한 도메인 내에서만 서버 요청을 허용하고, 처리해주겠다는 것인데요. 이것은 itfresh.tistory.com 도메인에서 호출된 AJAX는 itfresh.tistory.com 도메인 내에 있는 URL만을 호출할 수 있다는 의미입니다. 다시말하면 itfresh.tistory.com 도메인에서 www.tistory.com 의 URL을 AJAX로 호출할 수 없다는 의미이죠.

정확히 짚자면, www.tistory.com에서 tistory.com 도 다른 도메인으로 간주하기 때문에 AJAX를 호출할 수 없습니다.

AJAX통신간 이러한 크로스 도메인 이슈를 다음과 같이 해결 할 수 있습니다. 바로 jsonp라는 녀석을 이용해서 콜백함수를 이용해서 데이터를 받는 방법 입니다.

$.ajax({
    url: 'http://itfresh.tistory.com',
    type: 'GET',
    dataType: 'jsonp',
    jsonp:'jsonp',
    jsonpCallback : "returnData",
    timeout:5000,
    success:function(e)
    {
        
    },
    error:function(e)
    {
        
    },
    beforeSend:function()
    {
        
    }
})

먼저 클라이언트쪽 ajax 문법이이고, get형식의 데이터를 itfresh.tistory.com 으로 보내고, 응답대기시간은 최대 5초간 기다리고

jsonp를 사용하며, 콜백을 받을 변수는 returnData 라고 선언한 상태 입니다.

<?
echo "returnData({'result':'Y', 'message':'test'})";
?>

서버쪽의 코드이고 언어는 PHP입니다. 

returnData({'result':'Y', 'message':'test'}) 라고 출력을 하는 문법이며, returnData라는 변수안에 json형식의 데이터를 넣은 상태 입니다.

바로 AJAX를 호출하는 클라이언트(Client)단과, 서버(Server)단에서 동시에 작업을 해야합니다.

클라이언트 단에서 jsonp라는걸 선언해주고, 콜백받을 변수명을 returnData로 정의하고 마찬가지로 서버에서도 returnData안에 원하는 형태의 데이터를 넣어서 반환하면 됩니다. 이는 클라이언트와 서버단에 사전에 약속한 변수로 들어가기 때문에 보안성이 어느정도 있습니다.

이렇게 하여 클라이언트쪽 success쪽에 console.log로 내용을 찍어보시면 리턴받은 값이 그대로 들어옵니다.

크로스 도메인 해결방법은 지금처럼 jsonp를 이용하는 방법외에 iframe을 이용해서 해결하거나 기타 방법은 많지만 여기서는 ajax를 이용한 jsonp만 다루도록 하겠습니다. 

기타 궁금하신 내용은 댓글 남겨주세요