本文從攻擊者角度和防禦者角度詳細解析前端代碼安全與混淆的相關知識，總結了大部分攻擊者共同點以及如何應對普通開發者外掛程式和Pyhton 爬蟲 ...

作者：京東零售周明亮

一、友商網頁分析

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 語法糖】
關鍵的商詳數據，需要強制進行登錄操作，可以對賬號進行封禁。

二、攻擊者角度

[Web逆向]數某風控JS演算法分析常規網頁加密調式
Crack App| 某 H5 App 反調試對抗反調式 APP 內 Webview
Puppeteer融入調試流程，調試體驗爽翻了！可模擬用戶實際點擊流程，進行流程化操作，此類方式，比較難以區分
Node.js 安全最佳實踐常見的 Node JS 官方發佈的被攻擊類型。

參考：NodeJS 官網指導手冊

通過幾行 JS 就可以讀取電腦上的所有數據？旁路攻擊，通過記憶體響應速度獲取用戶密碼信息
Qwik JS框架將JS代碼的拆分從常見的「編譯時」（比如webpack分塊）、「運行時」（比如dynamic import），變為「交互時」。只有用戶操作時，才會進行註入載入。
實踐：天貓汽車商詳頁的SSR改造實踐天貓汽車商詳頁，改造原理本質上是基於 Qwik JS 。
聊聊前端安全之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上觸發了點擊事件進行一些用戶不知情的操作。

AI 介入解釋代碼，加速代碼反編譯進程

比如將友商代碼放入 chatgpt 進行釋義

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

目前還有 ai 代碼調試如：
https://github.com/shobrook/adrenaline

三、防禦者角度

JS 代碼混淆

應對：普通開發者或者不懂編程的普通用戶。實例：大部分網頁
進行代碼混淆/加密，減少語義化理解。
通過代碼調試，查找特定 DOM 結點，反覆斷點調試，即可瞭解相關執行邏輯

JS 虛擬機

應對：專業編程開發者。實例：暫無
通過 AST 轉換代碼為二進位碼，再通過虛擬機運行二進位碼。
會導致網頁執行性能變差，執行載入更多 JS 文件
無法進行斷點提示，但是會把解密流程對外暴露。
直接調用 JS 虛擬機，執行最小化JS片段，從而瞭解整個虛擬機的加密規則。

強制下載 APP 通過 Webview 打開

應對：中高級編程開發者。實例如：拼多多等
H5 代碼只是對外展示數據，關鍵內容提示用戶下載 APP，增加調試難度
用戶不願意下載APP，就會導致用戶流失。

介面校驗/欄位混淆

應對：Python 爬蟲類，實例如：淘寶、好詞好句網等等
通過介面生成混淆模版，多欄位隨機發送，配置相關JS 模版框架。
介面內容傳輸 base64 / aes 加解密處理，但是會留下解密 JS 在客戶端，依舊能夠被破解。
Token 強制校驗，發送三次錯誤，直接不在返回數據，需要用戶強制登錄，容易導致用戶流失。

自定義框架

應對：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）前端代碼採用傳統加密方式

https://github.com/mishoo/UglifyJS
https://github.com/terser/terser
https://github.com/javascript-obfuscator/javascript-obfuscator
更多傾向於介面加密方式，加固加 Token

2）入口在 APP 內的業務

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

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

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

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

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