JS跨域

時間  2019-11-08
欄目 JavaScript 简体版
原文   原文鏈接

跨域概述

兩個不一樣域互相請求，稱爲跨域，是由瀏覽器同源策略限制的一類請求場景。javascript

--> 同源策略/SOP（Same origin policy）是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，瀏覽器很容易受到CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同。php

同源策略限制如下幾種行爲：
1.) Cookie、LocalStorage 和 IndexDB 沒法讀取<br/>
2.) DOM沒法得到<br/>
3.) AJAX 請求不能發送html

目前主流的用於解決跨域問題的方法：前端

iframe跨域

document.domain+iframe

缺點：這種方法只適用於 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 沒法經過這種方法。vue

實現原理：兩個頁面都經過js強制設置document.domain爲基礎主域，就實現了同域。html5

1.）父窗口：(http://www.domain.com/a.html)java

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

2.）子窗口：(http://child.domain.com/b.html)node

<script>
    document.domain = 'domain.com';
    // 獲取父窗口中變量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

-->iframe是什麼？iframe 元素會建立包含另一個文檔的內聯框架（即行內框架）jquery

postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是爲數很少能夠跨域操做的window屬性之一，它可用於解決如下方面的問題：<br/>
a.） 頁面和其打開的新窗口的數據傳遞<br/>
b.） 多窗口之間消息傳遞<br/>
c.） 頁面與嵌套的iframe消息傳遞<br/>
d.） 上面三個場景的跨域數據傳遞web

用法：postMessage(data,origin)方法接受兩個參數

  • data： html5規範支持任意基本類型或可複製的對象，但部分瀏覽器只支持字符串，因此傳參時最好用JSON.stringify()序列化。
  • origin： 協議+主機+端口號，也能夠設置爲*，表示能夠傳遞給任意窗口，若是要指定和當前窗口同源的話設置爲"/"。

1.）a.html：(http://www.domain1.com/a.html)

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2傳送跨域數據
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };

    // 接受domain2返回數據
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);
</script>

2.）b.html：(http://www.domain2.com/b.html)

<script>
    // 接收domain1的數據
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 處理後再發回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

window.name+iframe

window.name屬性的獨特之處：name值在不一樣的頁面（甚至不一樣域名）加載後依舊存在，而且能夠支持很是長的 name 值（2MB）。

1.）a.html：(http://www.domain1.com/a.html)

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');

    // 加載跨域頁面
    iframe.src = url;

    // onload事件會觸發2次，第1次加載跨域頁，並留存數據於window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy頁)成功後，讀取同域window.name中數據
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域頁)成功後，切換到同域代理頁面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 獲取數據之後銷燬這個iframe，釋放內存；這也保證了安全（不被其餘域frame js訪問）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 請求跨域b頁面數據
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});

2.）proxy.html：(http://www.domain1.com/proxy....
中間代理頁，與a.html同域，內容爲空便可。

3.）b.html：(http://www.domain2.com/b.html)

<script>
    window.name = 'This is domain2 data!';
</script>

總結：經過iframe的src屬性由外域轉向本地域，跨域數據即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操做。

AJAX跨域

Vue ProxyTable

本質是建立本地服務器，由本地服務器請求跨域服務器上的數據，服務器之間沒有同源限制，

Access-Control-Allow-Origin參數設置

在被請求的文件中添加一個header(IE10如下不支持)

<?php
header("Access-Control-Allow-Origin:*");
?>

jsonp方法

缺點：只能實現get一種請求。
優勢：簡單適用，老式瀏覽器所有支持，服務器改造很是小。

原理：網頁經過添加一個<script>元素，向服務器請求JSON數據，這種作法不受同源政策限制；服務器收到請求後，將數據放在一個指定名字的回調函數裏傳回來。

原生實現

//js
function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};

//服務端
<?php 
$callback = $_GET['foo']//獲得回調函數名
$data = array('a','b','c');  //要返回的數據
echo $callback.'('.json_encode($data).')';//輸出
?>

JQuery方法

jquery會自動生成一個全局函數來替換callback=?中的問號，以後獲取到數據後又會自動銷燬，實際上就是起一個臨時代理函數的做用。

get

$.get('http://example.com/data.php?callback',function(){
        alert('123');
},'jsonp');

<?php 
$callback = $_GET['callback']//獲得回調函數名
$data = array('a','b','c');  //要返回的數據
echo $callback.'('.json_encode($data).')';//輸出
?>

getJson

getJSON方法會自動判斷是否跨域，不跨域的話，就調用普通的ajax方法；跨域的話，則會以異步加載js文件的形式來調用jsonp的回調函數。

$.getJson('http://example.com/data.php?callback=?',function(){
    alert('123');
});

<?php 
$callback = $_GET['callback']//獲得回調函數名
$data = array('a','b','c');  //要返回的數據
echo $callback.'('.json_encode($data).')';//輸出
?>

ajax包裹jsonp

以上作法還有一種解釋就是JQuery把jsonp的實現封裝在了ajax中

$.ajax({ 
    type: "GET",     
    url: "http://www.b.com/jsonp.js"
    dataType: "jsonp",
    jsonp:"callback",//「callback」：任意名字均可以
    success: function(data) {
        //對data的處理
    },
    error: function(jqXHR){     
        alert("發生錯誤：" + jqXHR.status);  
    },     
});

//服務端的修改
$jsonp = $_GET["callback"];//callback名字和請求的名字相同

-->ajax是什麼？經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

vue實現jsonp

//vue js
this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})
 
//node.js後端代碼
var querystring = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;

    // jsonp返回設置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');

    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

WebSocket協議跨域

WebSocket是HTML5新的一種通訊協議，使用ws://（非加密）和wss://（加密）做爲協議前綴。該協議不實行同源政策，只要服務器支持，就能夠經過它進行跨源通訊。

下面是一個例子，瀏覽器發出的WebSocket請求的頭信息。

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

上面代碼中，有一個字段是Origin，表示該請求的請求源（origin），即發自哪一個域名。正是由於有了Origin這個字段，因此WebSocket纔沒有實行同源政策。由於服務器能夠根據這個字段，判斷是否許可本次通訊。若是該域名在白名單內，服務器就會作出以下回應。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

CORS

CORS是跨源資源分享（Cross-Origin Resource Sharing）的縮寫。它是W3C標準，是跨源AJAX請求的根本解決方法。相比JSONP只能發GET請求，CORS容許任何類型的請求。IE瀏覽器不能低於IE10。

整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。

所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。

簡單請求

只要同時知足如下兩大條件，就屬於簡單請求。

（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字段。

下面是一個例子，瀏覽器發現此次跨源AJAX請求是簡單請求，就自動在頭信息之中，添加一個Origin字段。

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

若是Origin指定的源，不在許可範圍內，服務器會返回一個正常的HTTP迴應。若是Origin指定的域名在許可範圍內，服務器返回的響應，會多出幾個頭信息字段。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

非簡單請求

非簡單請求是那種對服務器有特殊要求的請求，好比請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。

非簡單請求的CORS請求，會在正式通訊以前，增長一次HTTP查詢請求，稱爲"預檢"請求（preflight）。"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。"預檢"請求的HTTP頭信息：

Origin: 請求域名
Access-Control-Request-Method: 請求自身的方法
Access-Control-Request-Headers: 自定義的頭部信息

發送請求後，服務器能夠決定是否容許這種類型的請求，服務器經過在響應中發送以下頭部與瀏覽器進行溝通

Access-Control-Allow-Origin: 相同的源信息，能夠是*
Access-Control-Allow-Methods: 容許的方法
Access-Control-Allow-Headers: 容許的頭部
Access-Control-Max-Age:應該講這個preflight緩存多久

preflight請求結束後，結果就按照響應中指定的時間緩存起來，而爲此付出的代價只是第一次發送請求的時候會多發送一次HTTP請求。

帶憑據的請求

CORS請求默認不發送Cookie和HTTP認證信息。若是要把Cookie發到服務器，一方面要服務器贊成，指定Access-Control-Allow-Credentials字段。

Access-Control-Allow-Credentials: true

另外一方面，開發者必須在AJAX請求中打開withCredentials屬性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

前端XMLHttpRequest請求代碼

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDR兼容

xhr.withCredentials = true;// 前端設置是否帶cookie

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程