關聯詞: PDF 下載 FLASH 網頁 HTML 報告 內嵌 瀏覽器 文檔 FlexPaperViewer swfobject pdf2swf 。
這個需求是最近幫一個學妹處理一下各大高校網站里的 PDF 文檔下載,又增加了無用的逆向知識 XD ,根據這些思路,可以有效的下載這類網站的文檔文件。
這需要你有點 HTML5 和 Flash 時代的基礎認知,順便能看 F12 的 network 、cache 等內容,推算真實地址等。
我從最簡單的說起,首先准備一個谷歌瀏覽器,有趣的是需要谷歌瀏覽器的打印功能,導出到 PDF 上。
第一種樣本,是直接的 .pdf 該類直接下載即可,沒有難度。
第二種樣本,是現代 H5 + JS 內嵌 PDF 瀏覽器的方式。
屬於現代 H5 JS 的產物,需要用 F12 開發者工具看源碼推斷 PDF 文件路徑,接下來截圖舉例。
對其右鍵選檢查,此時進入 F12 的 HTML 元素審查位置,可以找到它的定義代碼。
仔細看標簽內容可以發現,存在 data-url="/_upload/article/files/3d/8d/78ed42f44031bcb6793b0eb27af1/8e6ad93b-4902-4fd8-bba5-bfabaf852885_1.png" 這類標簽。
試圖搜索(Ctrl + F)頁面內容中的 .pdf 文件后綴,就會發現它的文件源存在了 pdfsrc="/_upload/article/files/3d/8d/78ed42f44031bcb6793b0eb27af1/8e6ad93b-4902-4fd8-bba5-bfabaf852885.pdf" 。
此時需要確定它的服務器源,從而獲取真實地址,可以絕大概率是從這里來的。
覺得還不太相信?那就再來一個。
直接進 F12 直接搜 .pdf 直接找到源直接替換直接得到文件路徑。
聰明的你學會了嗎?接着我們進入第三種樣本吧。
第三種樣本,舊時代的遺留產物 FLASH 下的 PDF 文檔
這個需要一點編程基礎了,我之前思路走歪了,現代電腦已經不支持過去的 Flash 軟件了,我先是獲取了 swf 后試圖轉換圖片、反編譯其內容,但能夠在 Win10 上 work 的軟件已經不多了。
最后痛定思痛,想起,我是個程序猿鴨,為什么要這么耿直的使用工具呢?沒錯,我直接懟代碼進去了,就可以解決了嘻嘻,接下來就是復現這個過程。
注意,針對 swf 轉 pdf 問題文件,可以使用 github 的代碼去實現,在這里不過多提及,關鍵詞可以是 pdf2swf 和 FlexPaper 使用正向代碼解決問題。
只是想起以前瀏覽器還可以直接讀取 flash swf 文件的,不知道為什么現在已經不支持了。
從右鍵我們可以得知它是 flash 播放器,這個真的沒辦法通過 html 得到,那么怎么辦呢。
搜索 .pdf 或 .doc 都沒用了,根本得不到它的文件,反而可以得到 swf 文件,講道理,如果是早年間的電腦,相關工具應該還是可以解決問題的,如 swf2png 這類工具。
但是 win10 已經無法正常 work 了,那么我在這個地方浪費了很久以后,仔細看了一下它的組件,對,就是 /system/resource/swf/FlexPaperViewer.swf 挺古老的東西了。
順便一提,谷歌瀏覽器將在 2020年12月終止 flash 組件。
那么,正面轉換 swf 已經不現實了,我開始閱讀標簽代碼,如下圖。
<p><embed width="650" height="600" src="/system/resource/swf/FlexPaperViewer.swf" type="application/x-shockwave-flash" isdependent="0" allowfullscreeninteractive="true" allowfullscreen="true" allownetworking="all" profileport="0" profile="0" seamlesstabbing="1" swremote="" bgcolor="" embedmovie="0" devicefont="0" scale="NoScale" allowscriptaccess="always" base="" menu="-1" salign="LT" quality="High" loop="-1" play="0" wmode="Opaque" flashvars="SwfFile=/__local/4/50/01/98B6C628FBB041488F68F907AD6_FB8BA217_F7CF8.swf?e=.swf&Scale=0.6&key=cbd65a4d4530487cc02$6103f82513859c4feeb&ZoomTransition=easeOut&ZoomTime=0.5&ZoomInterval=0.2&FitWidthOnLoad=true&MinZoomSize=0.2&MaxZoomSize=5&InitViewMode=Portrait&ViewModeToolsVisible=true&ZoomToolsVisible=true&NavToolsVisible=true&CursorToolsVisible=true&SearchToolsVisible=true&localeChain=zh_CN&isPrintable=false&isTextSelectable=false"><br></p>
寫代碼嘛,這里就是定義這個 FlexPaperViewer 組件的調用參數,那么看到 isPrintable=false ,這里 false 就是關,表示停用打印機選項,改成 true 先。
發現沒反應,這是因為這時候標簽沒有刷新,所以編輯一下再保存,讓 JS 重載改組件。
此時你會看到一個神奇的選項出來了,對的,就是打印機,那么你知道怎么做了嗎?
打印它,然后另存為 PDF 就可以了。
嗯,接下來你都知道了吧。
第四種樣本,炫酷的動畫版 PDF 文檔。
這一種動畫制的 PDF 版本,有點復雜,依賴庫使用的是 SWFObject 組件,但也不是不能搞,但不能像前面的那種方式處理了。
/*! SWFObject v2.2 <http://code.google.com/p/swfobject/>
is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
現在怎么辦呢?打印也沒用,文件源也找不到,只好仔細觀察 network 的數據流了。
PC 頁面下什么也做不了了,那就切換到手機頁面試試
此時注意到 network 的圖片文件在隨着翻頁加載。
現在發現它在獲取圖片了,這是個好消息。
對的,我們可以將全部圖片下載下來,然后保存全部網頁,包括圖片。
有了圖片,就可以使用福昕 PDF 圖片合並工具了。
現在就可以得到,但這種方法下得到的像素會有一點損失,並不是最佳的,主要是因為 jpg 的有損顯示導致的字體模糊。
如果你仔細閱讀代碼,也許可以把打印機的選項開起來,但我看到這個高度封裝的 nodejs 產物就沒有耐心了(攤手。
第五種樣本,惡心的 PPT 視頻
沒想到吧,還有 MP4 的動畫版本。
最后一種的 MP4 樣本,我認為可以忽略了,如果真的要處理,那就丟到 ScreenToGif 中取關鍵幀出來,去除相似度較高的內容即可。
最后,這些內容希望可以給你一些啟發,嘻嘻。