New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Script error #3

Open
caihuiji opened this Issue May 25, 2015 · 2 comments

Comments

Projects
None yet
2 participants
@caihuiji
Member

caihuiji commented May 25, 2015

一、Script Error规范

script Error 是什么?

是外部加载的JS 抛出异常的时候, 出于安全方面的考虑,js错误信息中可能包含一些敏感信息,比如用户名、权限提示等,希望能够把这类信息屏蔽。目前跨域的场景下会触发这种安全限制,window.onerror无法获得具体出错信息,而只能得到Script error 0 0

image

http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#runtime-script-errors

二、解决ScriptError 问题

目前业内有以下两种方式:

  • 响应头增加 access-control-allow-orgin (以下简称AC)
  • 切面包裹入口函数, try-catch (badjs-report 方案)

响应头增加 access-control-allow-orgin

1.1 Access-Control-Allow-Origin 回包header里设置允许cros的域
1.2 script 标签增加 crossorigin="anonymous"

当1和2同时满足就拥有了打开script errors的钥匙,window.onerror就能获得详细出错信息了

哪些浏览器能打开muted errors?
ie 6-10 没有同源限制的问题
Chrome 和 Firefox支持,Safari 不支持,
所以跨域的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直接不加载(不支持 *通配符了)

目前只有高级浏览器支持,如果闲麻烦可以使用自带的 try-catch 功能

切面包裹入口函数, try-catch

对于基于AMD和jQuery的网站,几乎所有业务函数都是通过回调异步触发的,所以我们只需要将所有异步函数包裹起来就可以捕获到大部分错误:

  • setTimeou ,setInterval
  • $.event.add 和 $.event.remove
  • AJAX
  • 模块入口 define 或则 require
setTimeou ,setInterval

只针对 w3c 现代的浏览器的进行包裹,ie 不进行包裹 #2

$.event.add 和 $.event.remove

没有个dom 都有这两个方法,我们没有办法对全部重写。但是我们发现目前基本都会使用 jquery 或 zepto ,所以我们对 $.event.add 和 $.event.remove 进行了切面处理。

AJAX

跟上面的类似,我们不能重写 ajax ,但是前端开发都使用 jquery ,所以我们重写了 $.ajax

模块入口 define 或则 require

目前前端开发基本都使用了模块化管理,所以模块化的入口是非常好的入口。我们也进行了包裹

@caihuiji caihuiji added the discuss label Jun 6, 2015

@loskael

This comment has been minimized.

Show comment
Hide comment
@loskael

loskael Jun 10, 2015

Member

提供另一个解决思路:
产生 Script Error 的原因是因为请求了跨域资源(比如cdn), 可以灰度一部分用户, 直接使用主域而不是cdn上的js, 避免跨域问题, 并使用不同的上报id跟踪

Member

loskael commented Jun 10, 2015

提供另一个解决思路:
产生 Script Error 的原因是因为请求了跨域资源(比如cdn), 可以灰度一部分用户, 直接使用主域而不是cdn上的js, 避免跨域问题, 并使用不同的上报id跟踪

@loskael

This comment has been minimized.

Show comment
Hide comment
Member

loskael commented Oct 12, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment