同源策略
同源策略：瀏覽器出于安全性的考量而制定的策略缭召，只允許與本域下的接口交互。> 不同源的客戶端腳本在沒有明確授權的情況下偷仿，不能讀寫對方資源鸵赫。默認情況下衣屏，XHR對象只能訪問與包含它的頁面位于同一個域中的資源，即限制了來自不同源的"document"或腳本對當前"document"讀取或設置某些屬性辩棒。
它是由Netscape提出的一個著名的安全策略±浅溃現(xiàn)在所有支持JavaScript 的瀏覽器都會使用這個策略。它限制了某個域下的文檔或者js與另一個域中的資源交互的方式一睁，它提供了一種安全機制钻弄，這種安全機制可以避免來自惡意網(wǎng)站的攻擊。 同源策略要求瀏覽器當且僅當兩個頁面來自相同的域才允許其中一個網(wǎng)頁上的js請求另一個網(wǎng)頁的數(shù)據(jù)
URL(document.URL)由協(xié)議(http/https/file/ftp)者吁、域名(doucment.domain)窘俺、端口(port:3000/4000/80/8080)、還有路徑組成复凳，如果兩個URL的協(xié)議批销、域名洒闸、端口(URL組成部分前3個）相同，則表示他們同源均芽。
- 協(xié)議類型（URI Schema）
- 相同域名（host name）
- 相同端口號（port number）
目的:
是出于安全性考慮丘逸，它能夠阻止來自惡意網(wǎng)站的腳本通過其他網(wǎng)站的DOM獲取其他網(wǎng)站的信息∠扑危可以避免CSRF和XSS攻擊深纲。
限制:
同源策略限制的是瀏覽器或者其他提供類似瀏覽器服務的軟件，而且這僅僅是個規(guī)范劲妙；
同源策略只是限制JavaScript湃鹊，而圖片，css這些是不存在同源策略限制的镣奋。
跨域 & 跨域實現(xiàn)形式
跨域顧名思義就是突破同源策略的限制币呵，去不同的域下訪問數(shù)據(jù)。 在某網(wǎng)站的頁面上通過js請求其他網(wǎng)站的數(shù)據(jù)侨颈，如兩個網(wǎng)站不滿足同源策略余赢，那么該請求是為跨域.
- 如下幾種實現(xiàn)形式：
- JSONP
- CORS
- 降域
- PostMessage
JSONP
首先在客戶端聲明一個callback, 然后把callback的名字傳給服務器。此時哈垢，服務器先生成 JSON 數(shù)據(jù)妻柒。然后以 javascript 語法的方式，生成一個function , function 名字就是傳遞上來的參數(shù)JSONP.最后將 JSON數(shù)據(jù)直接以入?yún)⒌姆绞皆欧郑胖玫絗function 中举塔，這樣就生成了一段 js 語法的文檔，返回給客戶端求泰⊙朐客戶端瀏覽器，解析script標簽渴频，并執(zhí)行返回的 javascript 文檔痹屹，此時數(shù)據(jù)作為參數(shù)，傳入到了客戶端預先定義好的 callback 函數(shù)里.（動態(tài)執(zhí)行回調函數(shù)）
CORS
跨域資源共享（ CORS ）機制允許 Web 應用服務器進行跨域訪問控制枉氮，從而使跨域數(shù)據(jù)傳輸?shù)靡园踩M行志衍。瀏覽器支持在 API 容器中（例如 XMLHttpRequest
或 Fetch ）使用 CORS，以降低跨域 HTTP 請求所帶來的風險聊替。CORS 需要客戶端和服務器同時支持楼肪。目前，所有瀏覽器都支持該機制惹悄。
- 使用XMLHttpRequest發(fā)送請求,如不同源,如后臺有設置返回結果加入響應頭: Access-Control-Allow-Origin;包含Origin的值...那么即可拿到響應數(shù)據(jù)..如無包含則被瀏覽器駁回...代碼與Ajax一樣.
Method.
1. JSONP:
<pre>
//在file協(xié)議下測試跨域 <script> $('.change').addEventListener('click', function() { var script = document.createElement('script'); //請求服務器地點 + callback=appendHtml(告訴服務器用此打包) script.src = 'http://localhost:8080/getNews?callback=appendHtml'; document.head.appendChild(script); document.head.removeChild(script); }) //設置好函數(shù).(等待數(shù)據(jù)來臨) function appendHtml(news) { var html = ''; for( var i=0; i<news.length; i++ ) { html += '<li>' + news[i] + '</li>'; } console.log(html); $('.news').innerHTML = html; } function $(id){ return document.querySelector(id); } </script> //Server: app.get('/getNews', function(req, res){ var news = ['one','two','thr','fou','fiv','six','sev','eig','nin'] var data = [];//新數(shù)組 for(var i=0; i<3; i++){ //for循環(huán)遍歷 var index = parseInt(Math.random()*news.length);//隨機取0~7作為下標 data.push(news[index]);//推入 news.splice(index, 1);//news.length降一 } var cb = req.query.callback;// if(cb){ res.send(cb + '('+ JSON.stringify(data) + ')');//轉換為一個JSON字符串,并發(fā)送 }else{ res.send(data); } })
</pre>
2. CORS:
<pre>
`
<script>
//監(jiān)聽事件
$('.change').addEventListener('click', function(){
//Ajax
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://localhost:8080/getNews', true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
appendHtml( JSON.parse(xhr.responseText) ) //使用JSON解析響應數(shù)據(jù)
}
}
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
</script>
//Server:
app.get('/getNews', function(req, res){
var news = []
var data = [];
for(var i=0; i<3; i++){
var index = parseInt(Math.random()*news.length);
data.push(news[index]);
news.splice(index, 1);
}
res.header("Access-Control-Allow-Origin", "http://AAA.com:8080"); //(只允許AAA的請求)
res.header("Access-Control-Allow-Origin", "*"); //允許任何請求(粗暴)
res.send(data);
})
`
</pre>
降域 _ Window.domain獲取/設置當前文檔的原始域部分, 用于 同源策略.
<pre>
//================a.html==================// <div class="main"> <input type="text" placeholder="......"> </div> <iframe src="a.b.com/b.html" frameborder="0" ></iframe> </div> <script> document.querySelector('.main input').addEventListener('input', function(){ console.log(this.value); window.frames[0].document.querySelector('input').value = this.value; }) document.domain = "b.com" </script> //================b.html==================// <script> document.querySelector('#input').addEventListener('input', function(){ window.parent.document.querySelector('input').value = this.value; }) document.domain = 'b.com'; 設置 </script>
</pre>
如果當前文檔的域無法識別春叫，那么domain屬性會返回null。
在根域范圍內(nèi)，Mozilla允許你把domain屬性的值設置為它的上一級域暂殖。例如价匠，在 developer.mozilla.org 域內(nèi)，可以把domain設置為 "mozilla.org" 但不能設置為 "mozilla.com" 或者"org"呛每。
Mozilla 會區(qū)分 document.domain
屬性 **從沒有被設定過值 **和 被顯示的設定為跟該文檔的URL的domain一致的值踩窖，盡管這兩種狀況下，該屬性會返回同樣的值晨横。兩個文檔洋腮，只有在 document.domain
都被設定為同一個值，表明他們打算協(xié)作手形；或者都沒有設定 document.domain
屬性并且URL的域是一致的 (如何判斷一致)啥供，這兩種條件下，一個文檔才可以去訪問另一個文檔库糠。如果不是因為這個特殊的策略伙狐，每一個站點都會成為他的子域的XSS攻擊的對象（例如，https://bugzilla.mozilla.org 可以被來自 https://bug*.bugzilla.mozilla.org 站點的bug附件攻擊）瞬欧。
PostMessage
<pre>
`
//===============a.html================//
<div class="ct">
<h1>使用postMessage實現(xiàn)跨域</h1>
<div class="main">
<input type="text" placeholder="...">
</div>
<iframe src="a.abc.com" frameborder="0" ></iframe>//模擬的一個網(wǎng)址
</div>
<script>
$('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].postMessage(this.value,'*');
})
function $(id){
return document.querySelector(id);
}
</script>
//===============b.html================//
<script>
$('#input').addEventListener('input', function(){
window.parent.postMessage(this.value, '*');
})
window.addEventListener('message',function(e) {
$('#input').value = e.data
console.log(e.data);
});
function $(id){
return document.querySelector(id);
}
</script>
`
</pre>
-
JSONP相對危險... -
CORS把Access-Control-Allow-Origin關閉就不能訪問了. - 降域 降了一級贷屎，達成同源
-
window.postMessage()是指定給一個域名發(fā)送了請求，發(fā)送你想要的東西黍判，你只需要接受就行了。當然你拒絕不要扔了也是可以的
