同源策略
-
跨域：瀏覽器允許向服務器發送跨域請求，從而克服Ajax只能同源使用的限制。
-
同源策略：如果兩個頁面的協議，域名,端口都相同，則兩個頁面具有相同的源。
同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。這是一個用於隔離潛在惡意文件的重要安全機制。
不受同源策略限制的
-
頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。
-
跨域資源的引入是可以的。但是js不能讀寫加載的內容。如嵌入到頁面中的
<script src="..."></script>，<img>，<link>，<iframe>等。
受到限制的
- Cookie、LocalStorage 和 IndexDB 無法讀取
- DOM和JS對象無法獲得
- AJAX 請求不能發送
跨域解決方案
一、JSONP跨域
- jsonp的核心原理就是：目標頁面回調本地頁面的方法,並帶入參數
- 服務器端實現 JSONP 接口的步驟
- 服務器端獲取客戶端發送過來的query參數，其中參數有回調函數的名字
- 得到的數據，拼接出一個函數調用的字符串
- 把上一步拼接得到的字符串，響應給客戶端的
<script>標簽進行解析執行
- jsonp的缺點：只能發送get一種請求。
1、原生JS實現
通過script標簽src屬性，發送帶有callback參數的GET請求，服務端將接口返回數據拼湊到callback函數中，返回給瀏覽器，瀏覽器解析執行，從而前端拿到callback函數返回的數據。
<script>
function getData(data){
console.log(data)
}
</script>
<script src="http://127.0.0.1:3000/web?cb=getData"></script>
后端nodejs代碼
主要用來模擬服務器
攜帶參數必須是字符串
const express=require('express')
const router=express.Router()
router.get('/web',(req,res)=>{
let {cb}=req.query
console.log(req.query)
var data = {
name: 'xtt',
age: 18,
gender:'女孩子'
}
// 攜帶參數必須是字符串
res.send(`${cb}(${JSON.stringify(data)})`)
router.get('/que',(req,res)=>{
res.send(`${req.query.cb}('dd')`)
})
})
module.exports=router
2、jquery Ajax實現
以jquery來發起jsonp請求
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
let url = 'http://127.0.0.1:3000/que?cb=getData'
$.ajax({
method: 'GET',
url,
dataType: 'jsonp',
success: (res) => {
console.log(res)
}
})
</script>
3、Vue axios實現
handleCallback({"success": true, "user": "admin"})
this.$http = axios;
this.$http.jsonp('http://127.0.0.1:3000/que?cb=getData', {
params: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})
二、跨域資源共享（CORS）
- CORS是一個W3C標准，全稱是"跨域資源共享"（Cross-origin resource sharing）。
- 它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
- CORS需要瀏覽器和服務器同時支持。
- 目前，所有主流瀏覽器都支持該功能，IE10以下不支持。
- 瀏覽器將CORS跨域請求分為：簡單請求、非簡單請求。
簡單請求與非簡單請求
簡單請求
瀏覽器在發送跨域請求的時候，會先判斷下是簡單請求還是非簡單請求，如果是簡單請求，就先執行服務端程序，然后瀏覽器才會判斷是否跨域。
同時滿足以下的兩個條件，就屬於簡單請求。瀏覽器對這兩種的處理，是不一樣的。
- 請求方式：get/post/head其中一種
- 請求頭設置：
- Accept
- Accept-Language
- Content-Type：application/x-www-form-urlencoded、multipart/form-data、text/plain（ 只限於三個值中的一個）
詳細描述
對於簡單請求，瀏覽器直接發出CORS請求。具體來說，就是在頭信息之中，增加一個Origin字段。
舉例：
-
發起請求
-
自動在頭信息之中，添加一個Origin字段。
GET /cors HTTP/1.1 Origin: http://127.0.0.1:8080 Host: api.alice.com Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0...Origin：本次請求來自哪個域（協議 + 域名 + 端口）。服務器根據這個值，決定是否同意這次請求。
-
服務器判斷此次請求Origin源
- 不在許可范圍內：服務器會返回一個正常的 HTTP 回應。
- 瀏覽器發現，這個回應的頭信息沒有包含Access-Control-Allow-Origin字段（詳見下文），就知道出錯了，從而拋出一個錯誤，被請求的異常回調函數捕獲。
注意，這種錯誤無法通過狀態碼識別，因為 HTTP 回應的狀態碼有可能是200。
- 瀏覽器發現，這個回應的頭信息沒有包含Access-Control-Allow-Origin字段（詳見下文），就知道出錯了，從而拋出一個錯誤，被請求的異常回調函數捕獲。
- 在許可范圍內：服務器返回的響應，會多出幾個頭信息字段。
- 有三個與 CORS 請求相關的字段，都以Access-Control-開頭。
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
- 有三個與 CORS 請求相關的字段，都以Access-Control-開頭。
- 不在許可范圍內：服務器會返回一個正常的 HTTP 回應。
-
Access-Control解釋
-
Access-Control-Allow-Origin：必須的
它的值要么是請求時Origin字段的值，要么是一個*，表示接受任意域名的請求。
-
Access-Control-Allow-Credentials：可選
布爾值，表示是否允許發送 Cookie。默認情況下，Cookie 不包括在 CORS 請求之中（為了降低 CSRF 攻擊的風險。）。設為true，即表示服務器明確許可，瀏覽器可以把 Cookie 包含在請求中，一起發給服務器。這個值也只能設為true，如果服務器不要瀏覽器發送 Cookie，不發送該字段即可。
-
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字段的值。
-
非簡單請求
對服務器提出特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。
預檢請求
- 非簡單請求的 CORS 請求，會在正式通信之前，增加一次 HTTP 查詢請求，稱為“預檢”請求（preflight）。
- 瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可以使用哪些 HTTP 方法和頭信息字段。
- 只有得到肯定答復，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。
- 這是為了防止這些新增的請求，對傳統的沒有 CORS 支持的服務器形成壓力，給服務器一個提前拒絕的機會，這樣可以防止服務器收到大量DELETE和PUT請求，這些傳統的表單不可能跨域發出的請求
舉例
-
自動發出一個“預檢”請求，要求服務器確認可以這樣請求。下面是這個“預檢”請求的 HTTP 頭信息：
OPTIONS /cors HTTP/1.1 Origin: http://api.bob.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: X-Custom-Header Host: api.alice.com Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0...兩個特殊字段:
- Access-Control-Request-Method必須的
用來列出瀏覽器的 CORS 請求會用到哪些 HTTP 方法，上例是PUT。
- Access-Control-Request-Headers
該字段是一個逗號分隔的字符串，指定瀏覽器 CORS 請求會額外發送的頭信息字段。
服務器收到“預檢”請求以后，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，確認允許跨源請求，就可以做出回應
- Access-Control-Request-Method必須的
-
預檢請求的回應：
服務器收到"預檢"請求以后，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，確認允許跨源請求，就可以做出回應。
HTTP回應中，除了關鍵的是Access-Control-Allow-Origin字段，其他CORS相關字段如下：
- Access-Control-Allow-Methods：必選
它的值是逗號分隔的一個字符串，表明服務器支持的所有跨域請求的方法。注意，返回的是所有支持的方法，而不單是瀏覽器請求的那個方法。這是為了避免多次"預檢"請求。
- Access-Control-Allow-Headers
如果瀏覽器請求包括Access-Control-Request-Headers字段，則Access-Control-Allow-Headers字段是必需的。它也是一個逗號分隔的字符串，表明服務器支持的所有頭信息字段，不限於瀏覽器在"預檢"中請求的字段。
- Access-Control-Allow-Credentials：可選
該字段與簡單請求時的含義相同。
- Access-Control-Max-Age：可選
用來指定本次預檢請求的有效期，單位為秒。
CORS跨域
1)前端設置
let xhr;
try {
xhr=new XMLHttpRequest();
} catch (error) {
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('post','http://localhost:3000/login',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('name=111&age=12');
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
let reg=/^2\d{2}/
if(reg.test(xhr.status)){
console.log(JSON.parse(xhr.response))
}
}
}
nodejs代碼
在Express中通過第3方中間件來完成cors跨域解決
使用步驟分為如下 3 步：
- 運行 npm install cors 安裝中間件
- 使用 const cors = require('cors') 導入中間件
- 在路由之前調用 app.use(cors()) 配置中間件
const express=require('express')
const cors=require('cors')
const app=express()
app.listen(3000)
const allowHosts=[
'http://localhost:5000',
'http://localhost:2000'
]
app.use(cors())
app.use((req,res,next)=>{
let hst =req.header.origin
if(allowHosts.includes(hst)){
next()
}else{
return res.send({
code:404,
msg:'地址不對'
})
}
})
app.get('/login',(req,res)=>{
res.send('登陸')
})
三、Nginx 反向代理解決跨域問題
正向代理和反向代理
提到代理，肯定要說一下這兩個的區別。
- 舉個正向代理的例子
我打球累了走不動了，找看球的小朋友幫我去旁邊的商店買瓶水。商店老板是不知道到底是誰需要喝水的，隱藏了客戶端。當然，小朋友可以告訴老板就是那個打球像蔡徐坤的人要喝水。還有，VPN 就是正向代理。
- 反向代理的例子
我打球累了，找看球的小朋友要瓶水喝（當然我肯定會給錢的：D）。我不需要知道小朋友的水是從旁邊的商店還是兩公里外的超市買的。隱藏了服務端。還有，我們連好了 VPN 訪問谷歌的時候，瀏覽的那些頁面，我們是不會知道具體是哪台服務器的資源。
nginx配置解決iconfont跨域
瀏覽器跨域訪問js、css、img等常規靜態資源被同源策略許可，但iconfont字體文件(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜態資源服務器中加入以下配置。
location / {
add_header Access-Control-Allow-Origin *;
}
nginx反向代理接口跨域
跨域問題：同源策略僅是針對瀏覽器的安全策略。服務器端調用HTTP接口只是使用HTTP協議，不需要同源策略，也就不存在跨域問題。
實現思路：通過Nginx配置一個代理服務器域名與domain1相同，端口不同）做跳板機，反向代理訪問domain2接口，並且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域訪問。
nginx具體配置
#proxy服務器
server {
listen 81;
server_name www.domain1.com;
location / {
proxy_pass http://www.yp2.com:8080; #反向代理
proxy_cookie_domain www.yp2.com www.yp1.com; #修改cookie里域名
index index.html index.htm;
# 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用
add_header Access-Control-Allow-Origin http://www.yp1.com; #當前端只跨域不帶cookie時，可為*
add_header Access-Control-Allow-Credentials true;
}
}
四、nodejs中間件代理跨域
node中間件實現跨域代理，原理大致與nginx相同，都是通過啟一個代理服務器，實現數據的轉發，也可以通過設置cookieDomainRewrite參數修改響應頭中cookie中域名，實現當前域的cookie寫入，方便接口登錄認證。
1、nodejs服務器代理
使用node + express + http-proxy-middleware搭建一個proxy服務器。
npm i express htttp-proxy-middleware
const express=require('express')
const app=express()
app.listen(5000)
const httpProxyMiddleware=require('http-proxy-middleware')
// 服務器代理 ---接口中間層 代理層
app.use('/api' ,httpProxyMiddleware.createProxyMiddleware({
// 代理的地址
target:'http://localhost:8989',
// 默認false不修改。修改代理請求是他的主機名
changeOrigin:true,
// 修改響應頭信息，實現跨域並允許帶cookie
onProxyRes: function(proxyRes, req, res) {
res.header('Access-Control-Allow-Origin', 'http://localhost:5000');
res.header('Access-Control-Allow-Credentials', 'true');
},
// 匹配規則
pathRewrite:{
// 訪問路徑 映射到 目標服務器中的路徑
'^/v1/api':'/'
}
}))
2、vue框架的跨域
vue中實現開發環境的時的反向代理進行跨域解決，在項目根目錄下面創建一個vue.config.js文件，寫下如下代碼
vue.config.js部分配置：
module.exports={
// 指定服務器模塊
devServer:{
// 代理
proxy:{
'/v1/api':{
// 目標地址
target:'http://localhost:3000',
changeOrigin:true,
pathRewrite:{
'/v1/api':'/api'
}
}
}
}
}
五、document.domain + iframe跨域
前提條件
這兩個域名必須屬於同一個一級域名!而且所用的協議，端口都要一致，否則無法利用document.domain進行跨域。
Javascript出於對安全性的考慮，而禁止兩個或者多個不同域的頁面進行互相操作。
而相同域的頁面在相互操作的時候不會有任何問題。
alert(document.domain = "baidu.com"); //"baidu.com"
alert(document.domain = "www.baidu.com"); //"www.baidu.com"
舉例
1）父窗口：(http://father.baidu.com/a.html)
<iframe id="iframe" src="http://child.baidu.com/b.html"></iframe>
<script>
document.domain = 'baidu.com';
var user = 'admin';
</script>
預覽
1）子窗口：(http://child.baidu.com/b.html)
<script>
document.domain = 'baidu.com';
// 獲取父窗口中變量
console.log('get js data from parent ---> ' + window.parent.user);
</script>
六、location.hash + iframe跨域
hash 屬性是一個可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號開始的部分）。
實現原理
- a想要與b跨域相互通信，通過中間頁c來實現。
- 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。
- 利用location.hash傳值,創建定時器，堅持hash的變化，執行相應的操作。
下面我們來完成一個案例：
具體實現
- A域：a.html -> B域：b.html -> A域：c.html
- a與b不同域只能通過hash值單向通信，b與c也不同域也只能單向通信，但c與a同域，所以c可通過parent.parent訪問a頁面所有對象。
1）a.html：(http://www.baidu1.com/a.html)
<iframe id="iframe" src="http://www.baidu2.com/b.html" style="display:none;"></iframe>
<script>
var iframe = document.getElementById('iframe');
// 向b.html傳hash值
setTimeout(function() {
iframe.src = iframe.src + '#user=admin';
}, 1000);
// 開放給同域c.html的回調方法
function onCallback(res) {
alert('data from c.html ---> ' + res);
}
</script>
2）b.html：(http://www.baidu2.com/b.html)
<iframe id="iframe" src="http://www.baidu1.com/c.html" style="display:none;"></iframe>
<script>
var iframe = document.getElementById('iframe');
// 監聽a.html傳來的hash值，再傳給c.html
window.onhashchange = function () {
iframe.src = iframe.src + location.hash;
};
</script>
3）c.html：(http://www.baidu1.com/c.html)
<script>
// 監聽b.html傳來的hash值
window.onhashchange = function () {
// 再通過操作同域a.html的js回調，將結果傳回
window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
};
</script>
優缺點
-
location.hash + iframe跨域的優點：
- 可以解決域名完全不同的跨域
- 可以實現雙向通訊
-
location.hash + iframe跨域的缺點：
- location.hash會直接暴露在URL里，並且在一些瀏覽器里會產生歷史記錄，數據安全性不高也影響用戶體驗
- 另外由於URL大小的限制，支持傳遞的數據量也不大。
七、window.name + iframe解決跨域
window.name屬性的獨特之處：只要在一個window下，無論url怎么變化，只要設置好了window.name，那么后續就一直都不會改變。同理，在iframe中，即使url在變化，iframe中的window.name也是一個固定的值，利用這個，我們就可以實現跨域了（2MB）。
舉例
test1.html
<body>
<h2>test1頁面</h2>
<iframe src="http://192.168.0.1/php_demo/test2.html" frameborder="1"></iframe>
<script>
var ifr = document.querySelector('iframe')
ifr.style.display = 'none'
var flag = 0;
ifr.onload = function () {
console.log('跨域獲取數據', ifr.contentWindow.name);
ifr.contentWindow.close();
}
</script>
</body>
test2.html
<body>
<h2>test2頁面</h2>
<script>
var person = {
name: '大鵬_yp',
age: 24,
school: 'lngydx'
}
window.name = JSON.stringify(person)
</script>
</body>
通過iframe的src屬性由外域轉向本地域，跨域數據即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作。
八、postMessage通信跨域
- 在HTML5中新增了postMessage方法，postMessage可以實現跨文檔消息傳輸（Cross Document Messaging）
- 該方法可以通過綁定window的message事件來監聽發送跨文檔消息傳輸內容。
-
它可用於解決以下方面的問題：
a. 頁面和其打開的新窗口的數據傳遞
b. 多窗口之間消息傳遞
c. 頁面與嵌套的iframe消息傳遞
d. 上面三個場景的跨域數據傳遞 -
postMessage用法：
postMessage(data,origin)方法接受兩個參數參數說明：
- data： html5規范支持任意基本類型或可復制的對象，但部分瀏覽器只支持字符串，所以傳參時最好用JSON.stringify()序列化。
- origin： 協議+主機+端口號，也可以設置為"*"，表示可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"。
舉例
- postMessage：發送
- onmessage：接收
1）a.html：(http://www.baidu1.com/a.html)
<iframe id="iframe" src="http://www.baidu2.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.baidu2.com');
};
// 接受baidu2返回數據
window.addEventListener('message', function(e) {
alert('data from baidu2 ---> ' + e.data);
}, false);
</script>
2）b.html：(http://www.baidu2.com/b.html)
<script>
// 接收baidu1的數據
window.addEventListener('message', function(e) {
alert('data from baidu1 ---> ' + e.data);
var data = JSON.parse(e.data);
if (data) {
data.number = 16;
// 處理后再發回baidu1
window.parent.postMessage(JSON.stringify(data), 'http://www.baidu1.com');
}
}, false);
</script>
九、WebSocket協議跨域
- WebSocket protocol是HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通信，同時允許跨域通訊，是server push技術的一種很好的實現。
- 原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。
WebSocket 如何工作
Web瀏覽器和服務器都必須實現 WebSockets 協議來建立和維護連接。由於 WebSockets 連接長期存在，與典型的HTTP連接不同，對服務器有重要的影響。
基於多線程或多進程的服務器無法適用於 WebSockets，因為它旨在打開連接，盡可能快地處理請求，然后關閉連接。任何實際的 WebSockets 服務器端實現都需要一個異步服務器。
案例
1）前端代碼：
<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.baidu2.com:8080');
// 連接成功處理
socket.on('connect', function() {
// 監聽服務端消息
socket.on('message', function(msg) {
console.log('data from server: ---> ' + msg);
});
// 監聽服務端關閉
socket.on('disconnect', function() {
console.log('Server socket has closed.');
});
});
document.getElementsByTagName('input')[0].onblur = function() {
socket.send(this.value);
};
</script>
2）Nodejs socket后台：
var http = require('http');
var socket = require('socket.io');
// 啟http服務
var server = http.createServer(function(req, res) {
res.writeHead(200, {
'Content-type': 'text/html'
});
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
// 監聽socket連接
socket.listen(server).on('connection', function(client) {
// 接收信息
client.on('message', function(msg) {
client.send('hello：' + msg);
console.log('data from client: ---> ' + msg);
});
// 斷開處理
client.on('disconnect', function() {
console.log('Client socket has closed.');
});
});