HTML5 script 標簽的 crossorigin 和integrity屬性的作用


Bootstrap 4 依賴的基礎庫中出現了兩個新的屬性

1 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
2 <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
3 <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 HTML5 新的規定,是可以允許本地獲取到跨域腳本的錯誤信息,但有兩個條件:一是跨域腳本的服務器必須通過 Access-Controll-Allow-Origin 頭信息允許當前域名可以獲取錯誤信息,二是當前域名的  script  標簽也必須指明 src 屬性指定的地址是支持跨域的地址,也就是 crossorigin 屬性。聽名字也知道是跨域的時候用的屬性,加載本地靜態文件根本就不牽涉跨域的問題,所以本地就不應該用它(理論上使用也沒關系,但瀏覽器就是這么定的,印象中如果 crossorigin 用在了本地文件上,瀏覽器報錯信息會告訴你 crossorigin 只能支持 http/https/… 等協議上,所以你非要加載本地靜態文件也不是沒辦法,只能自建本地 web 服務器然后地址寫帶 scheme 和 host 的完全絕對路徑)。

另外除了  script ,所有能引入跨域資源的標簽包括  link  和  img  之類,都有一樣的屬性。

integrity (大部分情況)是給 CDN 的靜態文件使用的,比如大名鼎鼎的 ajax.googleapis.com,或者國內的 cdn.bootcss.com。CDN雖然好但 CDN 有可能被劫持,導致下載的文件是被篡改過的(比如通過 DNS 劫持),有了 integrity 就可以檢查文件是否是原版。但因為本地文件用的域名跟網頁是同一個域名,不存在劫持的問題(或者劫持就連網站本身一起被劫持了,那就不是 integrity 能解決的問題了),所以本地靜態文件沒有太大必要用這個屬性。

當然,還有一種情況是你自己搭了一套提供靜態文件的獨立站點,這個時候用 integrity 是有意義。MDN 文檔里也提到了 integrity 值的生成方式,這里也再引用一下:

或者

總之簡單一句話:只有當你的網頁域名和要載入的靜態文件存放的站點域名不一樣的時候,使用這兩個屬性才有意義(並且因瀏覽器的規定 crossorigin 屬性只有這個時候才能正常使用)。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM