跨域

時間 2019-11-15

原文原文鏈接

1、同源策略（Same-Origin Policy）

1.1 同源（Same Origin）

協議，域名，端口三者都相同視爲同源。同源策略主要是出於安全的考慮。一個源不能訪問另外一個源的DOM，客戶端數據，發生Ajax請求。javascript

1.2 不受同源策略限制的

跨域資源寫入。<script>, <link>, <iframe>, <img>，<video>html
表單提交html5

1.3 受同源策略限制範圍

跨域腳本API訪問（不一樣源的DOM操做）java
跨域數據存儲訪問：Cookie，LocalStroage，（？IndexedDB，ApplicationCache,CacheStorage）web
Ajax請求json
@font-face（部分瀏覽器，如Gecko）後端

2、跨域腳本API訪問

2.1 限制狀況

JS中能夠經過iframe.contentWindow, window.open, window.opener, window.parent等API進行文檔間的交互。但這隻限於同源文檔之間，非同源之間不能交互。
頁面A：http://qyao.com/CookieOperati...跨域

<!DOCTYPE html>
<html>
    <head>
        <title>Index</title>
    </head>
    <body>
        <iframe id="so" src="http://qyao.m.ctrip.com/CookieOperation/home/detail" height="200" width="300"></iframe> 
        <input type="button" id="pm" value="Post Message" />
    </body>
</html>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var btn = document.getElementById('pm');
        btn.addEventListener('click', function () {
            var detaiDoc = document.getElementById('so').contentWindow.document; // 訪問so窗口的document
        });
    });
</script>

報錯：瀏覽器

2.2 window.postMessage

2.2.1 介紹

Html5中引入了一個新的API： window.postMessage，能夠安全的使不一樣源文檔通訊。
分別修改A，B頁面內容
A頁面：安全

<!DOCTYPE html>
<html>
    <head>
        <title>Index</title>
    </head>
    <body>
        <iframe id="so" src="http://qyao.m.ctrip.com/CookieOperation/home/detail" height="200" width="300"></iframe> 
        <input type="button" id="pm" value="Post Message" />
    </body>
</html>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var btn = document.getElementById('pm');
        btn.addEventListener('click', function () {
            var detaiWin = document.getElementById('so').contentWindow;
            console.log('Index: hi, What\' your title ?');
            detaiWin.postMessage({ title: document.title }, 'http://qyao.m.ctrip.com');
        });
    });
    window.addEventListener('message', function (e) {
        console.log('Index: hi ' + e.data.title);
    });
</script>

B頁面：

<!DOCTYPE html>
<html>
    <head>
        <title> Detail</title>
    </head>
    <body>
        <h2>Detail</h2>
    </body>
</html>
<script type="text/javascript">
    window.addEventListener('message', function (e) {
        
        console.log('Detai: hi ' + e.data.title + '. I\'m Detail.');
        e.source.postMessage({ title: document.title }, '*');
    });
</script>

顯示：

2.2.2 優勢

A：安全
B：能夠傳輸任何數據類型

2.2.3 缺點

A：這是html5的API，存在兼容性問題。

3、跨域Ajax請求

3.1 受限狀況

Ajax請求只能想同源的地址發生請求，不然就報錯。

處理這類狀況是可經過JSONP，CORS方式解決。

3.2 JSONP

參考：

CSDN：http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/index.html

JSONP實際上是解決異步跨域請求的問題，跟AJAX半毛錢關係都沒有。

3.2.1 原理

script標籤不受同源策略約束，即src屬性的值能夠是非同源地址。把請求的接口地址和參數經過URL的方式添加到一個script標籤的src屬性上，接口處理完成後返回個JS函數調用語句字符串。這樣就實現了異步跨域請求接口。

3.2.2 怎麼作

A：Client端script標籤的src屬性指向服務的地址
B：服務端返回JS回調函數調用語句的字符串。回調函數名通常是客戶端傳過來的，或者先後端約定的回調函數名。

3.2.3 缺點

A：只支持GET請求。

3.2.4 優勢

A：全部的瀏覽器都支持

3.3 CORS

CORS是解決該問題的終極方案

4、跨域數據存儲訪問

4.1 受限狀況

存儲在瀏覽器中的數據，如localStorage和IndexedDB，以源進行分割。每一個源都擁有本身單獨的存儲空間，一個源中的Javascript腳本不能對屬於其它源的數據進行讀寫操做。
處理這種狀況是可經過window.postMessage方式解決。

4.2 window.postMessage

postMessage實現了兩個不一樣源的頁面間通訊，能夠用來解決跨域數據訪問問題。

4.3 特殊的Cookie

Cookie關於源的定義不一樣，參考C_Cookie。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。