如何使用 JSONP 克服 XSS 问题？

Question

我在码头服务器上执行了一段 javascript，该服务器正在向另一台服务器（wamp 服务器）上的 scoket 发送 XMLHTTPRequest。请求被发送到套接字，但是 XHR 响应似乎被阻塞了。

我听说我可以使用 JSONP 来解决这个问题。 但是，由于我对 javascript 都很陌生，而且我从未使用过 JSONP 技术，在此之前我会非常感谢有关如何使用这种技术的任何帮助？

function sendPost(url, postdata, callback) {

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null) {
    alert ("Browser does not support HTTP Request")
    return
} 

xmlHttp.onreadystatechange=callback
xmlHttp.open("POST",url,true)
xmlHttp.send(postdata);

}

function sendInitRQ(width, height) {

var post = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><command     type=\"init\"><width>" + width + "</width><height>" + height + "</height></command>";

sendPost("http://localhost:80/socket.php", post, initReturned);

}

我知道 php 套接字正在接收帖子，因为当我检查服务器日志时，我在 get 请求中得到 200。

我只想知道如何使用 JSONP 方法？ 我已经看到了这种方法的例子，但我仍然不确定如何去做。

Answer 1

JSONP 技术使用完全不同的机制向服务器发出 HTTP 请求并根据响应进行操作。它需要客户端页面和服务器上的协作代码。服务器必须有一个 URL 来响应 HTTP“GET”请求，其中包含一个包裹在函数调用中的 JSON 块。因此，您不能只对任何旧服务器进行 JSONP 事务；它必须是明确提供该功能的服务器。

这个想法是您的客户端代码动态创建一个<script> 块，并将“src”属性设置为 JSONP 服务器的 URL。 URL 应该包含一个参数，告诉服务器您希望它使用 JSON 数据调用的 Javascript 函数的名称。 （具体使用什么参数名称取决于服务器；通常是“回调”，但我见过一些使用“jsonp”。）客户端当然必须在全局范围内具有该功能。换句话说，如果你有这样的功能

function handleJSON(json) {
  var something = json.something;
  // ... whatever ...
}

然后你的 URL 告诉服务器调用“handleJSON”，服务器响应应该是这样的：

handleJSON({"id": 102, "something": { "more": "data", "random": true }});

因此，当<script> 块从您提供的“src” URL 加载时，浏览器将解释内容（来自服务器的响应）并调用您的函数。

应该清楚的是，您应该只向您信任的服务器发出 JSONP 请求，因为它们会发回代码以在您的客户端中执行，并且可以访问您的客户端与其他安全站点之间的任何活动会话。

编辑 — 这是一篇不错的文章：http://www.ibm.com/developerworks/library/wa-aj-jsonp1/