불친절한자수씨

출처: http://www.west-wind.com/WebLog/posts/107136.aspx

막되먹은 번역 시작됩니다.

JSONP is an unofficial protocol that allows making cross domain calls by generating script tags in the current document and expecting a result back to calls a specified callback handler.

JSONP는 비공식적인 프로토콜로 크로스 도메인 호출을 허용합니다. 다른 도큐먼트에서 생성된 스크립트 태그와 콜백 핸들러를 호출하여 결과를 받을 수 있는 것을 포함한 것들을 통해서...
(첫 문장 부터 저질....)


The client JavaScript code to make a JSONP call looks like this:

JSONP 클라이언트 코드는 다음과 같습니다.


Listing 1. JSONP client JavaScript code
function jsonp(url,callback,name,query) { if (url.indexOf("?") > -1) url += "&jsonp=" else url += "?jsonp=" url += name + "&"; if (query) url += encodeURIComponent(query) + "&"; url += new Date().getTime().toString(); // prevent caching var script = document.createElement("script"); script.setAttribute("src",url); script.setAttribute("type","text/javascript"); document.body.appendChild(script); }
#1: jsonp 호출을 하는 함수의 시그니쳐를 정의합니다. 호출할 url과 callback 함수 이름
   질의값과 같은 파라미터들... 근데 왜 callback은 사용하지도 않으면서 정의했을까요;;;;

#3~7: url에 '?' 가 있으면, 즉, 파라미터가 포함된 url의 경우에는 '&'를 붙여서 파라미터를 처리하고,
   없을 경우 '?'로 파라미터의 시작을 표시합니다. url에 jsonp 파라미터로 보낼 name 값을 append...

#8~9: query 파라미터가 존재할 경우 인코딩 encodeURIComponent 메소드를 이용하여 인코딩
   처리를 한 후에 url에 append...

#10: 브라우저 캐싱을 막기위해 현재 시간을 뒤에 붙여줍니다.

#12~15: script 객체를 생성하고 url을 설정한 후 document에 append 시켜주면 해당 url의 스크립트가
   실행됩니다.


The idea is that this code adds a <script> tag dynamically to the page and when this code loads it causes the JavaScript that the server loads to be executed. Because it uses the DOM and a <script> tag this gets around the cross site scripting limitations of the XHR object.

자바스크립트가 실행 된 후에 동적으로 추가된 <script> 태그는 추가된 후에 로드가 되는 것을 이용한 것이다.
DOM과 XHR 객체의 크로스 사이트 스크립팅 제한으로 <script> 태그를 사용한다.
(-_-0;;;;)


The server is expected to return JSON data, but with a slight twist: It has to prepend the callback function name, which is passed as part of the url. The syntax for a JSONP Url is simply the URL with a jsonp= query string parameter that defines the the callback function:

http://someserver.com/mypage.aspx?jsonp=callbackFunction

If the server wants to return a result like:

{ "x": 10, "y": 15}

the result will be turned into (assuming the callback specified is callbackFunction):

callbackFunction( { "x": 10, "y": 15} )

서버는 예상된 JSON 데이터를 리턴합니다. 그러나 콜백함수 명이 url의 일부일 경우에는 약간 꼬일 수 있습니다. JSONP Url의 문법은 간단한 콜백 함수로 정의된 'jsonp=' 문자열 쿼리 파라미터의 URL사용합니다. 위의 사이트로 호출을 할 경우 결과는 다음과 같습니다.

{ "x": 10, "y": 15 }

결과는 callbackFunction으로 정의된 콜백을 통해서 반환될 것입니다.

callbackFunction( { "x": 10, "y": 15 } }


If you're implementing this in an ASPX.NET page it might look like this:

ASPX.NET 페이지는 다음과 같이 구현될 것입니다만....
저는 Java를 하기 때문에 서블릿으로 구현하겠습니다.

Listing 2. Server source
public class JSONPServlet extends HttpServlet { protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { if (req.getParameter("jsonp") != null) { jsonPCallback(req, res); } } private void jsonPCallback(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String callback = req.getParameter("jsonp"); if (callback != null && callback.length() > 0) { res.getWriter().write(callback + "( {\"x\":10, \"y\": 100} );"); } } }

The client will now have script tag that gets added to the document and the script executes on load and in effect calls the callbackFunction with the parameter:

클라이언트에 스크립트 태그가 도큐먼트에 추가되어지고 로드가 되어 실행이 되고
callbackFunction에 파라미터를 포함하여 호출되어집니다.

Listing 3. client callback function
function callbackFunction(Result) { alert(Result.x + " " + Result.y) ; }

And there's a cross domain callback.

크로스 도메인 콜백입니다.

Note that this callback requires that the server KNOWS it's receiving a JSONP request because the server has to prepend the callback handler name supplied so the code can fire in the client.

서버는 클라이언트 핸들러 이름이 클라이언트 코드에서 실행할 수 있어야 하기 때문에
서버가 JSONP 요청을 받는 것을 알고 있어야 합니다.


Yeah it seems like an Exploit
...

I'm not sold on the idea, because it is basically exploiting what seems to be a security hole in the browser and one that apparently won't be plugged as many services like Adsense rely on it. But all this talk about preventing cross site scripting are pretty much moot by allowing this sort of hack to work. But then again this implementation doesn't do anything that couldn't be done before or changes any of the security issues - it just takes advantage of this functionality.

Still - it feel... wrong <g>...

It is what it is and it seems this approach is getting more popular in being able to retrieve JSON content from various public sites. It certainly is something that should be useful for ASP.NET developers who internally need to make client callbacks to their own internal sites which seems a frequent request.
 

저질 해석에 힘들었습니다... 마지막들은 영어 실력 좀 쌓고~ ㅋㅋㅋ