題目1： 什么是同源策略
所謂"同源"指的是"三個相同"。協(xié)議相同、域名相同、端口相同。
同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。
設(shè)想這樣一種情況：A網(wǎng)站是一家銀行，用戶登錄以后，又去瀏覽其他網(wǎng)站。如果其他網(wǎng)站可以讀取A網(wǎng)站的 Cookie，會發(fā)生什么？
很顯然，如果 Cookie 包含隱私（比如存款總額），這些信息就會泄漏。更可怕的是，Cookie 往往用來保存用戶的登錄狀態(tài)，如果用戶沒有退出登錄，其他網(wǎng)站就可以冒充用戶，為所欲為。因?yàn)闉g覽器同時還規(guī)定，提交表單不受同源政策的限制。
由此可見，"同源政策"是必需的，否則 Cookie 可以共享，互聯(lián)網(wǎng)就毫無安全可言了。
隨著互聯(lián)網(wǎng)的發(fā)展，"同源政策"越來越嚴(yán)格。目前，如果非同源，共有三種行為受到限制。
（1） Cookie、LocalStorage 和 IndexDB 無法讀取。
（2） DOM 無法獲得。
（3） AJAX 請求不能發(fā)送。
題目2： 什么是跨域？跨域有幾種實(shí)現(xiàn)形式
跨域：從一個頁面去請求讀或者寫另一個頁面的資源，突破同源策略的限制。
跨域的幾種方式：
- 主域名相同，子域不同的，如：child.a.html和a.html可通過設(shè)置document.domain = a.html達(dá)到降域的目的，實(shí)現(xiàn)跨域訪問。問題：
1、安全性，當(dāng)一個站點(diǎn)（b.a.com）被攻擊后，另一個站點(diǎn)（c.a.com）會引起安全漏洞。
2、如果一個頁面中引入多個iframe，要想能夠操作所有iframe，必須都得設(shè)置相同domain。 - JSONP（json with padding）,只支持get請求，無法判斷請求是否失敗（不會返回各種HTTP狀態(tài)碼），安全性不高，假如提供jsonp的服務(wù)存在頁面注入漏洞，那么所有調(diào)用這個jsonp的網(wǎng)站都會存在漏洞。但它的兼容性很好，在許多老版本瀏覽器上都可以運(yùn)行，不想XMLHttpRequest對象實(shí)現(xiàn)的Ajax請求那樣收到同源策略的限制。
- CORS （cross-origin-resource-sharing）
- html5中新規(guī)定的window.postMessage來實(shí)現(xiàn)跨域。
題目3： JSONP 的原理是什么
原理是利用script標(biāo)簽的可跨域性，在網(wǎng)頁中動態(tài)的創(chuàng)建，并添加script標(biāo)簽，請求需要訪問的頁面資源的url，服務(wù)器將數(shù)據(jù)放在一個知道指定名字的回調(diào)函數(shù)給傳回來，由于網(wǎng)頁已經(jīng)定義的該函數(shù)，參數(shù)被返回后，便會立即執(zhí)行。
題目4： CORS是什么
CORS是一個W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。CORS需要瀏覽器和服務(wù)器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。因此，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。CORS與JSONP的使用目的相同，但是比JSONP更強(qiáng)大。JSONP只支持GET請求，CORS支持所有類型的HTTP請求。JSONP的優(yōu)勢在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請求數(shù)據(jù)。
題目5： 根據(jù)視頻里的講解演示三種以上跨域的解決方式
- 更改host文件
- 使用JSONP解決跨域
前端html中寫入JavaScript:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Task31</title>
</head>
<body>
<h3>JSONP跨域</h3>
<script>
window.jsonpFunction = function(data){
console.log(data);
}
var script = document.createElement('script');
script.src = "http://b.com/Ajax/advance13/advance13.php?callback=jsonpFunction";
document.body.appendChild(script);
</script>
</body>
</html>
后端php
$message = "檢測接收";
jsonpFunction($message);
- 使用CORS跨域
前端html中寫入JavaScript:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Task31</title>
</head>
<body>
<h1>演示跨域</h1>
<script src="jquery-1.11.1.js"></script>
<script>
$.ajax({
type: 'get',
url: '//b.com/Ajax/advance13/advance13.php',
dataType: 'text',
success: function (data) {
console.log(data);
},
error: function () {
console.log('error');
}
});
</script>
</body>
</html>
- 后端php
header("Access-Control-Allow-Origin: http://a.com");
$message = "檢測接收";
echo $message;
- postmessage跨域
在HTML5中新增了postMessage方法，postMessage可以實(shí)現(xiàn)跨文檔消息傳輸（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。
該方法可以通過綁定window的message事件來監(jiān)聽發(fā)送跨文檔消息傳輸內(nèi)容。
使用postMessage實(shí)現(xiàn)跨域的話原理就類似于jsonp，動態(tài)插入iframe標(biāo)簽，再從iframe里面拿回數(shù)據(jù)
，作跨頁面通信更加適合.
