動態(tài)導(dǎo)入script

JavaScript 代碼:

<script>
function loadError (error) {
  throw new URIError(`The script ${error.target.src}  is not accessible.`)
}
 
function importScript (src, onLoad) {
  var script = document.createElement('script')
  script.onerror = loadError
  script.async = false
  if (onLoad) { script.onload = onLoad }
  document.header.appendChild(script)
  script.src = src
}    
</script>

上面的方法動態(tài)加載js資源，注意，默認 append 到文檔中的 script 會異步執(zhí)行（可以理解為默認擁有 async 屬性，如果需要加載的js按順序執(zhí)行，需要設(shè)置 async 為 false ）

script 標簽的 integrity 屬性

<script crossorigin="anonymous" integrity="sha256-PJJrxrJLzT6CCz1jDfQXTRWOO9zmemDQbmLtSlFQluc=" src="https://assets-cdn.github.com/assets/frameworks-3c926bc6b24bcd3e820b3d630df4174d158e3bdce67a60d06e62ed4a515096e7.js"></script>

integrity 屬性是資源完整性規(guī)范的一部分，它允許你為 script 提供一個 hash，用來進行驗簽，檢驗加載的JavaScript 文件是否完整。
integrity="sha256-PJJrxrJLzT6CCz1jDfQXTRWOO9zmemDQbmLtSlFQluc=" 告訴瀏覽器，使用sha256簽名算法對下載的js文件進行計算，并與intergrity提供的摘要簽名對比，如果二者不一致，就不會執(zhí)行這個資源。
intergrity 的作用有：
減少由【托管在CDN的資源被篡改】而引入的XSS 風(fēng)險；
減少通信過程資源被篡改而引入的XSS風(fēng)險（同時使用https會更保險）
可以通過一些技術(shù)手段，不執(zhí)行有臟數(shù)據(jù)的CDN資源，同時去源站下載對應(yīng)資源；
注意：啟用 SRI 策略后，瀏覽器會對資源進行 CORS 校驗，這就要求被請求的資源必須同域，或者配置了 Access-Control-Allow-Origin 響應(yīng)頭；

script 標簽的 crossorigin 屬性

crossorigin 的屬性值可以是 anonymous、use-credentials，如果沒有屬性值或者非法屬性值，會被瀏覽器默認做anonymous。
crossorigin的作用有三個：
crossorigin 會讓瀏覽器啟用CORS訪問檢查，檢查http相應(yīng)頭的 Access-Control-Allow-Origin
對于傳統(tǒng) script 需要跨域獲取的js資源，控制暴露出其報錯的詳細信息
對于 module script ，控制用于跨域請求的憑據(jù)模式
我們在收集錯誤日志的時候，通常會在window上注冊一個方法來監(jiān)測所有代碼拋出的異常：
JavaScript 代碼:

window.addEventListener('error', function(msg, url, lineno, colno, error) {
  var string = msg.toLowerCase()
  var substring = "script error"
  if (string.indexOf(substring) > -1){
    alert('Script Error: See Browser Console for Detail')
  } else {
    var message = {
      Message: msg,
      URL:  url,
      Line: lineNo,
      Column: columnNo,
      'Error object': JSON.stringify(error)
    }
    // send error log to server
    record(message)
  }
  return false
})

但是對于跨域js來說，只會給出很少的報錯信息：'error: script error'，通過使用 crossorigin 屬性可以使跨域js暴露出跟同域js同樣的報錯信息。但是，資源服務(wù)器必須返回一個 Access-Control-Allow-Origin 的header，否則資源無法訪問。