jsonp全方位解析

同源策略

• 浏览器的一种安全策略，所谓同源，指的是域名、协议、端口号完全相同
• 限制：cookie、localStorage 和 IndexDB 无法读取；无法操作跨域的 iframe 里的 dom 元素；Ajax 请求不能发送

jsonp 原理

• 本质是利用了标签 (link,img,script, 这里使用 script) 具有可跨域的特性，由服务端返回预先定义好的 javascript 函数的调用，并且将服务端数据以该函数参数的形式传递过来
• 前端 javascript 代码

<script>
    function fuc(data){console.log(data.name);
    }
</script>
<script src="http://www.baidu.com/api.php?callback=fuc"></script>

• 后端 php 代码

<?php
    $cb = $_GET['callback'];
    $data = array(
                'name'=> 'zs',
                'age'=>18,
                'gender'=>true
            );
    echo $cb.'('.json_encode($data).')';
?>

jsonp 优点

• 完美解决在测试或者开发中获取不同域下的数据, 用户传递一个 callback 参数给服务端，然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了

jsonp 缺点

• jsonp 只支持 get 请求而不支持 post 请求
• 用 session 来判断当前用户的登录状态，跨域时会出现问题
• jsonp 存在安全性问题

特别注意

1. 防止 callback 参数意外截断 js 代码, 特殊字符单引号双引号, 换行符存在风险
2. 防止 callback 参数恶意添加 script 标签, 造成 xss 漏洞
3. 防止跨域请求滥用, 阻止非法站点恶意调用

参考资料

• jsonp 的原理, 应用场景, 优缺点
• 深入理解 jsonp 跨域请求原理
• jsonp 实现原理及代码解析

大家好，我是小磊哥 er！