script标签中的crossorigin属性

共 1091字,需浏览 3分钟

 ·

2021-11-28 20:34


在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助。


而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段 。


但是对于跨域的资源 ,onerror 事件通常会上报 "Script error"


由于这并不是 JavaScript 的 bug,所以浏览器出于安全考虑,会主动隐藏其他域下 js 抛出的具体错误信息,但是 onerror 事件可不管你这么多,就是直接上报 ,在不做过滤的情况下,你会在监控平台中看到特别的"Script error"错误日志。


而解决这个问题的一个办法之一就是在跨域资源的 script 标签中添加 crossorigin 属性


例如页面域名

my.com


加载了跨域js脚本

<script src="user.com/index.js">script>


这是在没有添加 crossorigin 属性的情况下,如果 user.com/index.js 中抛出了错误,在 my.com 页面中通过 onerror 事件是捕获不到具体错误信息的 ,只会捕获到 Script error 错误。


加载了具有 crossorigin 属性的跨域 js 脚本。

<script src="user.com/index.js" crossorigin >script>


这样就可以获取到 user.com/index.js 中的具体错误信息了。



但是 crossorigin 属性并不是无脑加的!


我们先来看下 MDN 中对 crossorigin 的解释:


在HTML5中,一些 HTML 元素提供了对 CORS 的支持, 例如