同源策略、跨域、jsonp

1.什么是同源策略

所谓"同源"指的是"三个相同":(1)协议相同,(2)域名相同,(3)端口相同
同源策略是浏览器的一个功能,也是浏览器安全的基石,最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,从而保证用户信息的安全性。随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制:
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。
换句话说:不同源的客户端脚本在没明确授权的情况下,不能读写对方的资源

2.什么是跨域?跨域有几种实现形式

什么是跨域:跨域即突破同源策略的限制
跨域有六种实现方式:

  • 1.document.domain+iframe
    应用范围:这种办法只能解决主域相同而子域不同,且是iframe形式的跨域;
    存在问题:安全性,当一个站点(b.a.com)被攻击后,另一个站点(c.a.com)会引起安全漏洞。
  • 2.JSONP
    应用范围:因为是基于script标签,所有只能进行GET请求
    存在问题:存在安全性问题,可被注入可执行的js代码(callback=alert(1)), 对于这个问题,只能通过外界的字符串过滤来解决,如禁止callback中传入括号,使用正则去除左右括号,callback=callback.replace(/\(/g,"")callback=callback.replace(/\)/g,"")
  • 3.CORS
    给被访问方设置Access-Control-Allow-Origin,如在php文件头部写入header('Access-Control-Allow-Origin:http://a.com:8080'),表示允许来自源http://a.com:8080的请求。这是跨域AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。但是IE10及以下IE版本不支持。
  • 4.HTML5 postMessage
    这是HTML5的新功能,用postMessage支持基于web的实时消息传递。
  • 5.利用iframe和location.hash
    这个方法比较绕,原理是利用location.hash来传值。url中#号及其后面的内容就是location.hash,改变hash的值页面并不会刷新,所以可以利用hash值来进行数据传递。
    这种方法缺点也很多,诸如数据直接暴露在了url中,数据容量和类型都有限等。
  • 6.利用window.name
    主要利用window.name值不随url改变而改变,只要当前页面没被关闭,window.name的值就不会改变。

3.jsonp 的原理是什么

JSONP是服务器与客户端l跨域通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。
原理:网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

4.CORS是什么?

CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。
支持情况:CORS需要浏览器和服务器同时支持,只要服务器实现了CORS接口,且浏览器支持该功能(目前所有浏览器都支持该功能,IE浏览器不能低于IE10),就可以跨域通信。
对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

实际操作

1.本地搭建服务器,演示同源策略

这里以Wampserver为例演示,具体步骤:
1.在Wampserver软件的www目录下新建两个文件,index.html和main.js。其中,index.html的主要内容如下:

<body>
    <h1>hello world!</h1>    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   
   // 分别做如下3个测试
   //测试一:a.com/index引用b.com域名下的main.js文件
     <script src="//b.com:8080/main.js"></script>

   //测试二:a.com/index通过ajax请求b.com域名下的main.js文件
     <script type="text/javascript">
        $.get("//b.com:8080/main.js",function(response){     
            console.log(response);
        }) 
    </script>

   //测试三:a.com/index 通过ajax请求a.com域名下的main.js文件
    <script type="text/javascript">
        $.get("//a.com:8080/main.js",function(response){     
            console.log(response);
        })
     </script>

</body>

main.js的内容如下:

alert (1);

2.以管理员权限运行记事本,用记事本打开路径Windows/System32/drivers/etc下的hosts文件,添加如下两条IP和域名的对应信息。目的是让a.com和b.com两个域名都指向本地机。

127.0.0.1  a.com
127.0.0.1  b.com

3.启动Wampserver,浏览器地址栏输入a.com:8080
4.测试结果:

  • 测试一结果:页面 alert(1),无报错。
    说明a.com可以引用b.com里的main.js文件(只是引用,并未读写)。
  • 测试二结果:页面无弹框,控制台报错。
    受同源策略的限制,a.com不能读写b.com域名下文件,因而控制台会报错,同时main.js里的脚本也不会执行
  • 测试三结果:页面alert(1),控制台打印“alert(1)”
  • a.com/index通过ajax请求了a.com域名下的main.js文件,说明相同域名之下,文件是可以互相读写的。

2.至少使用一种方式解决跨域问题

方法一:document.domain+iframe

对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。如a.com和child1.a.com,可以在这两个文件中分别加上document.domain = ‘a.com’,然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument。
示例:
host文件添加127.0.0.1 child1.a.com ,index文件内容如下:

<iframe src="//child1.a.com:8080/index2.html" frameborder="0"></iframe>
<script type="text/javascript">
        window.onload=function(){
            document.domain = "a.com";   //降域
            var iframe=window.frames[0];
            console.log(iframe.window.name);
        }
</script>

index2文件内容如下:

<p>index2</p>
<script type="text/javascript">
        document.domain = "a.com";   //降域
        window.name="index2";
</script>

浏览器地址栏输入a.com:8080,可以看到,控制台打印出了“index2”, 即,通过document.domain方法,a.com读取到了iframe窗口的window.name属性的值。

方法二:JSONP

虽然浏览器默认禁止了跨域访问,但并不禁止在页面中引用其他域的JS文件,并可以自由执行引入的JS文件中的function(包括操作cookie、Dom等等)。根据这一点,可以方便地通过创建script节点的方法来实现完全跨域的通信。
以下演示a.com/index引用b.com域名下的server.php文件
index文件内容如下:

<script>
    window.foo=function(data){
        alert(data);
    }
</script>

//动态引用
<script>
    var script=document.createElement("script");
    script.src="//b.com:8080/server.php?callback=foo";
    document.body.appendChild(script);
</script>

// 或者静态引用,和动态引用没有本质差别
// <script src="//b.com:8080/server.php?callback=foo"></script>

server.php文件内容如下:

<?php
    $callback=$_GET["callback"];
    echo $callback . "('来自b.com的数据')";      //foo('来自b.com的数据')
?>

浏览器地址栏输入a.com:8080,可以看到如下图弹框,说明通过jsonp已经成功得到了b.com下的数据。

方法三:CORS

以下演示a.com/index通过ajax请求b.com域名下的server.php文件
index文件内容如下:

<script>
      $.get("//b.com:8080/server.php?callback=小明",function(response){     
           console.log(response);    //小明:18
       })
    </script>

server.php文件内容如下:

<?php
    header('Access-Control-Allow-Origin:http://a.com:8080');  //设置php头部信息,表示允许a.com访问
    $arr = array('小明' => "18", "花花"=>"16","天天"=>"15");
    $callback=$_GET["callback"];
    echo $callback .":".$arr[$callback];
?>

浏览器地址栏输入a.com:8080,可以看到控制台打印出“小明:18”,说明通过给php设置Access-Control-Allow-Origin头部信息可以实现跨域。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容