摘要:同源策略解释之前,我们先简单聊聊同源策略。当这些从第三方加载的脚本执行出错,因为违背了同源策略为了保证用户信息不被泄露,错误信息不会显示出来,取而代之只会返回一个。
一些用户向我们反馈,Fundebug的JavaScript监控插件抓到了很多Script error.,然后行号和列号都是0...这就很尴尬了。
今天,我们来详细地解析一下Script error.,后续我们还会深度测试并且提供解决方法。
同源策略 (Same origin policy)解释Script error.之前,我们先简单聊聊同源策略。摘自MDN - Same-origin policy:
Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages.
所谓同源,就是指两个页面具有相同的协议、端口和主机(域名)。通过第三方加载的JavaScript脚本是不同源的。下面的表格简单列出了和https://fundebug.com/app.js是否同源的文件:
网址 | 是否同源 | 原因 |
---|---|---|
https://fundebug.com/vendor.js | 是 | |
http://fundebug.com/vendor.js | 否 | 协议不同 |
https://fundebug.com:8001/app.js | 否 | 端口不同 |
https://docs.fundebug.com/nav.js | 否 | 子域名不同 |
https://kiwenlau.com/totop.js | 否 | 域名不同 |
没有同源策略的话,将会怎样?摘自同源策略详解及绕过 - FreeBuf:
为啥出现Script error. ?假设你已经成功登录Gmail服务器,同时在同一个浏览器访问恶意站点(另一个浏览器选项卡)。没有同源策略,攻击者可以通过JavaScript获取你的邮件以及其他敏感信息,比如说阅读你的私密邮件,发送虚假邮件,看你的聊天记录等等。 如果将Gmail替换为你的银行帐户,问题就大条了。
为了提升网站的访问速度,我们通常都会将静态资源文件(css, image, javascript)放在第三方CDN。当这些从第三方加载的JavaScript脚本执行出错,因为违背了同源策略, 为了保证用户信息不被泄露,错误信息不会显示出来,取而代之只会返回一个Script error.。
暴露错误信息会怎样呢?摘自(Cryptic “Script Error.” reported in Javascript in Chrome and Firefox):
源码假想你不小心访问了一个恶意网站,网页里面偷偷放入了一段JavaScript脚本 ,这段脚本指向你使用的某银行网站首页。虽然脚本会执行失败,但是错误信息却有可能泄露你的信息。如果你已经登录过该银行网站并且处于登录状态,那么错误信息可能为"欢迎你 ...." is undefined;如果你没有登录,那么错误信息可能是"请登录..." is undefined。 然后黑客就可以根据这些信息确定你使用的银行网站,并且伪造一个钓鱼网站来骗取钱财。
webkit源码如下:
bool ScriptExecutionContext::dispatchErrorEvent(const String& errorMessage, int lineNumber, const String& sourceURL) { EventTarget* target = errorEventTarget(); if (!target) return false; ... if (securityOrigin()->canRequest(targetUrl)) { message = errorMessage; line = lineNumber; sourceName = sourceURL; } else { message = "Script error."; sourceName = String(); line = 0; } ... }
可知,浏览器会判断所加载的资源url是否同源(securityOrigin()->canRequest(targetUrl)),如果不同源,则将错误消息隐藏,赋值为Script error., 并且将行号设为0.
因此,如果我们从第三方CDN服务加载资源,如果出错的话,那么我们将只能看到Script error.。
错误复现我们用一个简单的例子测试一下。下面是index.html,我们使用onerror来捕获错误。
Test Script error
在scripterror.js中抛出一个Error对象:
throw new Error("Hello, Fundebug");
使用的http-server挂载文件,打开http://localhost:8080/index.html,
在Chrome浏览器控制台下,可以看到详细的出错信息:
为了复现Scrpt error., 将scripterror.js放到我在coding.net的个人项目下面:
Test Script error
运行http-server, 结果如下:
因为违背同源策略,这时只能拿到Script error.。
总结本文介绍了Script error.的由来,并提供了一个简单的实例来演示什么情况下出现Script error.。接下来,我们将对Script error进行深度测试并提出解决方法
欢迎加入我们官方QQ群“全栈BUG监控交流”622902485
版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/04/05/understand-script-error/
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82378.html
摘要:拆分了录屏代码,监控插件压缩至,另外我们还原了部分,帮助用户更方便地。请大家及时更新哈拆分录屏代码从版本开始,我们拆分了录屏代码。自从年双十一正式上线,累计处理了亿错误事件,付费客户有金山软件百姓网等众多品牌企业。 摘要: BUG监控插件压缩至18K。 showImg(https://segmentfault.com/img/bVbpIPC?w=900&h=383); 1.7.1拆分了...
摘要:,表示当前错误对象,包含当前错误比较详细的堆栈等信息,需要比较新的浏览器才有这个参数。总结这样我们就可以利用收集用户的报错信息了完整的错误收集系统见下面的参考链接。参考链接全面收集前端报错原文地址获取最佳阅读体验并参与讨论,请访问原文 前言 最近有个页面写好后在 Chrome devtools 里运行正常,但是手机上运行时却出了问题,就想着在代码里添加下面的内容,到手机上显示错误消息 ...
摘要:上节我们讲了同源策略,这节我们讲讲如何跨域。当这些从的脚本执行出错,因为违背了同源策略为了保证用户信息不被泄露,错误信息不会显示出来,取而代之只会返回一个。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每...
摘要:请求默认会携带同源请求的,而跨域请求则不会携带,设置的的属性为将允许携带跨域。类型请求成功后的回调函数。另外,同样提供了在环境下的支持,可谓是网络请求的首选方案。当网络故障时或请求被阻止时,才会标记为,如跨域不存在,网络异常等会触发。 一、前端进行网络请求的关注点 大多数情况下,在前端发起一个网络请求我们只需关注下面几点: 传入基本参数(url,请求方式) 请求参数、请求参数类型 设...
摘要:标准定义和用法文档节点的方法用于写入文档内容,可以传多个参数,写入的字符串会按解析。在异步引入的和或事件的回调函数中运行,运行完后,最好手动关闭文档写入。写入的标签中的内容会正常运行。 W3C 标准 WHATWG: write() 定义和用法 文档节点的write()方法用于写入文档内容,可以传多个参数,写入的字符串会按HTML解析。 语法:document.write() 参数:字...
阅读 1292·2023-04-26 02:20
阅读 3405·2021-11-22 14:45
阅读 4260·2021-11-17 09:33
阅读 1071·2021-09-06 15:00
阅读 1541·2021-09-03 10:30
阅读 4005·2021-07-26 22:01
阅读 1056·2019-08-30 15:54
阅读 592·2019-08-30 15:43