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. 防止跨域请求滥用,阻止非法站点恶意调用

参考资料

大家好,我是小磊哥er!

阅读 989

推荐阅读

小磊哥er的技术写作专栏,主要分享前端JavaScript,后端Python相关的技术知识。不忘初心,砥砺前行。

12 人关注
43 篇文章
专栏主页