[轉]HTML5 script 標籤的 crossorigin 屬性到底有什麼用?

HTML5 script 標籤的 crossorigin 屬性到底有什麼用?

 

 

 

看起來比之前的寫法複雜好多的樣子。先不着急慢慢看,多了一個 integrity 屬性,看值的樣子就知道是用來驗證文件完整性的。另外還有一個 crossorigin 屬性……怎麼?直接經過 script 標籤加載網站外 JS 資源也要開始考慮跨域的問題了嗎?html

這裏不討論 script 裏 crossorigin 屬性怎麼用,以及服務器端如何支持此屬性,MDN 上的文檔已經說得很清楚。jquery

不知道你們對此新屬性的感受如何,個人第一感受是:新加了這麼一個屬性,難道是之前 script 不用 crossorigin 屬性的時候,會出什麼問題嗎?到底可能會出什麼問題呢?bootstrap

從谷歌的結果來看,比較一致的說法是,引入跨域的腳本(好比用了 apis.google.com 上的庫文件),若是這個腳本有錯誤,由於瀏覽器的限制(根本緣由是協議的規定),是拿不到錯誤信息的。當本地嘗試使用 window.onerror 去記錄腳本的錯誤時,跨域腳本的錯誤只會返回 Script errorapi

script error

但 HTML5 新的規定,是能夠容許本地獲取到跨域腳本的錯誤信息,但有兩個條件:一是跨域腳本的服務器必須經過 Access-Controll-Allow-Origin 頭信息容許當前域名能夠獲取錯誤信息,二是當前域名的 script 標籤也必須指明 src 屬性指定的地址是支持跨域的地址,也就是 crossorigin 屬性。跨域

cor script error

但事情仍是不夠明朗,看起來報個錯也沒什麼啊,爲何瀏覽器或者說協議這麼龜毛,非要規定默認頁面是不能獲取跨域腳本錯誤信息的呢?瀏覽器

這其實跟網絡安全有關,不妨舉一個例子來講明。安全

咱們先假設瀏覽器默承認以將跨域腳本的錯誤信息返回。服務器

這個時候我在個人博客裏寫下以下代碼:網絡

 

 

注意 src 裏面提到地址,都是 HTML 頁面的地址,當成 JS 來執行,確定是會報錯的。框架

由於咱們假設瀏覽器能報具體錯誤,這個錯誤多是相似於:

1. 「請登陸」 is undefined.
2. 「您好」 is undefined.

咱們經過報錯信息的不一致,可能能夠推斷出當前訪問我博客的會員在某某銀行是否有帳號。雖然不是什麼大問題,但隱私的確是泄漏了,若是我是攻擊者我可能會經過會員在某家銀行有帳號,『精準』推送相關的釣魚網站給他。

說清楚了前因後果,咱們就能夠更好的判斷,咱們是否真的須要給 script 標籤加上 crossorigin 屬性了。另外除了 script,全部能引入跨域資源的標籤包括 link 和 img 之類,都有同樣的屬性。

相關文章
相關標籤/搜索