作者：京東零售周明亮

一、友商網頁分析

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，比如：

大家都可以自查下～

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549821.html

標籤：JavaScript

上一篇：CSS基礎：塊狀元素、行內元素、行內塊狀元素(行內元素)

下一篇：前端代碼安全與混淆