前端程式碼安全與混淆

京東雲技術團隊發表於2023-04-12
前端

作者：京東零售 周明亮

一、友商網頁分析

1.1 亞馬遜

亞馬遜商詳地址：
https://www.amazon.com/OtterBox-Commuter-Case-iPhone-Packaging

  • 所有互動事件在頁面初始化時，不進行下發，等待透過 js 請求後下發 具體點選事件js內容
  • 採用自執行方式，防止程式碼格式化。【無法呼叫 Chrome 自帶的程式碼格式化工具】
  • 採用自研式框架，非傳統 react / vue / angular。大量透過 data-xx 標籤進行資料傳遞，導致標籤結構較為複雜。

1.2 淘寶

主要配合介面進行加密，採用多欄位干擾，模板化載入。下發大量的模版資料，之後透過客戶端進行填充。

客戶端程式碼為傳統的普通加密模式

1.3 拼多多

  • 傳統普通加密方式，使用 React 框架。【有明顯的 React 語法糖】
  • 關鍵的商詳資料，需要強制進行登入操作，可以對賬號進行封禁。

二、攻擊者角度

  1. [Web逆向]數某風控JS演算法分析 常規網頁加密調式
  2. Crack App| 某 H5 App 反除錯對抗 反調式 APP 內 Webview
  3. Puppeteer融入除錯流程，除錯體驗爽翻了！ 可模擬使用者實際點選流程，進行流程化操作，此類方式，比較難以區分
  4. Node.js 安全最佳實踐常見的 Node JS 官方釋出的被攻擊型別。
  • 參考：NodeJS 官網指導手冊
  1. 透過幾行 JS 就可以讀取電腦上的所有資料？旁路攻擊，透過記憶體響應速度獲取使用者密碼資訊
  2. Qwik JS框架將JS程式碼的拆分從常見的「編譯時」（比如webpack分塊）、「執行時」（比如dynamic import），變為「互動時」。只有使用者操作時，才會進行注入載入。
  3. 實踐：天貓汽車商詳頁的SSR改造實踐 天貓汽車商詳頁，改造原理本質上是基於 Qwik JS 。
  4. 聊聊前端安全之CSRF
  • 非程式碼洩漏類，常規型別Web 攻擊，基於程式碼破解後
  • XSS攻擊：跨站指令碼攻擊(Cross-Site Scripting)，攻擊目標是為了盜取儲存在客戶端的cookie或者其他網站用於識別客戶端身份的敏感資訊。一旦獲取到合法使用者的資訊後，攻擊者甚至可以假冒合法使用者與網站進行互動。
  • CSRF（Cross-site request forgery）跨站請求偽造：攻擊者誘導受害者進入第三方網站，在第三方網站中，向被攻擊網站傳送跨站請求。利用受害者在被攻擊網站已經獲取的註冊憑證，繞過後臺的使用者驗證，達到冒充使用者對被攻擊的網站執行某項操作的目的。
  • 網路劫持攻擊，主要是透過一些代理伺服器，或者wifi等有中介軟體的網路請求，進行劫持，不法分子透過這種方式獲取到使用者的資訊。
  • 控制檯注入程式碼，不法分子透過各種提示誘騙使用者在控制檯做一些操作，從而獲取使用者資訊。
  • 釣魚攻擊，
  • 電子郵件釣魚：群發郵件，欺騙使用者點選惡意的連結或附件，獲取有價值的資訊
  • 網站釣魚：在網站上偽造一個網站，通常是模仿合法的某個網站。為了欺騙使用者點選這個網站還會採取些輔助技術，比如釣魚郵件、簡訊、電話
  • 防釣魚
  • SPF記錄，SPF是為了防範垃圾郵件而提出來的一種DNS記錄型別，它是一種TXT型別的記錄，它用於登記某個域名擁有的用來外發郵件的所有IP地址。
  • SafeBrowsing API，谷歌的一個隨時可以透過網際網路訪問的API,允許允許瀏覽器在渲染之前檢測URL的正確性。
  • DDOS：分散式拒絕服務攻擊（Distributed Denial of Service），簡單說就是傳送大量請求是使伺服器癱瘓
  • SQL隱碼攻擊，透過對web連線的資料庫傳送惡意的SQL語句而產生的攻擊，從而產生安全隱患和對網站的威脅，可以造成逃過驗證或者私密資訊洩露等危害
  • 點選劫持，點選劫持是指在一個Web頁面中隱藏了一個透明的iframe，用外層假頁面誘導使用者點選，實際上是在隱藏的frame上觸發了點選事件進行一些使用者不知情的操作。
  1. AI 介入解釋程式碼，加速程式碼反編譯程式
  • 比如將友商程式碼放入 chatgpt 進行釋義

這個只是部分程式碼，如果將完整程式碼，一段一段進行分析，你就可以得到完整上下文，不需要靠人去一段一段讀取程式碼。

目前還有 ai 程式碼除錯如：
https://github.com/shobrook/adrenaline

三、防禦者角度

  1. JS 程式碼混淆
  • 應對：普通開發者或者不懂程式設計的普通使用者。例項：大部分網頁
  • 進行程式碼混淆/加密，減少語義化理解。
  • 透過程式碼除錯，查詢特定 DOM 結點，反覆斷點除錯，即可瞭解相關執行邏輯
  1. JS 虛擬機器
  • 應對：專業程式設計開發者。例項：暫無
  • 透過 AST 轉換 程式碼為二進位制碼，再透過虛擬機器執行二進位制碼。
  • 會導致網頁執行效能變差，執行載入更多 JS 檔案
  • 無法進行斷點提示，但是會把解密流程對外暴露。
  • 直接呼叫 JS 虛擬機器，執行最小化JS片段，從而瞭解整個虛擬機器的加密規則。
  1. 強制下載 APP 透過 Webview 開啟
  • 應對：中高階程式設計開發者。例項如：拼多多等
  • H5 程式碼只是對外展示資料，關鍵內容提示使用者下載 APP，增加除錯難度
  • 使用者不願意下載APP，就會導致使用者流失。
  1. 介面校驗/欄位混淆
  • 應對：Python 爬蟲類，例項如：淘寶、好詞好句網等等
  • 透過介面生成混淆模版，多欄位隨機傳送，配置相關JS 模版框架。
  • 介面內容傳輸 base64 / aes 加解密處理，但是會留下解密 JS 在客戶端，依舊能夠被破解。
  • Token 強制校驗，傳送三次錯誤，直接不在返回資料，需要使用者強制登入，容易導致使用者流失。
  1. 自定義框架
  • 應對：Python 爬蟲類，中高階程式設計開發者。例項如：亞馬遜/淘寶。【還需要繼續挖掘】
  • 爬蟲無法第一時間獲取相關按鈕的 API 請求介面，需要等待 JS 返回。
  • 客戶端存在大量無關資料，導致 dom 結點整體看起來無規律
  • JS 透過 介面請求返回，配合相關的 Token 引數，可以達到隨機性下發

四、結論

4.1 大部分攻擊者共同點

1）自身不願意登入，或者偷取正常使用者資訊後，用於攻擊

  • 如一些外掛程式，免費提供給外部使用者，使用者貪圖小利，以為可以透過外部程式加快搶利
  • 實則被記錄使用者名稱，給到攻擊者使用。

2）如果是公司行為，很可能會被記錄IP，有法務風險。

  • 可以分析電腦名稱，IP 地址
  • 可能會進行 IP 伺服器代理，採用虛擬 IP，虛擬定位
  • 使用雲伺服器，如：阿里雲 / 京東雲，進行攻擊相應的網站，京東雲到京東網站。

3）多次進行嘗試修改 token ，偽裝傳送請求

  • 偽造 UA
  • 開啟除錯模式

4）分析 DOM 結構特徵 / 使用 Console 列印全域性儲存變數

5）透過 cookies 分析特定的關鍵詞，全域性搜尋

6）網路請求時，檢視函式執行棧，逐級往下尋找核心請求函式。

4.2 應對普通開發者外掛程式

  • 主要採用 puppeteer 就可以完全模擬使用者操作流程，可以進行等待某個節點出現，之後再進行操作，不再需要傳統的程式碼除錯操作。直接操作 DOM 結點點選響應
  • 基於此類需求，需要經常變更 DOM 結點位置。增加業務方成本，每次都需要發版。如果是隨機生成結點特徵，需要開發自研框架，成本較高

4.3 應對Pyhton爬蟲

1）前端程式碼採用傳統加密方式

2）入口在 APP 內的 業務

  • 本身除錯需要需要額外連結機器，提高除錯複雜度。
  • 配合 APP 自身監控，特定API 可以做到更加安全
  • 也只有此類業務，可以採用 JS 虛擬機器方式

3）對關鍵詞進行混淆處理，減少特徵搜尋

  • 可採用下面方式，只是舉例，可以有更多方式。比如陣列組合，物件組合等等
  • const GLOBAL_SOCKET_NAME = 'c6on6ne6ct'.concat('S6o').concat('c6ke6t').replace(/6/g, '')
  • 常規程式碼混淆中，對完整字串，不會進行處理，導致會直接暴露關鍵字。

任何客戶端加密混淆都會被破解，只要用心都能解決，我們能做的就是拖延被破解的時間，而不是什麼都不做，那樣只會被破解更快！

其實很多我們自己公司對外的頁面，都有很多外露風險，包括不規範的日誌輸出，直接對外暴露加密的防刷 token。 比如：

大家都可以自查下～

相關文章