題目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ù)
霜浴，作跨頁面通信更加適合.
