瀏覽器同源策略以及Script Error錯誤

本文首發於知乎 《瀏覽器同源策略以及Script Error錯誤》 ，搬運轉載請註明出處，不然追究版權責任。

同源策略限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。

一個源的定義

若是兩個頁面的協議，端口（若是有指定）和域名都相同，則兩個頁面具備相同的源。

下表給出了相對http://store.company.com/dir/page.html同源檢測的示例:

URL	結果	緣由
http://store.company.com/dir2/other.html	成功
http://store.company.com/dir/inner/another.html	成功
https://store.company.com/secure.html	失敗	不一樣協議 ( https和http )
http://store.company.com:81/dir/etc.html	失敗	不一樣端口 ( 81和80)
http://news.company.com/dir/other.html	失敗	不一樣域名 ( news和store )

源的繼承

data：URLs得到一個新的，空的安全上下文。

在頁面中用 about:blank 或 javascript: URL 執行的腳本會繼承打開該 URL 的文檔的源，由於這些類型的 URLs 沒有明確包含有關原始服務器的信息。

例如，about:blank 一般做爲父腳本寫入內容的新的空白彈出窗口的 URL（例如，經過  Window.open()  機制）。 若是此彈出窗口也包含代碼，則該代碼將繼承與建立它的腳本相同的源。data: URL會獲得一個新的空的安全上下文。

script標籤的crossorigin屬性

crossorigin的屬性值能夠是anonymous、use-credentials，若是沒有屬性值或者非法屬性值，會被瀏覽器默認作anonymous。crossorigin的做用有三個：

1. crossorigin會讓瀏覽器啓用CORS訪問檢查，檢查http相應頭的Access-Control-Allow-Origin

2. 對於傳統script須要跨域獲取的js資源，控制暴露出其報錯的詳細信息

3. 對於module script，控制用於跨域請求的憑據模式

咱們在收集錯誤日誌的時候，一般會在window上註冊一個方法來監測全部代碼拋出的異常：

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，不然資源沒法訪問。

爲何錯誤信息要遵照同源策略？

若是你在訪問一個惡意網站，頁面上有一段<script src="yourbank.com/index.html">，當發生了腳本錯誤，錯誤信息可能會透露出你是否已經登陸了（若是你已經登陸了，錯誤信息多是 「歡迎 Fred...」 is undefined，若是你沒登陸，錯誤信息多是「請登陸...」 is undefined 之類的）。若是這個惡意網站對不少銀行機構進行了該行爲，他們很容易就知道你是在訪問哪家銀行，就能作出更具備針對性的釣魚頁面。