同源策略、跨域、jsonp

1.同源策略

是指浏览器普遍默认的一种安全策略；

例如：
一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

• 同源：
  即是指URL具有相同的协议、域名、端口；可以理解为当前域名下的脚本，只能读写当前域名下的数据资源，而无法获取其他资源；

2.跨域以及跨域有几种实现形式

通过一些方法，突破同源策略的限制
实现方式包括

• 降域
  (当域名有相同后缀时可使用，使用不多，容易产生安全问题，一个子页面收到攻击，所有数据都存在泄漏的风险）
  在当前域名及调用数据内部都添加

document.domain=XXXX...
XXX只能设置为当前域名的上一级~上N级域名、
可以继续向下修改，不能向上进行修改

• JSONP
• CORS

3.JSONP的原理

在当前域创建一个函数XXX，创建一个动态script标签，并将想要调用数据的域名设置为script的src值，且需要添加一个参数值callback=xxx，与之前创建的函数，声明一致。这样获取到了需要的数据，并且在当前域执行xxx（data）；

<script>
window.newfun=function(data ){   //当前域声明一个函数
 alert（）
}
<script>
 var script=document.createElement('script');  //创建一个动态script标签
 script.src='//abc.com/ac.js?callback=newfun' //向服务器请求callback数据
document.body.appendChild('script'); //添加到页面
<script>
</script>
//后台服务器写法
var callback=this.query.newfun;
this.body=callback+'(data)';

• 缺点：
  如果a.com可以访问b.com，那么完全可以让c.com也访问b.com，解决方法有要么用正则过滤掉不应该出现的字符串，要么约定好一套数据，比如cookies来互相匹配
  不能用post只能get

参考资料

4.CORS

Cross Origin Rescource Sharing 跨域资源共享
在调用数据文档内加入响应头，在当前域名直接用ajax调用即可

this.set('Access-Control-Allow-Origin','当前域名')

缺点是IE8,9兼容存在问题

更多其他跨域解决方法

本地模拟同源策略

首先找到系统的hosts文件（windows系统的路径 C:\Windows\System32\drivers\etc）默认情况下，只有localhost指向本地IP 127.0.0.1，在hosts文件中我们可以为其添加多个域名

模拟同源策略

• JSONP

   window.newfun=function(data){
      alert(data);}
    var script=document.createElement('script');
    script.type='text/javascript';
    script.src='//b.com/task31/data.php?callback=newfun';
    document.body.appendChild(script);
    </script>
//后台
newfun('我是数据');

JSONP

• CORS

    $.ajax({
      url:'//b.com/task31/data.php',
      type:'get',
      datatype:'json',
      // jsonp:'callback',
      success:function(data){
        console.log(data);
      },
      error:function(){
        console.log('there is problem');
      }
    })
//后台
<?php
    header('Access-Control-Allow-Origin:http://a.com');
    $data='i am data';
    echo json_encode($data);
?>

CORS