目前來說網站開發主要有三種方向

原生js或者jQuery

vue，react，angular等框架

WebAssembly

wasm目前除了游戲引擎打包出來之外，我還沒有見到其他的應用，所以暫時不討論。

原生js或者jQuery開發的網站

使用原生js或者jQuery開發的網站，他們的數據掛掛載方式很簡單，無非就兩種：

window上面的全局作用域

不可在外部獲取的函數作用域

因為開發方式比較原始，所以這種網站的大部分都沒有進行源碼壓縮，源碼中甚至可以看到對應的注釋，所以分析網站暴露出來的源碼比較方便，以此查找所需的數據。

Vue打包生成后的網站

今天只針對了vue打包生成后的網站進行了分析。
此處以element-ui官網為例（是在想不起來什么網站是用vue寫的了）。

在分析這類網站時很簡單，需要分辨目標元素是否是由vue-runtime創建的。

// 獲取元素后查看是否有__vue__屬性 document.querySelector("#button").__vue__;

如下圖所示

以el-table為例分析具體數據

首先需要找到該組件的最外層元素（如果這個頁面沒有提取組件這里也可以說成是找到這個頁面的最外層元素），如下圖

這里其實是有兩種思路的，很明顯他的外層是一個父組件，而表格是子組件

獲取父元素的data

獲取表格的props

下方為具體代碼實現，為了方便閱讀，選擇器做了一定的省略

獲取父元素data

// 獲取到table元素 const table = document.querySelector(".el-table"); // 獲取父元素 const parentEl = table.parentNode; // 判斷父元素是否為vue構建出來的 if(parentEl.__vue__){// 獲取dataconsole.log(parentEl.__vue__._data) }// 或者也可以縮寫為這樣 document.querySelector(".el-table").parentNode?.__vue__?._data;

輸出如下

如果不確定元素嵌套的層數時可以查看 __vue__.$parent進行向上查找確定最外層元素

獲取子元素props

當幾乎確定這個元素為組件的時候也可以嘗試獲取props
實現代碼如下

// 獲取到table元素 const table = document.querySelector(".el-table"); if(table.__vue__){// 獲取dataconsole.log(table.__vue__._props) }

獲取結果如下，如你所見，其他的屬性也都是官方文檔上面定義的props

附：
前端如何監聽頁面中所有發送請求的事件？
在單頁應用中，如何優雅的監聽url的變化

好了，本文章到此結束，感謝閱讀！

總結

以上是生活随笔為你收集整理的网站逆向分析-vue打包后的网站数据获取的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。