如何根治 Script Error?

简介: 本文简要介绍了 Script Error 问题的来龙去脉,但也不局限于 Script Error,对于通用的系统性问题,应该找到系统性解决方案,进而治标治本。

Script Error 原因与当前解法


受浏览器同源策略限制,未知跨域脚本执行错误时,抛出的错误信息为 "Script error.",导致开发者无法定位具体错误。为了获取详细错误信息及堆栈,一般解法是给 Script 标签配置 crossorigin 属性,同时对应脚本服务端需配置 Access-Control-Allow-Origin 响应头。


另外还有一些 hack 解法,对浏览器原生 API 做代理,将业务代码放在 Try Catch 作用域中执行,但写好代理方法是不容易的,粗制滥造的代理方法会制造很多隐藏 Bug,并且大量 Try Catch 在一些 JS Engine 中也存在额外性能损耗,为了解决 Script Error 采用此方案得不偿失。


还有什么问题

  1. crossorigin 不好加
    异步加载脚本套娃,A 加载 B,B 加载 C,以至于不知道加载了哪些外部脚本 需要服务端配合设置响应头 Access-Control-Allow-Origin
  1. crossorigin 加不了
    外部注入代码,如浏览器插件、定制 Webview 容器(xx 浏览器)
  1. 无效 Script Error 数据,难以评估对业务实际影响,并且耗费监控资源

image.png

溯源:为什么是 Script Error

从 2006 年一篇安全漏洞文章说起:I know if you're logged-in, anywhere在那个年代大量网站都是服务端渲染,服务端根据用户登录态返回不同页面内容,黑客通过 Script 加载目标站点,用户已登录、未登录返回的 Response 内容不同,报错信息也会有差异,这样就可以通过报错信息区分用户是否登录,进一步展开针对性的攻击。

<script src=” http://mail.google.com/mail/”></script>

image.png

对于其他站点也是类似,错误信息中总会有差异,比如亚马逊登录和未登录,报错的 LineNo 不同。

image.png

image.png

《I know if you're logged-in, anywhere》地址: https://blog.jeremiahgrossman.com/2006/12/i-know-if-youre-logged-in-anywhere.html


Script Error 规范是否能调整

通过以上信息,我们可以理解 Script Error 的设计初衷以及其合理性,但我也有疑问,在今天浏览器同源策略比较完善的情况下,是否有必要屏蔽所有信息(error message、lineno、colno、url)?能否将发生 Script Error 的脚本 url 暴露出来,以便开发者收集到错误信息时快速定位错误来源,这样也方便评估影响面,比如明显是注入的脚本错误,直接忽略即可。
翻阅 WHATWG Github 历史 issue,发现已经有过相关讨论,很明确答案是 No,大概原因是当前的同源策略已经很全面(复杂),不想在挖坑。以至于对 unhanlderejection,连 Script Error 都不愿意报。

image.png

相关讨论地址:https://github.com/whatwg/html/issues/2440

unhanlderejection地址:https://github.com/whatwg/html/issues/5051


其他大厂如何处理 Script Error

我在几个大厂网站上做了测试,加载一个第三方脚本,第三方脚本一定会报错,看看对应站点如何处理。

var s = document.createElement('script'); 
s.src = 'https://g.alicdn.com/dinamic/h5-tb-cart/5.0.41/index.min.js'; 
document.body.appendChild(s);

640 (1).png

image.png

image.png

  1. Google:常规处理,直接上报 Script Error
  2. Twitter:   通过 CSP 策略拦截了未知脚本加载,包括 Github、FaceBook 都采用类似方案
  3. QQ 视频:除了上报 Script Error,并监控上报异步加载的脚本


面向未来我们应该如何处理 Script Error

面向未来看问题,我们不能与标准背道而驰,同源策略是当前解决 Web 安全问题的重要手段,在未来只会更完善,我们应该积极了解与应用。当前国内互联网对同源策略的了解与应用大多止步于 Access-Control-Allow-Origin: *,这是远远不够的。

因此,面向未来 Script Error 问题 Twitter 的处理方式相对合理,只允许站点加载白名单脚本,对白名单脚本逐个做 CrossOring 等配置,同时也杜绝了外部脚本注入。对于淘宝来说,受限于业务体量以及历史包袱,做这种改造难度可想而知,但我们应该朝这个方向努力,而不是让开发者面对 Script Error 手足无措,靠猜测或是加错误过滤解决问题。

回到当下,短期的解决方案要增强跨域脚本的感知能力,可以配置 CSP Report Only 上报跨域脚本,也可以通过原始手段统计,进而对相关脚本做跨域配置,对于明显的跨域脚本如埋点、唤端、以及安全系列脚本,缺少 crossorigin 的尽快修复。

CSP Report Only地址: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only



document.querySelectorAll('script[src]:not([crossorigin])')


本文简要介绍了 Script Error 问题的来龙去脉,但也不局限于 Script Error,对于通用的系统性问题,应该找到系统性解决方案,进而治标治本。


参考文档


  1. what is script error(地址:https://blog.sentry.io/2016/05/17/what-is-script-error)
  2. Cryptic "Script Error." reported in Javascript in Chrome and Firefox(地址:https://stackoverflow.com/questions/5913978/cryptic-script-error-reported-in-javascript-in-chrome-and-firefox)
  3. 解决 "Script Error" 的另类思路(地址:https://juejin.cn/post/6844903727820718094#heading-6)
  4. iOS Privacy: Instagram and Facebook can track anything you do on any website in their in-app browser(地址:https://krausefx.com/blog/ios-privacy-instagram-and-facebook-can-track-anything-you-do-on-any-website-in-their-in-app-browser)
  5. I know if you're logged-in, anywhere(地址:https://blog.jeremiahgrossman.com/2006/12/i-know-if-youre-logged-in-anywhere.html)
  6. HTML Spec: Runtime script errors(地址:https://html.spec.whatwg.org/multipage/webappapis.html#runtime-script-errors)
  7. "Script error." message in window.onerror makes bad DevExp trade off(地址:https://github.com/whatwg/html/issues/2440)
  8. unhandledrejection should fire even for muted scripts(地址:https://github.com/whatwg/html/issues/5051)
  9. Content-Security-Policy-Report-Only(地址:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only)
相关文章
|
JavaScript
js中数组reduce的使用原来这么简单
js中数组reduce的使用原来这么简单
|
测试技术 开发工具 git
Commit Message 规范
Commit Message 规范
368 0
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
771 0
|
9月前
|
人工智能 API 开发工具
Skills比MCP更重要?更省钱的多!Python大佬这观点老金测了一周终于懂了
加我进AI学习群,公众号右下角“联系方式”。文末有老金开源知识库·全免费。本文详解Claude Skills为何比MCP更轻量高效:极简配置、按需加载、省90% token,适合多数场景。MCP仍适用于复杂集成,但日常任务首选Skills。推荐先用SKILL.md解决,再考虑协议。附实测对比与配置建议,助你提升效率,节省精力。关注老金,一起玩转AI工具。
|
10月前
|
JSON 前端开发 Java
Spring Boot 封装统一返回的数据结构
本课讲解如何设计统一的JSON响应结构,通过泛型类`JsonResult&lt;T&gt;`封装返回数据,规范包含code、msg、data的标准格式,提升前后端协作效率与API可维护性。
|
IDE 前端开发 开发工具
用通义灵码IDE做产品高保真原型和前端页面
通义灵码IDE助力高效开发,告别传统Axure原型图的繁琐沟通。通过该工具可直接生成高保真产品原型与前端页面,大幅提升客户确认效率及满意度。现已将相关演示发布至B站(https://www.bilibili.com/video/BV18qT7ziEb7/?vd_source=dc6a6864c895818db6ce4170d50b3557),欢迎体验!用直观操作代替反复说明,让交付更流畅。
1074 1
|
人工智能 自然语言处理 前端开发
从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
|
自然语言处理 小程序 IDE
只要几句话,通义灵码帮你创建专属健康管理小程序
数字时代的大潮中,编程不再高深莫测,而是每个人都可以尝试并享受的乐趣。今天,就让我们一起探索如何利用通义灵码的自然语言生成代码功能,轻松打造你的专属健康管理小程序,说不定在这个过程中,不管是身材管理,还是编程学习,都能让你离目标更近一步。
|
前端开发 JavaScript 开发者
通义灵码:前端开发的效率助推器
作为一名前端开发者,我近期开始使用通义灵码辅助开发,显著提升了编码效率和质量。在编写复杂交互逻辑或应用新技术框架时,通义灵码能快速提供代码框架和建议,帮助我快速搭建页面架构并解决技术难题,使项目进展更加顺利。其简洁友好的界面和强大的功能,让我的开发工作变得更加高效和自信。
|
自然语言处理 JavaScript 开发者
跟随通义灵码一步步升级vue2(ts)项目到vue3版本
本文介绍了如何将基于 TypeScript 的 Vue 2 项目升级到 Vue 3。主要内容包括:依赖升级、配置文件调整、组件代码迁移、状态管理迁移以及优化策略迁移。文章提供了详细的步骤和示例代码,帮助开发者顺利完成升级。特别推荐使用通义灵码工具来加速组件和状态的转写过程。
1518 7