一些用戶向我們反饋，F(xiàn)undebug的JavaScript監(jiān)控插件抓到了很多Script error.，然后行號(hào)和列號(hào)都是0...這就很尷尬了。

今天，我們來(lái)詳細(xì)地解析一下Script error.，后續(xù)我們還會(huì)深度測(cè)試并且提供解決方法。

十年的金川網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整金川建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“金川網(wǎng)站設(shè)計(jì)”,“金川網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

同源策略 (Same origin policy)

解釋Script error.之前，我們先簡(jiǎn)單聊聊同源策略。摘自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.

所謂同源，就是指兩個(gè)頁(yè)面具有相同的協(xié)議、端口和主機(jī)(域名)。通過(guò)第三方加載的JavaScript腳本是不同源的。下面的表格簡(jiǎn)單列出了和https://fundebug.com/app.js是否同源的文件:

沒(méi)有同源策略的話，將會(huì)怎樣？摘自同源策略詳解及繞過(guò) - FreeBuf：

假設(shè)你已經(jīng)成功登錄Gmail服務(wù)器，同時(shí)在同一個(gè)瀏覽器訪問(wèn)惡意站點(diǎn)（另一個(gè)瀏覽器選項(xiàng)卡）。沒(méi)有同源策略，***者可以通過(guò)JavaScript獲取你的郵件以及其他敏感信息，比如說(shuō)閱讀你的私密郵件，發(fā)送虛假郵件，看你的聊天記錄等等。 如果將Gmail替換為你的銀行帳戶，問(wèn)題就大條了。

為啥出現(xiàn)Script error. ?

為了提升網(wǎng)站的訪問(wèn)速度，我們通常都會(huì)將靜態(tài)資源文件(css, image, javascript)放在第三方cdn。當(dāng)這些從第三方加載的JavaScript腳本執(zhí)行出錯(cuò)，因?yàn)檫`背了同源策略, 為了保證用戶信息不被泄露，錯(cuò)誤信息不會(huì)顯示出來(lái)，取而代之只會(huì)返回一個(gè)Script error.。

暴露錯(cuò)誤信息會(huì)怎樣呢？摘自(Cryptic “Script Error.” reported in Javascript in Chrome and Firefox)：

假想你不小心訪問(wèn)了一個(gè)惡意網(wǎng)站，網(wǎng)頁(yè)里面偷偷放入了一段JavaScript腳本 <script src="cbcc.com/index.html">，這段腳本指向你使用的某銀行網(wǎng)站首頁(yè)。雖然腳本會(huì)執(zhí)行失敗，但是錯(cuò)誤信息卻有可能泄露你的信息。如果你已經(jīng)登錄過(guò)該銀行網(wǎng)站并且處于登錄狀態(tài)，那么錯(cuò)誤信息可能為'歡迎你 ....' is undefined；如果你沒(méi)有登錄，那么錯(cuò)誤信息可能是'請(qǐng)登錄...' is undefined。 然后***就可以根據(jù)這些信息確定你使用的銀行網(wǎng)站，并且偽造一個(gè)釣魚(yú)網(wǎng)站來(lái)騙取錢(qián)財(cái)。

源碼

webkit源碼如下：

```c++
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;
}
...
}

可知，瀏覽器會(huì)判斷所加載的資源url是否同源(`securityOrigin()->canRequest(targetUrl)`)，如果不同源，則將錯(cuò)誤消息隱藏，賦值為`Script error.`, 并且將行號(hào)設(shè)為0.

因此，如果我們從第三方CDN服務(wù)加載資源，如果出錯(cuò)的話，那么我們將只能看到`Script error.`。

### 錯(cuò)誤復(fù)現(xiàn)

我們用一個(gè)簡(jiǎn)單的例子測(cè)試一下。下面是**index.html**，我們使用onerror來(lái)捕獲錯(cuò)誤。

```html



    
    
    

在scripterror.js中拋出一個(gè)Error對(duì)象：

throw new Error('Hello, Fundebug');

使用的http-server掛載文件，打開(kāi)http://localhost:8080/index.html，

在Chrome瀏覽器控制臺(tái)下，可以看到詳細(xì)的出錯(cuò)信息:

為了復(fù)現(xiàn)Scrpt error.， 將scripterror.js放到我在coding.net的個(gè)人項(xiàng)目下面:

運(yùn)行http-server, 結(jié)果如下：

因?yàn)檫`背同源策略，這時(shí)只能拿到Script error.。

總結(jié)

本文介紹了Script error.的由來(lái)，并提供了一個(gè)簡(jiǎn)單的實(shí)例來(lái)演示什么情況下出現(xiàn)Script error.。接下來(lái)，我們將對(duì)Script error進(jìn)行深度測(cè)試并提出解決方法

關(guān)于Fundebug

Fundebug專(zhuān)注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了7億+錯(cuò)誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/04/05/understand-script-error/