同源策略和跨域方法

什么是同源策略？

概念：

同源策略，它是由[Netscape]提出的一个著名的[安全策略]现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指，域名，协议，端口相同。
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，
即检查是否同源，只有和百度同源的脚本才会被执行。
如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

本域所指：

同协议：如都是http或者https,ssh,file.
同域名：如都是http://zyn.com/a和http://zyn.com/b
同端口：如都是端口号为80
http://zyn.com/a/b.jshttp://zyn.com/index.php(默认端口80)同源

不同源例子：

http://zyn.com 和 https://zyn.com (协议不同)
http://zyn.com 和 http://abb.zyn.com (域名不同)
http://zyn.com/a.js 和 http://zyn.com:8080/a.js (端口号不同第一个为80)

需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域

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

跨域顾名思义就是突破同源策略的限制，去不同的域下访问数据。主要有如下几种实现形式：

jsonp
CORS：跨域资源共享（Cross-Origin Resource Sharing）
降域
postMessage()

JSONP的原理

原理：就是利用<script>标签没有跨域限制来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如： 
 <script src="http://www.example.net/api?param1=1&param2=2"></script> 
 并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。 
 第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： 
 callback({"name":"hax","gender":"Male"}) 
 这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

host配置：

QQ截图20170317170721.jpg

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSONp</title>
</head>

<body>
    <div id="contaniner">
        <ul id="news">
            <li>第一条新闻</li>
            <li>第二条新闻</li>
            <li>第三条新闻</li>
        </ul>
        <button id="change">更换</button>
    </div>
    <script>
        function $(id) {
            return document.querySelector(id);
        }

        $('#change').addEventListener('click', function () {
            var script = document.createElement('script');//
            script.src ='http://zyn.com:8080/getNews?callback=appendHtml';//地址指向第三方的API网址,供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
            document.head.appendChild(script);
            document.head.removeChild(script);
        })

        function appendHtml(news) {
            var html = '';
            for (var i = 0; i<news.length; i++) {
                html += '<li>' + news[i] + '</li>';
            }
            console.log(html);
            $('#news').innerHTML = html;
        }
    </script>
</body>

</html>
//JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

//后端

app.get('/getNews',function(req,res){
    
    var news= [
        "第四条新闻",
        "第五条新闻",
        "第六条新闻",
        "第七条新闻",
        "第八条新闻",
        "第九条新闻",
        "第十条新闻",
        "第十一条新闻",
        "第十二条新闻",
        "第十三条新闻"
    ]
    
    var data = [];
    
    for(var i=0; i<3;i++){
        var index = parseInt(Math.random()*news.length) //随机生成news长度范围内的数
        data.push(news[index]);//把随机生成的news的第某项添加到data
        news.splice(index,1);//删除被添加过得news的项
    }

    var cb = req.query.callback;
    if(cb){
            res.send(cb +'('+ JSON.stringify(data) +')')//callback参数作为函数名来包裹住JSON数据
    }else{
        res.send(data)
    }
})

20170316_202159.gif

注意：JSONP只支持get请求. CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

CORS的原理

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出[XMLHttpRequest]请求，从而克服了AJAX只能[同源]使用的限制。

CORS简介：
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS的两种请求：

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：

          HEAD
          GET
          POST
（2）HTTP的头信息不超出以下几种字段：
          Accept
         Accept-Language
         Content-Language
         Last-Event-ID
         Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同时满足上面两个条件，就属于非简单请求。
浏览器对这两种请求的处理，是不一样的。

简单请求:对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。

QQ截图20170317165152.jpg

Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。
如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

QQ截图20170317165424.jpg

（1）Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
（2）Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
（3）Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。如：getResponseHeader('FooBar')可以返回FooBar字段的值。

上面说到，CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。

Access-Control-Allow-Credentials: true
另一方面，开发者必须在AJAX请求中打开withCredentials属性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。
但是，如果省略withCredentials设置，有的浏览器还是会一起发送Cookie。这时，可以显式关闭withCredentials。

xhr.withCredentials = false;
需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie

非简单请求：非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
在此不再介绍请参考阮一峰非简单请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CORS</title>
    <style>
        .container{
             width:900px;
             margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="news">
            <li>头条新闻1</li>
            <li>头条新闻2</li>
            <li>头条新闻3</li>
            <li>头条新闻4</li>
        </ul>
        <button class="change">换一组</button>
    </div>

    <script>
        function $(id){
            return document.querySelector(id);
        }

        $('.change').addEventListener('click',function(){

            var xhr = new XMLHttpRequest();
            xhr.open('get','http://a.zyn.com:8080/getNews',true);
            //html通过zyn.com打开而通过ajax获取a.zyn.com上的资源，所以为跨域。
            xhr.send();
            xhr.onreadystatechange = function(){
                
                if(xhr.readyState ===4 && xhr.status ===200){
                    appendHtml(JSON.parse(xhr.responseText))
                }
            }
        })

        function appendHtml(news){

            var html ='';
            for(var i=0;i<news.length;i++){
                html +='<li>'+news[i]+'</li>'

            }
            $('.news').innerHTML = html;
        }
    </script>
</body>
</html>

//后端
app.get('/getNews',function(req,res){

    var news = [
        "头条新闻5",
        "头条新闻6",
        "头条新闻7",
        "头条新闻8",
        "头条新闻9",
        "头条新闻10",
        "头条新闻11",
        "头条新闻12"

    ]
    
     var data =[];
     for(var i=0;i<4;i++){

         var index = parseInt(Math.random()*news.length);
         data.push(news[index]);
         news.splice(index,1);
     }
     res.header("Access-Control-Allow-Origin","http://zyn.com:8080")//表示这个后台接受来自zyn.com的请求
     //res.header("Access-Control-Allow-Origin","*")//表示这个后台接受来自任意*的请求
     res.send(data)
    
})

20170317_170355.gif

降域的原理

利用域名为同一个基础域名("http://a.zyn.com/a.html"和'"http://b.zyn.com/b.html") 使用document.domain="zyn.com"进行跨域；
这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jy</title>
    <style>
        .ct{
            width:910px;
            margin: auto;
        }
        .main{
            float: left;
            width:450px;
            height: 300px;
            border: 1px solid #ccc;
        }
        input{

            margin: 20px;
        }
        iframe{
            width:450px;
            height: 300px;
            border: 1px dashed #ccc;
            float:right
        }
    </style>
</head>
<body>
    <div class="ct">
        <h1>使用降域实现跨域</h1>
        <div class="main">
            <input type="text" placeholder="http://a.zyn.com:8080/a.html">
        </div>
        <iframe src="http://b.zyn.com:8080/b.html" frameborder="0"></iframe>

        <!--//此时是在a.zyn.com下请求b.zyn.com下的资源为跨域-->
    </div>
    
    <script>
        var input = document.querySelector('.main input');
        input.addEventListener('input',function(){
            window.frames[0].document.querySelector('input').value =this.value
        })

        document.domain ="zyn.com"//降域把a.zyn.com 降域为zyn.com 
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jy</title>
    <style>
        html,body{
            margin: 0px;
        }
        #input{
            margin: 20px;
            width:200px;
        }
    </style>
</head>
<body>
    <input id="input" type="text" placeholder="b.zyn.com:8080/b.html">
</body>
<script>
    var input = document.querySelector('#input');
    input.addEventListener('input',function(){
        window.parent.document.querySelector('input').value=this.value
    })
    document.domain = 'zyn.com';////降域把b.zyn.com 降域为zyn.com 
</script>
</html>

20170317_175617.gif

postMessage()的原理

在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。
该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。

用法：
otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow：
其他窗口的一个引用，比如iframe的contentWindow属性、执行[window.open]返回的窗口对象、或者是命名过或数值索引的[window.frames]


message：
将要发送到其他 window的数据。它将会被[结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。


targetOrigin：
通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用
postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的orign属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。


transfer：
 可选，是一串和message 同时传递的对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

CTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>postMessage</title>
    <style>
        .ct{
            width:910px;
            margin: auto;
        }
        .main{
            float: left;
            width:450px;
            height: 300px;
            border: 1px solid #ccc;
        }
        input{

            margin: 20px;
        }
        iframe{
            width:450px;
            height: 300px;
            border: 1px dashed #ccc;
            float:right
        }
    </style>
</head>
<body>
    <div class="ct">
        <h1>postMessage</h1>
        <div class="main">
            <input type="text" placeholder="http://a.zyn.com:8080/a.html">
        </div>
        <iframe src="http://b.zyn.com:8080/b.html" frameborder="0"></iframe>

        <!--//此时是在a.zyn.com下请求b.zyn.com下的资源为跨域-->
    </div>
    
    <script>
        var input = document.querySelector('.main input');
        input.addEventListener('input',function(){
            window.frames[0].postMessage(this.value,'*');
        })

       window.addEventListener('message',function(e){
           input.value =e.data
            console.log(e.data);
       })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>postMessage</title>
    <style>
        html,body{
            margin: 0px;
        }
        #input{
            margin: 20px;
            width:200px;
        }
    </style>
</head>
<body>
    <input id="input" type="text" placeholder="http://b.zyn.com:8080/b.html">
</body>
<script>
    var input = document.querySelector('#input');
    input.addEventListener('input',function(){
        window.parent.postMessage(this.value,'*')
    })
   window.addEventListener('message',function(e){
       input.value= e.data
       console.log(e.data);
   })
</script>
</html>

20170317_182426.gif

版权归饥人谷楠柒所有如有转载请附上地址

最后编辑于：2017.12.06 03:49:03

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,636评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,890评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,680评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,766评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,665评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,045评论 1赞 276
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,515评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,182评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,334评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,274评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,319评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,002评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,599评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,675评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,917评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,309评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,885评论 2赞 341