一、瀏覽器介紹
對(duì)于Web應(yīng)用來(lái)說(shuō)，瀏覽器是最重要的客戶(hù)端。
目前瀏覽器五花八門(mén)多得不得了，除了Chrome、IE、Firefox、Safari、Opera這些國(guó)外的瀏覽器外，百度、騰訊、360、淘寶、搜狗、傲游之類(lèi)的，反正能做的都做了。
瀏覽器雖然這么多，但瀏覽器內(nèi)核主要就以下4種：
- Trident：IE使用的內(nèi)核。
- Gecko：Firefox使用的內(nèi)核。
- WebKit：Safair和Chrome使用的內(nèi)核。WebKit由蘋(píng)果發(fā)明，Chrome也用了，但是Google又開(kāi)發(fā)了V8引擎替換掉了WebKit中的Javascript引擎。
- Presto：Opera使用的內(nèi)核。
國(guó)內(nèi)的瀏覽器基本都是雙核瀏覽器，使用基于WebKit的內(nèi)核高速瀏覽常用網(wǎng)站，使用Trident內(nèi)核兼容網(wǎng)銀等網(wǎng)站。
二、同源策略
同源策略是瀏覽器最基本的安全策略，它認(rèn)為任何站點(diǎn)的內(nèi)容都是不安全的，所以當(dāng)腳本運(yùn)行時(shí)，只被允許訪問(wèn)來(lái)自同一站點(diǎn)的資源。
同源是指域名、協(xié)議、端口都相同。
如果沒(méi)有同源策略，就會(huì)發(fā)生下面這樣的問(wèn)題：
惡意網(wǎng)站用一個(gè)iframe把真實(shí)的銀行登錄頁(yè)放到他的頁(yè)面上，當(dāng)用戶(hù)使用用戶(hù)名密碼登錄時(shí)，父頁(yè)面的javascript就可以讀取到銀行登錄頁(yè)表單中的內(nèi)容。
甚至瀏覽器的1個(gè)Tab頁(yè)打開(kāi)了惡意網(wǎng)站，另一個(gè)Tab頁(yè)打開(kāi)了銀行網(wǎng)站，惡意網(wǎng)站中的javascript可以讀取到銀行網(wǎng)站的內(nèi)容。這樣銀行卡和密碼就能被輕易拿走。
三、跨域訪問(wèn)
由于同源策略的原因，瀏覽器對(duì)跨域訪問(wèn)做了很多限制，但有時(shí)我們的確需要做跨域訪問(wèn)，那要怎么辦？主要有以下幾種情況：
1. iframe的跨域訪問(wèn)
同域名下，父頁(yè)面可以通過(guò)document.getElementById(‘_iframe’).contentWindow.document訪問(wèn)子頁(yè)面的內(nèi)容，但不同域名下會(huì)出現(xiàn)類(lèi)似下面的錯(cuò)誤：
Uncaught SecurityError: Blocked a frame with origin “http://a.com” from accessing a frame with origin “http://b.com”. Protocols, domains, and ports must match.
有兩種解決方法：
1). 當(dāng)主域名相同，子域名不同時(shí)，比較容易解決，只需設(shè)置相同的document.domain即可。
如http://a.a.com/a.html使用iframe載入http://b.a.com/b.html，且在a.html中有Javascript要修改b.html中元素的內(nèi)容時(shí)，可以像下面的代碼那樣操作。
a.html
<html>
<head>
<script>
document.domain = 'a.com';
function changeIframeContent() {
var _iframe = document.getElementById('_iframe');
var _p = _iframe.contentWindow.document.getElementById('_p');
_p.innerHTML = 'Content from a.html';
}
</script>
</head>
<body>
<iframe id="_iframe" src="http://b.a.com/demo/iframe/subdomain/b.html"></iframe>
<br>
<input type="button" value="Change iframe content" onclick="changeIframeContent();"/>
</body>
</html>
b.html
<html>
<head>
<script>
document.domain = 'a.com';
</script>
</head>
<body>
<p id="_p">b.html</p>
</body>
</html>
2). 當(dāng)主域名不同時(shí)，就非常麻煩了。大致的方法像下面描述的那樣：
- a.com下有a.html；
- a.html創(chuàng)建iframe加載b.com下的b.html，可在加載b.html時(shí)通過(guò)?或#將參數(shù)傳遞到b.html中；
- b.html加載后，可以通過(guò)提取location.search或location.hash中的內(nèi)容獲取a.html傳過(guò)來(lái)的參數(shù)；
- b.html創(chuàng)建一個(gè)iframe，加載a.com下的c.html，并且參數(shù)也通過(guò)?或#傳給c.html；
- 因?yàn)閏.html和a.html是相同域名，所以c.html可以使用parent.parent訪問(wèn)到a.html的對(duì)象，這樣也就可以將b.html需要傳遞的參數(shù)傳回到a.html中。
2. Ajax的跨域訪問(wèn)
Ajax主要通過(guò)XMLHttpRequest對(duì)象實(shí)現(xiàn)，但是如果通過(guò)XMLHttpRequest訪問(wèn)不同域名下的數(shù)據(jù)，瀏覽器會(huì)出現(xiàn)類(lèi)似下面的錯(cuò)誤：
XMLHttpRequest cannot load http://b.com/demo/iframe/ajax/b.html. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://a.com’ is therefore not allowed access.
這時(shí)可由以下兩種方法解決：
1). 使用<script>代替XMLHttpRequest，也就是JSONP的方法。利用<script>標(biāo)簽的src下加載的js不受同源策略限制，并且加載后的js運(yùn)行在當(dāng)前頁(yè)面的域下，所以可自由操作當(dāng)前頁(yè)面的內(nèi)容。
下面的代碼演示了在a.com下的a.html通過(guò)b.com下的b.js中的內(nèi)容來(lái)更新自身的p標(biāo)簽。
a.html
<html>
<head>
<script>
function update_p (content) {
document.getElementById("_p").innerHTML = content;
}
function getFromB() {
var _script = document.createElement("script");
_script.type = "text/javascript";
_script.src = "http://b.com/demo/ajax/b.js";
document.getElementsByTagName("head")[0].appendChild(_script);
}
</script>
</head>
<body>
<p id="_p">a.html</p>
<input type="button" value="Get from b.com" onclick="getFromB()"/>
</body>
</html>
b.js
update_p("content from b.js");
在實(shí)際使用中，通常a.html會(huì)將update_p以callback參數(shù)名傳遞給b.com的服務(wù)器，服務(wù)器動(dòng)態(tài)生成數(shù)據(jù)后，再用callback參數(shù)值包起來(lái)作為響應(yīng)回傳給a.html。
2). 在b.com的服務(wù)器返回信息中增加以下頭信息：
- Access-Control-Allow-Origin: http://a.com
- Access-Control-Allow-Methods: GET
此時(shí)瀏覽器便允許a.com讀取使用GET請(qǐng)求b.com的內(nèi)容。
對(duì)于flash來(lái)說(shuō)，會(huì)要求在網(wǎng)站根目錄下放一個(gè)名為crossdomain.xml的文件，以指明允許訪問(wèn)的域名來(lái)源。文件中的內(nèi)容類(lèi)似下面的樣子：
<cross-domain-policy>
<allow-access-from domain="*.a.com" />
</cross-domain-policy>
3. 使用HTML5的postMessage方法實(shí)現(xiàn)跨域訪問(wèn)
HTML5增加了跨文檔消息傳輸，下面的例子實(shí)現(xiàn)了使用postMessage在不同域間傳遞消息：
a.html
<html>
<head>
<script>
function update_b () {
var _iframe = document.getElementById("_iframe");
_iframe.contentWindow.postMessage("content from a.html", "http://b.com");
}
</script>
<head>
<body>
<iframe id="_iframe" src="http://b.com/demo/html5/b.html"></iframe>
<br>
<input type="button" value="Update b.html" onclick="update_b()"></input>
</body>
</html>
b.html
<html>
<head>
<script>
window.addEventListener("message", function (event) {
document.getElementById("_p").innerHTML = event.data;
}, false);
</script>
</head>
<body>
<p id="_p">b.html</p>
</body>
</html>
在postMessage中要指定接收方的域名，如果發(fā)現(xiàn)目標(biāo)頁(yè)面的域名不正確，將拋出類(lèi)似下面這樣的錯(cuò)誤：
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘http://c.com’) does not match the recipient window’s origin (‘http://b.com’).
瀏覽器對(duì)跨域訪問(wèn)的限制是出于安全考慮的，所以在使用一些方法實(shí)現(xiàn)跨域訪問(wèn)時(shí)要特別小心。