一、Script Error规范
script Error 是什么?
是外部加载的JS 抛出异常的时候, 出于安全方面的考虑,js错误信息中可能包含一些敏感信息,比如用户名、权限提示等,希望能够把这类信息屏蔽。目前跨域的场景下会触发这种安全限制,window.onerror无法获得具体出错信息,而只能得到Script error.
http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#runtime-script-errors
二、解决ScriptError 问题
- 响应头增加 access-control-allow-orgin (以下简称AC)
- 每个fucntion 包裹 try-catch
- 切面包裹入口函数, try-catch
1. 响应头增加 access-control-allow-orgin
- Access-Control-Allow-Origin 回包header里设置允许cros的域
- Access-Control-Allow-Credentials:true
Script标签增加 crossorigin 当1和2同时满足就拥有了打开script errors的钥匙,window.onerror就能获得详细出错信息了
哪些浏览器能打开muted errors?
Chrome 和 Firefox支持,Safari 和 ie 不支持,
所以跨域的js想在Safari下获取出错详情信息,只能用try-catch了,onerror是无能为力了。
access-control-allow-orgin 配置问题:
由于值不能设置多值,而且设置 * , 允许任何域名使用是一个很不安全的设置,所以一般会根据 浏览器请求头 refer 或则 orgin ,判断是不是白名单内的域名,是的就响应回对应的域名或则* (响应头不支持返回 *.qq.com),。当然如果cdn只对一个业务服务也可以写死域名
script 标签上面的 crossorigin 配置问题
1. anonymous(默认)
不能带cookie
副作用,当 AC 的设置不是 * 或者不等于origin时,js直接不加载
2.use-credentials
能带上cookie
副作用,当AC的设置不等于origin时,js直接不加载(不支持 *通配符了)
其他奇葩的问题
由于浏览器的缓存,同一个资源的跨域头会被缓存,但是同一个网站中可能有不同域名请求这个资源,所以会出现资源跨域请求失败
2. 每个fucntion 包裹 try-catch
利用构建工具,对function 进行包裹,try-catch ,捕获到异常后进行上报
但是构建后生成的代码会对源代码增加大小
3. 切面包裹入口函数, try-catch
对于基于AMD和jQuery的网站,几乎所有业务函数都是通过回调异步触发的,所以我们只需要将所有异步函数包裹起来就可以捕获到大部分错误:
- setTimeou ,setInterval
- $.event.add 和 $.event.remove
- AJAX
- 模块入口 define 或则 require
setTimeou、setInterval
只针对 w3c 现代的浏览器的进行包裹,ie 不进行包裹
$.event.add 和 $.event.remove
没有个dom 都有这两个方法,我们没有办法对全部重写。但是我们发现目前基本都会使用 jquery 或 zepto ,所以我们对 $.event.add 和 $.event.remove 进行了切面处理。
AJAX
跟上面的类似,我们不能重写 ajax ,但是前端开发都使用 jquery ,所以我们重写了 $.ajax
模块入口 define 或则 require
目前前端开发基本都使用了模块化管理,所以模块化的入口是非常好的入口。
提供另一个解决思路
产生 Script Error
的原因是因为请求了跨域资源(比如cdn), 可以灰度一部分用户, 直接使用主域而不是cdn上的js, 避免跨域问题。
参考自:badjs
最后一句, 智者所见略同, 我们生产环境 我也是灰度处理的。 加了crossorigin偶尔会异常,之前测试环境我加了 use-credentials 这个属性,没有重现异常了,但是cdn设置是*的,所以生产不能加。然后一直到刚才我明白为什么加了use-credentials一直没重现,我猜大概是use-credentials每次回带上cookie请求,相当于 浏览器没有缓存crossorgin header吗?
啊,没看懂..跨域的那个问题,cors ie不支持怎么办…
你真有才啊
。。。。。。。