1. 程式人生 > ><script> 屬性crossorigin

<script> 屬性crossorigin

javascrip jquer ESS cor 告訴 就是 facebook 服務器 得出

今日偶然見到如下代碼:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" 
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

一般來說,我們幾乎都是直接使用<script src>標簽, 不怎麽加其他屬性的(目前我一直是這麽寫的,或許是我代碼寫的少嘛~~~~)

例如

	<script src="js/vendor/jquery-2.2.4.min.js"></script>

  首先我們了解下這兩個屬性的意思:

intergrity:腳本文件的密碼散列

crossorigin:跨域

1.關於intergrity,這篇文章寫的很好,這裏只做核心描述:--------------------傳送門----------->

許多網站都使用一套通用的JavaScript庫。為了節省帶寬及提高性能,它們會使用由第三方托管的JavaScript庫。jQuery是Web上最流行的JavaScript庫,截至2014年大約30%的網站都使用了它。其它流行的庫還有Facebook SDK、Google Analytics。如果一個網站包含了指向第三方托管JavaScript文件的script標簽,那麽該網站的所有訪問者都會下載該文件並執行它。如果攻擊者攻陷了這樣一個托管JavaScript文件的服務器,並向文件中添加了DDoS代碼,那麽所有訪問者都會成為DDoS攻擊的一部分,這就是服務器劫持

這種攻擊之所以有效是因為HTTP中缺少一種機制使網站能夠禁止被篡改的腳本運行。為了解決這一問題,W3C已經提議增加一個新特性子資源一致性。該特性允許網站告訴瀏覽器,只有在其下載的腳本與網站希望運行的腳本一致時才能運行腳本。這是通過密碼散列實現的。這就是守門神:integrity=文件指紋

密碼散列可以唯一標識一個數據塊,任何兩個文件的密碼散列均不相同。屬性integrity提供了網站希望運行的腳本文件的密碼散列瀏覽器在下載腳本後會計算它的散列,然後將得出的值與integrity提供的值進行比較。如果不匹配,則說明目標腳本被篡改,瀏覽器將不使用它。

2.crossorign

從谷歌的結果來看,比較一致的說法是,引入跨域的腳本(比如用了 apis.google.com 上的庫文件),如果這個腳本有錯誤,因為瀏覽器的限制(根本原因是協議的規定),是拿不到錯誤信息的。當本地嘗試使用 window.onerror

去記錄腳本的錯誤時,跨域腳本的錯誤只會返回 Script error

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

<script> 屬性crossorigin