Script error.全面解析

时间 2019-11-17

标签 script error 全面解析繁體版

原文原文链接

一些用户向咱们反馈，Fundebug的JavaScript监控插件抓到了不少Script error.，而后行号和列号都是0...这就很尴尬了。javascript

今天，咱们来详细地解析一下Script error.，后续咱们还会深度测试而且提供解决方法。css

同源策略 (Same origin policy)

解释Script error.以前，咱们先简单聊聊同源策略。摘自MDN - Same-origin policy:html

Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages.java

所谓同源，就是指两个页面具备相同的协议、端口和主机(域名)。经过第三方加载的JavaScript脚本是不一样源的。下面的表格简单列出了和https://fundebug.com/app.js是否同源的文件:c++

网址	是否同源	缘由
`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：git

假设你已经成功登陆Gmail服务器，同时在同一个浏览器访问恶意站点（另外一个浏览器选项卡）。没有同源策略，攻击者能够经过JavaScript获取你的邮件以及其余敏感信息，好比说阅读你的私密邮件，发送虚假邮件，看你的聊天记录等等。若是将Gmail替换为你的银行账户，问题就大条了。web

为啥出现Script error. ?

为了提高网站的访问速度，咱们一般都会将静态资源文件(css, image, javascript)放在第三方CDN。当这些从第三方加载的JavaScript脚本执行出错，由于违背了同源策略, 为了保证用户信息不被泄露，错误信息不会显示出来，取而代之只会返回一个Script error.。chrome

暴露错误信息会怎样呢？摘自(Cryptic “Script Error.” reported in Javascript in Chrome and Firefox)：npm

假想你不当心访问了一个恶意网站，网页里面偷偷放入了一段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进行深度测试并提出解决方法

关于Fundebug

Fundebug专一于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了6亿+错误事件，获得了Google、360、金山软件等众多知名用户的承认。欢迎免费试用！

版权声明

转载时请注明做者Fundebug以及本文地址：
blog.fundebug.com/2017/04/05/…