一些用户向我们反应,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:
假定你已胜利登录Gmail效劳器,同时在同一个浏览器接见歹意站点(另一个浏览器选项卡)。没有同源战略,攻击者能够经由过程JavaScript猎取你的邮件以及其他敏感信息,比如说浏览你的私密邮件,发送子虚邮件,看你的聊天记录等等。 假如将Gmail替换为你的银行帐户,题目就大条了。
为啥涌现Script error. ?
为了提拔网站的接见速率,我们一般都会将静态资本文件(css, image, javascript)放在第三方CDN。当这些从第三方加载的JavaScript剧本实行失足,由于违犯了同源战略, 为了保证用户信息不被泄漏,毛病信息不会显示出来,取而代之只会返回一个Script error.
。
暴露毛病信息会如何呢?摘自(Cryptic “Script Error.” reported in Javascript in Chrome and Firefox):
设想你不小心接见了一个歹意网站,网页内里偷偷放入了一段JavaScript剧本
<script src="cbcc.com/index.html">
,这段剧本指向你运用的某银行网站首页。虽然剧本会实行失利,然则毛病信息却有能够泄漏你的信息。假如你已登录过该银行网站而且处于登录状况,那末毛病信息能够为'迎接你 ....' 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来捕捉毛病。
<!DOCTYPE html>
<html>
<head>
<title>Test Script error</title>
<script type="text/javascript">
window.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, error){
console.log(errorMessage);
console.log(scriptURI);
console.log(lineNumber);
console.log(columnNumber);
console.log(error);
}
</script>
<script type="text/javascript" src="./scripterror.js"></script>
</head>
<body>
</body>
</html>
在scripterror.js中抛出一个Error对象:
throw new Error('Hello, Fundebug');
运用的http-server
挂载文件,翻开http://localhost:8080/index.html,
在Chrome浏览器掌握台下,能够看到细致的失足信息:
为了复现Scrpt error.
, 将scripterror.js
放到我在coding.net
的个人项目下面:
<!DOCTYPE html>
<html>
<head>
<title>Test Script error</title>
<script type="text/javascript">
window.onerror = function(errorMessage, scriptURI, lineNumber, columnNumber, error){
console.log(errorMessage);
console.log(scriptURI);
console.log(lineNumber);
console.log(columnNumber);
console.log(error);
}
</script>
<script type="text/javascript" src="http://coding.net/u/stefanzan/p/stefanzan/git/raw/coding-pages/public/js/src/scripterror.js"></script>
</head>
<body>
</body>
</html>
运转http-server
, 效果以下:
由于违犯同源战略,这时候只能拿到Script error.
。
总结
本文引见了Script error.
的由来,并供应了一个简朴的实例来演示什么情况下涌现Script error.
。接下来,我们将对Script error举行深度测试并提出解决方法
迎接到场我们官方QQ群“全栈BUG监控交换”622902485
版权声明:
转载时请说明作者Fundebug以及本文地点:
https://blog.fundebug.com/2017/04/05/understand-script-error/