Bootstrap 4?依賴的基礎(chǔ)庫中出現(xiàn)了兩個(gè)新的屬性

1

2

3

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

另外除了??script?，所有能引入跨域資源的標(biāo)簽包括??link??和?img?之類，都有一樣的屬性。

integrity (大部分情況)是給 CDN 的靜態(tài)文件使用的，比如大名鼎鼎的 ajax.googleapis.com，或者國內(nèi)的 cdn.bootcss.com。CDN雖然好但 CDN 有可能被劫持，導(dǎo)致下載的文件是被篡改過的(比如通過 DNS 劫持)，有了 integrity 就可以檢查文件是否是原版。但因?yàn)楸镜匚募玫挠蛎W(wǎng)頁是同一個(gè)域名，不存在劫持的問題(或者劫持就連網(wǎng)站本身一起被劫持了，那就不是 integrity 能解決的問題了)，所以本地靜態(tài)文件沒有太大必要用這個(gè)屬性。

當(dāng)然，還有一種情況是你自己搭了一套提供靜態(tài)文件的獨(dú)立站點(diǎn)，這個(gè)時(shí)候用 integrity 是有意義。MDN 文檔里也提到了 integrity 值的生成方式，這里也再引用一下：

1 cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A

或者

1 shasum -b -a 384 FILENAME.js | awk '{ print $1 }' | xxd -r -p | base64

總之簡單一句話：只有當(dāng)你的網(wǎng)頁域名和要載入的靜態(tài)文件存放的站點(diǎn)域名不一樣的時(shí)候，使用這兩個(gè)屬性才有意義(并且因?yàn)g覽器的規(guī)定 crossorigin 屬性只有這個(gè)時(shí)候才能正常使用)。

原文出處：https://www.cnblogs.com/ihuangqing/p/10717018.html

總結(jié)

以上是生活随笔為你收集整理的html css integrity,HTML5 script 标签的 crossorigin 和integrity属性的作用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。