八、跨源文檔API的訪問(wèn)

javascript的api中因痛，允許文檔間互相引用，如 iframe.contentWindow，window.parent猪腕， window.open 和window.opener，這些api可以拿到其他文檔的對(duì)象的引用钦勘，但是當(dāng)兩個(gè)文檔不同源時(shí)陋葡，對(duì)該對(duì)象(如Window、Location)的訪問(wèn)就會(huì)有所限制彻采。如果想要兩個(gè)不同源的窗口進(jìn)一步交流可以使用window.postMessage。

九、跨源數(shù)據(jù)存儲(chǔ)訪問(wèn)

localStorage、IndexedDB等數(shù)據(jù)存儲(chǔ)會(huì)以源進(jìn)行分割虎囚，每個(gè)源擁有自己獨(dú)立的存儲(chǔ)空間，一個(gè)源的js腳本不能對(duì)屬于其他源的數(shù)據(jù)進(jìn)行讀寫操作

cookies同樣只有同源網(wǎng)頁(yè)才能共享留攒，設(shè)置其domain剪侮、path瓣俯、secure彩匕、HttpOnly屬性可以來(lái)限定其訪問(wèn)性

十、實(shí)現(xiàn)跨域讀取的方案

1.XMLHttpRequest的跨域

方案：
  1.JSONP
  2.CORS
  3.WebSocket
  4.代理

方案1：JSONP

只能用于Get請(qǐng)求卵迂，老式瀏覽器都支持。在網(wǎng)頁(yè)中創(chuàng)建一個(gè)<script>標(biāo)簽，src為請(qǐng)求的url宝当，請(qǐng)求的查詢字符串有一個(gè)callback參數(shù)庆揩，用來(lái)指定回調(diào)函數(shù)的名稱，回調(diào)函數(shù)在js腳本中聲明好订晌。當(dāng)服務(wù)器收到請(qǐng)求后蚌吸，返回一句js腳本锈拨，內(nèi)容是將json數(shù)據(jù)作為參數(shù)傳入回調(diào)函數(shù)并調(diào)用該函數(shù)羹唠。

實(shí)例：

前端：
var jsonp = {
    exec: function() {
        var script = document.getElementById('jsonp');
        if(script) {
            script.parentElement.removeChild(script);
        }
        //創(chuàng)建<script>標(biāo)簽
        script = document.createElement('script');
        script.id = 'jsonp';
        //返回js腳本：
        //jsonp.jsonpcallback({"code":1000,"data":{"username":"carl","userAge":20,"userSex":"男"}})
        script.src = 'http://localhost:8080/getusermsg?callback=jsonp.jsonpcallback';
        document.head.appendChild(script);        
    },
    //返回js腳本時(shí)會(huì)調(diào)用該函數(shù)
    jsonpcallback: function (userdata) { 
        alert('姓名:' + userdata.data.username);
        alert('年齡:'+ userdata.data.userAge);
        alert('性別:' + userdata.data.userSex);
    }
 }
 $('#btn1').click(jsonp.exec);

服務(wù)端：
function getusermsg(req, res, next) {
    if(req.url.match(api.getusermsg)) {
        var queryJson = queryParse(req.url.split('?')[1]); 
        var fb = {code: 1000, data: {username: 'carl', userAge: 20, userSex: '男'}};
        //查詢字符串中有callback參數(shù)
        if(queryJson.callback) {
            res.writeHead(200);
            //返回調(diào)用回調(diào)函數(shù)的字符串喊衫，前端以js腳本來(lái)解析并執(zhí)行
            res.write(queryJson.callback + '(' + JSON.stringify(fb) + ')');
        }else {
            res.setHeader('Access-Control-Allow-Origin', '*');
            res.writeHead(200);
            res.write(JSON.stringify(fb));
        }
    }
    next();
}

同樣也可以用jquery來(lái)發(fā)起jsonp請(qǐng)求族购，其原理也是跟上面一樣，只是對(duì)其進(jìn)行了一些封裝寝杖，調(diào)用起來(lái)更方便违施。因?yàn)槭墙柚?code><script>標(biāo)簽的src屬性，JSONP只能發(fā)GET請(qǐng)求

方案2.CORS

CORS是跨域資源分享的縮寫瑟幕，能夠徹底解決Ajax的跨域問(wèn)題磕蒲，同時(shí)允許任意類型的請(qǐng)求留潦，需要服務(wù)器響應(yīng)頭中增加下面一種或幾種

//*表示允許任意源的訪問(wèn)，也可以指定特定的源
1.Access-Control-Allow-Origin：*   
//表示跨域訪問(wèn)時(shí)帶上cookie辣往，需同時(shí)在ajax請(qǐng)求中設(shè)置`withCredentials: true`兔院，
2.Access-Control-Allow-Credentials: true
//預(yù)檢請(qǐng)求后響應(yīng)的必須字段，返回所有支持的方法站削，而不單是瀏覽器請(qǐng)求的那個(gè)方
//法坊萝。這是為了避免多次"預(yù)檢"請(qǐng)求
3.Access-Control-Allow-Methods: GET, POST, PUT
//預(yù)檢請(qǐng)求后響應(yīng)的必須字段，放入預(yù)檢請(qǐng)求時(shí)請(qǐng)求所帶的頭
4.Access-Control-Allow-Headers：Content-Type
//允許瀏覽器在指定時(shí)間內(nèi)许起，無(wú)需再發(fā)送預(yù)檢請(qǐng)求進(jìn)行協(xié)商十偶，直接用本次協(xié)商結(jié)果即可
5.Access-Control-Max-Age: 1728000

CORS請(qǐng)求分為簡(jiǎn)單請(qǐng)求(HEAD、GET园细、POST)和非簡(jiǎn)單請(qǐng)求(PUT或DELETE或Content-Type為application)
非簡(jiǎn)單請(qǐng)求會(huì)向發(fā)一個(gè)預(yù)檢請(qǐng)求(preflight)惦积，請(qǐng)求類型為OPTION，收到預(yù)檢請(qǐng)求的響應(yīng)后再發(fā)送真正的請(qǐng)求珊肃，這個(gè)時(shí)候的請(qǐng)求與簡(jiǎn)單請(qǐng)求無(wú)異荣刑。

簡(jiǎn)單地說(shuō)下CORS請(qǐng)求會(huì)攜帶的頭信息

//必要請(qǐng)求頭，表示當(dāng)前源伦乔，相應(yīng)的預(yù)檢響應(yīng)需要返回Access-Control-Allow-Origin
1.Origin
//預(yù)檢時(shí)會(huì)帶上的頭厉亏，表示真正請(qǐng)求的方法，相應(yīng)的預(yù)檢響應(yīng)需要返回Access-Control-Allow-Method
2.Access-Control-Request-Method
//預(yù)檢時(shí)會(huì)帶上的頭烈和，表示真正請(qǐng)求會(huì)額外發(fā)送的頭信息爱只，相應(yīng)的預(yù)檢響應(yīng)需要返回Access-Control-Allow-Headers
3.Access-Control-Request-Headers

示例：

//1.簡(jiǎn)單請(qǐng)求
//前端
var cors = function() {
    $.ajax(
        {
            url: 'http://localhost:8080/getusermsg',
            type: 'GET',
            dataType: 'json',
            success: function(userdata) {
                alert('姓名:' + userdata.data.username);
                alert('年齡:'+ userdata.data.userAge);
                alert('性別:' + userdata.data.userSex);
            },
            error: function(error) {
                alert(JSON.stringify(error));
            }
        }
    )
}
//服務(wù)端
function getusermsg(req, res, next) {
    if(req.url.match(api.getusermsg)) {
        var queryJson = queryParse(req.url.split('?')[1]); 
        var fb = {code: 1000, data: {username: 'carl', userAge: 20, userSex: '男'}};
        if(queryJson.callback) {
            res.writeHead(200);
            res.write(queryJson.callback + '(' + JSON.stringify(fb) + ')');
        }else {
            //允許任意源訪問(wèn)
            res.setHeader('Access-Control-Allow-Origin', '*');
            res.writeHead(200);
            res.write(JSON.stringify(fb));
        }
    }
    next();
}

//2.非簡(jiǎn)單請(qǐng)求
//前端
var postUser = function() {
    $.ajax({
        url: 'http://localhost:8080/postusermsg',
        type: 'POST',
        //發(fā)送json數(shù)據(jù)觸發(fā)預(yù)檢preflight，option請(qǐng)求
        contentType: 'application/json',  
        data: {username: 'jjp', userAge: 22, userSex: '男'},
        dataType: 'json',
        success: function(data) {
            if(data.code === 1000) {
                alert('添加用戶成功')
            }
        },
        error: function(err) {
            alert(JSON.stringify(err));
        }
    })
}

//服務(wù)端
function postusermsg(req, res, next) {
    if(req.url.match(api.postusermsg)) {
        var body = '';
        req.on('data', function(chunk){    
            body += chunk;
        });
        req.on('end', function(){    
            var queryJson = queryParse(body);
            console.log(queryJson);
            //針對(duì)預(yù)檢請(qǐng)求發(fā)送的頭為響應(yīng)設(shè)置相對(duì)應(yīng)的頭
            res.setHeader('Access-Control-Allow-Origin', '*');
            res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
            res.setHeader('Access-Control-Allow-Method', 'GET,POST,PUT');
            res.writeHead(200);
            res.write(JSON.stringify({code:1000, data:{}}));
            next();
        });
    }else {
        next();
    }
}

方案3.WebSocket

WebSocket是一種新的通信協(xié)議招刹，能夠在一個(gè)持久連接上提供全雙工恬试、雙向通信。使用url模式也略有不同疯暑。未加密連接使用ws://训柴，加密連接使用wss://，最重要的一點(diǎn)是該協(xié)議不實(shí)行同源策略妇拯。服務(wù)器需要自己確定請(qǐng)求源是否在白名單內(nèi)幻馁，從而過(guò)濾惡意的請(qǐng)求。

方案4.代理

1.正向代理：需要借助同源的代理服務(wù)器越锈，瀏覽器先將請(qǐng)求發(fā)送給代理服務(wù)器仗嗦，代理服務(wù)器接收請(qǐng)求并其轉(zhuǎn)發(fā)給目標(biāo)數(shù)據(jù)服務(wù)器，由于不同源的兩個(gè)服務(wù)器的交互不遵循同源策略甘凭，所以代理服務(wù)器可以接收到目標(biāo)數(shù)據(jù)服務(wù)器的響應(yīng)數(shù)據(jù)稀拐，再將響應(yīng)數(shù)據(jù)發(fā)送回瀏覽器

2.反向代理：通常可以用Nginx反向代理來(lái)實(shí)現(xiàn)丹弱，也是利用了服務(wù)端之間的資源交互不會(huì)有跨域限制的原理德撬。假如現(xiàn)在有
domainA：http://jjp.com:3000铲咨，部署了請(qǐng)求頁(yè)面
domainB：http://jjp.com:8080，部署了nginx服務(wù)器
domainC：http://jjp.com:6600砰逻，部署了資源服務(wù)器

瀏覽器獲取了domainA的頁(yè)面鸣驱，然后用ajax向domainC請(qǐng)求數(shù)據(jù)，必然會(huì)發(fā)生跨域蝠咆。所以domainA可以讓nginx做反向代理服務(wù)器，讓nginx服務(wù)器假扮domainA北滥，此時(shí)瀏覽器請(qǐng)求domainB時(shí)會(huì)得到原先部署在domainA上的頁(yè)面刚操。瀏覽器想請(qǐng)求domainC的資源時(shí)，直接向domainB發(fā)請(qǐng)求即可再芋，nginx服務(wù)器會(huì)攔截瀏覽器的請(qǐng)求菊霜，重寫為向domainC請(qǐng)求，再轉(zhuǎn)發(fā)該請(qǐng)求济赎，nginx拿到資源后返回給瀏覽器

2.Cookie的跨域

同源的頁(yè)面才可以共享cookie鉴逞，但是如果兩個(gè)源的一級(jí)域名相同，二級(jí)域名不同司训，瀏覽器可以通過(guò)設(shè)置document.domain來(lái)共享cookie构捡，比如有

domainA:http://gg.jjp.com/index.html
domainB:http://bb.jjp.com/index.html

現(xiàn)在想讓domainA和domainB能互相訪問(wèn)對(duì)方的cookie，可以雙方都設(shè)置document.domain為jjp.com壳猜，domainA則能夠訪問(wèn)到domainB設(shè)置的cookie勾徽，domainB也能訪問(wèn)到domainA設(shè)置的cookie.

3.跨窗口的跨域通信

iframe窗口和window.open打開的窗口若與父窗口不是同源的，都無(wú)法與創(chuàng)建它們的父窗口通信统扳，無(wú)法互相訪問(wèn)對(duì)方的document對(duì)象喘帚。如果兩個(gè)窗口一級(jí)域名相同，二級(jí)域名不同咒钟，可以通過(guò)設(shè)置document.domain解決吹由。
但是對(duì)于完全不同源的窗口，想要進(jìn)行通信朱嘴，可以通過(guò)下面的方法：

1.片段識(shí)別符
2.window.name
3.window.postMessage

方案1.片段識(shí)別符

地址欄中url的#后面的內(nèi)容變化是不會(huì)引起頁(yè)面的刷新的倾鲫，這部分內(nèi)容就是片段識(shí)別符，當(dāng)片段識(shí)別符內(nèi)容變化時(shí)腕够，會(huì)觸發(fā)hashchange事件级乍。

因此發(fā)信息的窗口可以把信息寫入接收信息窗口的片段標(biāo)識(shí)符中，接收信息窗口監(jiān)聽hashchange事件來(lái)取得自己的片段標(biāo)識(shí)符帚湘，從而來(lái)達(dá)成通信的目的玫荣。

方案2.window.name

window.name值在不同的頁(yè)面（甚至不同域名）加載后依舊存在，并且值最大可以達(dá)到2MB大诸。

示例：窗口A和窗口B不同源捅厂，現(xiàn)在A想拿到窗口B的消息贯卦，可以借助window.name 以及 iframe實(shí)現(xiàn)跨域通信

步驟：
1.窗口A在頁(yè)面中動(dòng)態(tài)添加一個(gè)iframe，將其src置為窗口B頁(yè)面地址
2.iframe加載了窗口B的頁(yè)面焙贷，窗口B將要發(fā)送的消息寫入window.name中
3.由于窗口A與iframe處于不同域撵割，因?yàn)橥床呗裕翱贏不能訪問(wèn)iframe的window.name
4.此時(shí)再讓iframe加載一個(gè)與窗口A同源的頁(yè)面辙芍，使窗口A與iframe屬于同域
5.窗口A讀取iframe的window.name啡彬，至此接收到窗口B發(fā)送的消息，完成通信

方案3.window.postMessage

window.postMessage是HTML5引入的一個(gè)新的api故硅，允許兩個(gè)窗口通信庶灿，不論是否兩個(gè)窗口是否同源

示例：

//發(fā)送信息的窗口：http://jjp.com
var sonWin = window.open('https://www.baidu.com','百度');
//參數(shù)：要發(fā)送的信息、接受信息的窗口的源
sonWin.postMessage('你好吃衅，百度', 'https://www.baidu.com');

//接收信息的窗口：https://www.baidu.com
//監(jiān)聽postMessage事件
window.addEventListener('message', function(event) {
  //event.source：發(fā)送消息的窗口
  //event.origin: 發(fā)送消息的網(wǎng)址
  //event.data: 消息內(nèi)容
  if(event.origin === 'http://jjp.com') {
    event.source.postMessage('Got it', event.origin);
    console.log(event.data)
  }
});

4.跨源數(shù)據(jù)存儲(chǔ)

通過(guò)window.postMessage往踢，能夠?qū)崿F(xiàn)讀寫其他窗口的localStorage和IndexDB。
在用window.postMessage實(shí)現(xiàn)窗口間的通信的基礎(chǔ)上進(jìn)行

• 寫：接收其他窗口的消息時(shí)徘层，將消息作為值其存入
• 讀：接受其他窗口的消息時(shí)峻呕，將消息作為鍵值取出值，并將值通過(guò)postMessage發(fā)送給其他窗口

參考文章

瀏覽器的同源策略
瀏覽器的同源策略及其規(guī)避辦法