Script error.全面解析

時間 2020-04-23

標籤 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, 結果以下：