1、script標(biāo)簽 crossorigin 屬性
script標(biāo)簽去請求資源的時候螟凭,request是沒有origin頭的座享。
script標(biāo)簽請求跨域資源的時候,內(nèi)部運行如果報錯的話晶通,window.onerror 捕獲的時候,內(nèi)部的error.message只能看到Script error.看不到完整的錯誤內(nèi)容哟玷。這個應(yīng)該是瀏覽器的安全策略狮辽。
window.addEventListener('error', function(msg, url, lineno, colno, error) {
console.log('error catch:', msg.message);
return false
})
設(shè)置 crossorigin屬性后
①、script標(biāo)簽去請求資源的時候,request會帶上origin頭喉脖,然后會要求服務(wù)器進行 cors校驗椰苟,跨域的時候如果response header 沒有 ‘Access-Control-Allow-Origin’ 是不會拿到資源的。cors驗證通過后树叽,拿到的script運行內(nèi)部報錯的話舆蝴,window.onerror 捕獲的時候,內(nèi)部的error.message可以看到完整的錯誤信息题诵。
crossorigin的屬性值分為 anonymous和use-credentials洁仗。如果設(shè)置了crossorigin屬性,但是屬性值不正確的話仇轻,默認是anonymous京痢。
②奶甘、anonymous代表同域會帶上cookie篷店,跨域則不帶上cookie,相當(dāng)于 fecth請求的credentials: 'same-origin'臭家。
③疲陕、use-credentials跨域也會帶上cookie,相當(dāng)于fetch請求的 credentials: 'include'钉赁,這種情況下跨域的response header 需要設(shè)置'Access-Control-Allow-Credentials' = true蹄殃,否則cors失敗。
2你踩、integrity安全驗證
引入遠程文件存在一個問題诅岩,如果對應(yīng)的文件被篡改了,那么可能會對用戶造成影響带膜。雖然cdn一般都是可靠的吩谦,但是不排除受到黑客的攻擊。
integrity屬性設(shè)置引入js文件的hash值膝藕,瀏覽器在下載js文件時候式廷,會對js文件進行hash計算,如果一致則正常加載芭挽,否則拒絕加載運行滑废。
生成hash值的工具地址
integrity="sha384-*****"
src="https://cdn.xxx.xx/js/index.js"></script>
總結(jié)
①、設(shè)置了crossorigin就相當(dāng)于開啟了cors校驗袜爪。
②蠕趁、開啟cors校驗之后,跨域的script資源在運行出錯的時候辛馆,window.onerror可以捕獲到完整的錯誤信息俺陋。
③、crossorigin=use-credentials可以跨域帶上cookie。
④倔韭、integrity可以做遠程文件安全驗證