跨越访问之JSONP实践

一起学习

预备知识：

1.什么是JSONP：JSONP（JSON with Padding）是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
2.为什么使用JSONP：由于 JSON 只是一种含有简单括号结构的纯文本，因此许多通道都可以交换 JSON 消息。因为同源策略的限制，我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法，即通过使用 JSON 与

()正在说:\"\"

年龄：
话语：

JavaScript代码片段：

/**
* 刷新信息
*/
function refreshPeopleInfo(people){
           $('name').innerHTML=people.name;
           $('age').innerHTML=people.age;
           $('talking').innerHTML=people.talking;
}
/**
* 设置信息（年龄、话语）
*/
function setPeopleInfo(){
        var newPeople=new Object();
        newPeople.age=$F('newAge');
        newPeople.talking=$F('newTalking');
        var xmlHttp = new Ajax.Request(
                "/json/people/cleverpig",
                {
                        method: 'post',
                    parameters: 'json=' encodeURIComponent(Object.toJSON(newPeople)),
                    onComplete: function(transport){
                            var retObj=transport.responseText.evalJSON();
                            $('name').innerHTML=retObj.name;
                            $('age').innerHTML=retObj.age;
                            $('talking').innerHTML=retObj.talking;
                    }
                }
        );
}
Event.observe(
        'setButton',
        'click',
        setPeopleInfo,
        false
);

这里简单的功能非常明确：在页面装载时调用服务端URL（/json/people/cleverpig/jsonp/refreshPeopleInfo）生成的脚本来刷新people这个Div里面的数据项，而点击“修改”按钮便会将我们输入的新属性post到服务端，并接收服务端返回的JSON字符串更新页面显示。

运行截屏：



JSONP的安全问题：

我们可以使用若干种方法在 JavaScript 程序中动态地生成代码。最著名的函数之一就是 eval() 函数，该函数允许您将任意字符串做为 JavaScript 代码执行。然而，肆无忌惮地使用该函数是非常危险的。遗憾的是，一些使用广泛的 JavaScript 库在内部直接使用 eval() 函数。
由于 JSON 是以 JavaScript 的一个子集为基础的，所以脚本内容会潜在地包含恶意代码。然而，JSON 是JavaScript 的一个安全的子集，不含有赋值和调用。因此，许多 JavaScript 库使用 eval() 函数将 JSON 转换成 JavaScript 对象。要利用这点，攻击者可以向这些库发送畸形的 JSON 对象，这样 eval() 函数就会执行这些恶意代码。可以采取一些方法来保护 JSON 的使用。这里提供一种方法：使用 RFC 4627 中所定义的正则表达式确保 JSON 数据中不包含活动的部分。
下面 演示了如何使用正则表达式检查 JSON 字符串：

var my_JSON_object = !(/[^,:{}\[\]0-9.\- Eaeflnr-u \n\r\t]/.test(
            text.replace(/"(\\.|[^"\\])*"/g, '' ''))) &&
            eval(''(''   text   '')'');

源代码下载：

jsonp_source.rar

参考资源：

Restlet指南

Restlet讨论组


Implement JSONP in your Asp.net Application

Allen Wang对JSONP的介绍

GWT Tutorial: How to Read Web Services Client-Side with JSONP

JSON for jQuery

征服 Ajax 应用程序的安全威胁 下载本文示例代码


跨越访问之JSONP实践跨越访问之JSONP实践跨越访问之JSONP实践跨越访问之JSONP实践跨越访问之JSONP实践跨越访问之JSONP实践跨越访问之JSONP实践跨越访问之JSONP实践跨越访问之JSONP实践跨越访问之JSONP实践跨越访问之JSONP实践跨越访问之JSONP实践