摘要:同源策略解釋之前,我們先簡單聊聊同源策略。當這些從第三方加載的腳本執行出錯,因為違背了同源策略為了保證用戶信息不被泄露,錯誤信息不會顯示出來,取而代之只會返回一個。
一些用戶向我們反饋,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:
為啥出現Script error. ?假設你已經成功登錄Gmail服務器,同時在同一個瀏覽器訪問惡意站點(另一個瀏覽器選項卡)。沒有同源策略,攻擊者可以通過JavaScript獲取你的郵件以及其他敏感信息,比如說閱讀你的私密郵件,發送虛假郵件,看你的聊天記錄等等。 如果將Gmail替換為你的銀行帳戶,問題就大條了。
為了提升網站的訪問速度,我們通常都會將靜態資源文件(css, image, javascript)放在第三方CDN。當這些從第三方加載的JavaScript腳本執行出錯,因為違背了同源策略, 為了保證用戶信息不被泄露,錯誤信息不會顯示出來,取而代之只會返回一個Script error.。
暴露錯誤信息會怎樣呢?摘自(Cryptic “Script Error.” reported in Javascript in Chrome and Firefox):
源碼假想你不小心訪問了一個惡意網站,網頁里面偷偷放入了一段JavaScript腳本 ,這段腳本指向你使用的某銀行網站首頁。雖然腳本會執行失敗,但是錯誤信息卻有可能泄露你的信息。如果你已經登錄過該銀行網站并且處于登錄狀態,那么錯誤信息可能為"歡迎你 ...." 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來捕獲錯誤。
Test Script error
在scripterror.js中拋出一個Error對象:
throw new Error("Hello, Fundebug");
使用的http-server掛載文件,打開http://localhost:8080/index.html,
在Chrome瀏覽器控制臺下,可以看到詳細的出錯信息:
為了復現Scrpt error., 將scripterror.js放到我在coding.net的個人項目下面:
Test Script error
運行http-server, 結果如下:
因為違背同源策略,這時只能拿到Script error.。
總結本文介紹了Script error.的由來,并提供了一個簡單的實例來演示什么情況下出現Script error.。接下來,我們將對Script error進行深度測試并提出解決方法
歡迎加入我們官方QQ群“全棧BUG監控交流”622902485
版權聲明:
轉載時請注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/04/05/understand-script-error/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82378.html
摘要:拆分了錄屏代碼,監控插件壓縮至,另外我們還原了部分,幫助用戶更方便地。請大家及時更新哈拆分錄屏代碼從版本開始,我們拆分了錄屏代碼。自從年雙十一正式上線,累計處理了億錯誤事件,付費客戶有金山軟件百姓網等眾多品牌企業。 摘要: BUG監控插件壓縮至18K。 showImg(https://segmentfault.com/img/bVbpIPC?w=900&h=383); 1.7.1拆分了...
摘要:,表示當前錯誤對象,包含當前錯誤比較詳細的堆棧等信息,需要比較新的瀏覽器才有這個參數。總結這樣我們就可以利用收集用戶的報錯信息了完整的錯誤收集系統見下面的參考鏈接。參考鏈接全面收集前端報錯原文地址獲取最佳閱讀體驗并參與討論,請訪問原文 前言 最近有個頁面寫好后在 Chrome devtools 里運行正常,但是手機上運行時卻出了問題,就想著在代碼里添加下面的內容,到手機上顯示錯誤消息 ...
摘要:上節我們講了同源策略,這節我們講講如何跨域。當這些從的腳本執行出錯,因為違背了同源策略為了保證用戶信息不被泄露,錯誤信息不會顯示出來,取而代之只會返回一個。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦(每...
摘要:請求默認會攜帶同源請求的,而跨域請求則不會攜帶,設置的的屬性為將允許攜帶跨域。類型請求成功后的回調函數。另外,同樣提供了在環境下的支持,可謂是網絡請求的首選方案。當網絡故障時或請求被阻止時,才會標記為,如跨域不存在,網絡異常等會觸發。 一、前端進行網絡請求的關注點 大多數情況下,在前端發起一個網絡請求我們只需關注下面幾點: 傳入基本參數(url,請求方式) 請求參數、請求參數類型 設...
摘要:標準定義和用法文檔節點的方法用于寫入文檔內容,可以傳多個參數,寫入的字符串會按解析。在異步引入的和或事件的回調函數中運行,運行完后,最好手動關閉文檔寫入。寫入的標簽中的內容會正常運行。 W3C 標準 WHATWG: write() 定義和用法 文檔節點的write()方法用于寫入文檔內容,可以傳多個參數,寫入的字符串會按HTML解析。 語法:document.write() 參數:字...
閱讀 1211·2023-04-26 02:20
閱讀 3337·2021-11-22 14:45
閱讀 4111·2021-11-17 09:33
閱讀 972·2021-09-06 15:00
閱讀 1479·2021-09-03 10:30
閱讀 3837·2021-07-26 22:01
閱讀 990·2019-08-30 15:54
閱讀 531·2019-08-30 15:43