本文首發(fā)于知乎 《瀏覽器同源策略以及Script Error錯誤》 摊聋,搬運轉(zhuǎn)載請注明出處凭峡,否則追究版權責任族展。
同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的重要安全機制霞掺。<br />
一個源的定義
如果兩個頁面的協(xié)議砸紊,端口(如果有指定)和域名都相同,則兩個頁面具有相同的源囱挑。
下表給出了相對http://store.company.com/dir/page.html
同源檢測的示例:
URL | 結(jié)果 | 原因 |
---|---|---|
http://store.company.com/dir2/other.html |
成功 | |
http://store.company.com/dir/inner/another.html |
成功 | |
https://store.company.com/secure.html |
失敗 | 不同協(xié)議 ( https和http ) |
http://store.company.com:81/dir/etc.html |
失敗 | 不同端口 ( 81和80) |
http://news.company.com/dir/other.html |
失敗 | 不同域名 ( news和store )<br /> |
源的繼承
data:URLs獲得一個新的醉顽,空的安全上下文。
在頁面中用 about:blank
或 javascript:
URL 執(zhí)行的腳本會繼承打開該 URL 的文檔的源平挑,因為這些類型的 URLs 沒有明確包含有關原始服務器的信息游添。
例如,about:blank
通常作為父腳本寫入內(nèi)容的新的空白彈出窗口的 URL(例如通熄,通過 Window.open() 機制)唆涝。 如果此彈出窗口也包含代碼,則該代碼將繼承與創(chuàng)建它的腳本相同的源唇辨。data:
URL會得到一個新的空的安全上下文廊酣。
script標簽的crossorigin屬性
crossorigin的屬性值可以是anonymous
、use-credentials
赏枚,如果沒有屬性值或者非法屬性值亡驰,會被瀏覽器默認做anonymous
。crossorigin的作用有三個:
crossorigin會讓瀏覽器啟用CORS訪問檢查饿幅,檢查http相應頭的Access-Control-Allow-Origin
對于傳統(tǒng)script需要跨域獲取的js資源凡辱,控制暴露出其報錯的詳細信息
對于
module script
,控制用于跨域請求的憑據(jù)模式
我們在收集錯誤日志的時候栗恩,通常會在window上注冊一個方法來監(jiān)測所有代碼拋出的異常:
window.addEventListener('error', function(msg, url, lineno, colno, error) {
var string = msg.toLowerCase()
var substring = "script error"
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail')
} else {
var message = {
Message: msg,
URL: url,
Line: lineNo,
Column: columnNo,
'Error object': JSON.stringify(error)
}
// send error log to server
record(message)
}
return false
})
但是對于跨域js來說透乾,只會給出很少的報錯信息:'error: script error',通過使用crossorigin
屬性可以使跨域js暴露出跟同域js同樣的報錯信息磕秤。但是乳乌,資源服務器必須返回一個 Access-Control-Allow-Origin
的header,否則資源無法訪問市咆。
為什么錯誤信息要遵守同源策略钦扭?
如果你在訪問一個惡意網(wǎng)站,頁面上有一段<script src="yourbank.com/index.html">
床绪,當發(fā)生了腳本錯誤客情,錯誤信息可能會透露出你是否已經(jīng)登錄了(如果你已經(jīng)登錄了其弊,錯誤信息可能是 “歡迎 Fred...” is undefined,如果你沒登錄膀斋,錯誤信息可能是“請登錄...” is undefined 之類的)梭伐。如果這個惡意網(wǎng)站對很多銀行機構(gòu)進行了該行為,他們很容易就知道你是在訪問哪家銀行仰担,就能做出更具有針對性的釣魚頁面糊识。