能否使用JavaScript记录客户端Subresource Integrity错误？

你可以通过页面内JavaScript实现SRI校验错误的拦截，也可以主动检测带无效integrity属性的资源节点，具体实现方法如下：

方法1：全局监听error事件捕获SRI校验错误 #

SRI校验失败时，对应的资源（script、link标签）会触发error事件，只需开启事件捕获模式即可全局监听这类错误：

// 第三个参数设为true开启捕获模式，才能拿到元素级别的error事件
window.addEventListener('error', event => {
  const target = event.target
  // 筛选带integrity属性的资源标签
  if (
    (target instanceof HTMLScriptElement || target instanceof HTMLLinkElement) &&
    target.hasAttribute('integrity')
  ) {
    console.log('SRI校验失败资源信息：', {
      资源地址: target.src || target.href,
      预设integrity值: target.getAttribute('integrity')
    })
    // 此处可添加自定义降级逻辑，比如替换为备用资源
  }
}, true)

你提到的两类哈希不匹配错误都会触发上述回调，该方法同时支持静态写在页面内和动态插入的SRI资源。

方法2：主动批量检测页面现有SRI资源有效性 #

如果需要主动排查页面所有带integrity属性的资源是否校验通过，可以在DOM加载完成后遍历节点检测：

// 检测所有SRI资源加载状态
function checkAllSriResources() {
  // 筛选所有带integrity属性的script和样式link标签
  const sriElements = [
    ...document.querySelectorAll('script[integrity]'),
    ...document.querySelectorAll('link[integrity][rel="stylesheet"]')
  ]

  sriElements.forEach(el => {
    // 未加载完成的资源绑定error监听
    el.addEventListener('error', () => handleSriFail(el), true)
  })
}

function handleSriFail(el) {
  console.log('检测到无效integrity属性的资源：', el.src || el.href)
  // 自定义处理逻辑
}

// DOM加载完成后执行检测
document.addEventListener('DOMContentLoaded', checkAllSriResources)

注意事项 #

• 如果需要严格区分SRI校验失败和其他资源加载错误（如网络超时、404），可以主动拉取资源内容计算哈希值，和integrity属性值做对比即可确认错误类型
• 动态插入SRI资源时，创建元素时直接绑定error监听即可实现针对性捕获

内容的提问来源于stack exchange，提问作者James W.