1. 程式人生 > >Script error之全面解析

Script error之全面解析

一些使用者向我們反饋,FundebugJavaScript監控外掛抓到了很多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進行深度測試並提出解決方法

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了7億+錯誤事件,得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用!

版權宣告

轉載時請註明作者Fundebug以及本文地址:

https://blog.fundebug.com/2017/04/05/understand-script-error/