余筱 廖卓 邱浚漾 劉宇昆 姚敏

摘? 要：文章介紹了一種通過區(qū)塊鏈技術和回放錄制庫rrweb實現可視化回放的解決方案。該方案通過存證JSSDK實現操作腳本記錄，存證服務端對接區(qū)塊鏈平臺上鏈，固化腳本文件不可篡改可追溯，可視化平臺通過導入的腳本回放出爭議事件的操作。方案設計中引入了存證JSSDK、存證服務端、區(qū)塊鏈平臺和可視化回放平臺四個網元實現最終可視化回放的效果。該方案在物流信息追溯、網絡安全可視化回放等領域具有廣泛應用前景。

關鍵詞：可視化回放；區(qū)塊鏈；回放錄制庫；存儲不可篡改

中圖分類號：TP311? 文獻標識碼：A? 文章編號：2096-4706（2023）17-0036-04

Research on Visual Replay Technology Based on Blockchain

YU Xiao， LIAO Zhuo， QIU Junyang， LIU Yukun， YAO Min

（China Mobile Internet Co.， Ltd.， Guangzhou? 510640， China）

Abstract： This paper introduces a solution for visualizing playback through Blockchain technology and the playback recording library rrweb. The proposed scheme realizes the record of operation scripts by evidence collection JSSDK， and the evidence collection server connects to the Blockchain platform and solidifies script files for immutable storage and traceable. The visual platform can replay the operation of disputed events by importing the scripts. The scheme design introduces four components such as evidence collection JSSDK， evidence collection server， the Blockchain platform and the visual replay platform to realize final visual replay effect. The scheme has broad application prospects in areas such as logistics information tracing and network security visual replay.

Keywords： visual replay; Blockchain; playback recording library; immutable storage

0? 引? 言

隨著互聯網應用的不斷發(fā)展及網絡智能設備的大量普及，人們的社會生活整體向網絡世界遷移。根據智研咨詢統計，截至2022年1月，全球互聯網用戶數量達到49.5億人，同比增長4%，互聯網用戶占總人口的62.5%，每個互聯網用戶平均每天使用互聯網的時間是6小時58分鐘，通過手機訪問互聯網的用戶占了92.1%。隨著使用時間增長，用戶通過手機訪問互聯網應用發(fā)生不知情注冊、授權、訂購等行為也越來越多，當糾紛發(fā)生后應用方和用戶均缺乏第三方有公信力的證據舉證事件中的行為軌跡，迫切需要一種能夠可視化還原之前操作的新型技術，不僅將互聯網應用發(fā)生的具體步驟重現，而且能證明是未經過篡改的真實操作。

1? 需求分析及技術選型

可視化回放有三點技術要求：一是實時記錄當前操作內容，同時將操作內容整合成文件形式，要求文件不能過大方便后續(xù)存儲及回放；二是記錄的操作文件要保證其真實性，未經過篡改毀壞；三是操作文件支持平臺可回放，真實還原之前操作內容。

1.1? 實時記錄

目前市面上常見的錄屏技術有canvas截圖繪制視頻和rrweb錄制兩種方案。

canvas截圖是一種利用canvas標簽來生成或者下載圖片的技術，canvas標簽是html5提供的一種新標簽，可以用Javascript來繪制圖形、動畫和游戲等。canvas截圖繪制視頻，是指在用戶瀏覽網頁過程中，通過canvas技術繪制多個DOM快照截圖，再將多個截圖合并成一段錄屏視頻。假設視頻幀數為50幀，幀數代表每秒所需的截圖數量，為了視頻播放流暢和清晰，每張截圖為300 KB，1分鐘長度的視頻對應的帶寬需求為878.906 MB，所以該方案性能要求高，用戶體驗差，不推薦使用。

rrweb是一個開源的Web錄制和回放的基礎庫，可以將頁面中的DOM以及用戶操作保存為可序列化的數據，以實現遠程回放。rrweb的錄制技術主要包括，使用MutationObserver監(jiān)聽DOM變化，并將變化記錄為增量快照；使用addEventListener監(jiān)聽用戶交互事件，并將事件記錄為事件快照；使用performance API獲取頁面性能數據，并將數據記錄為性能快照；使用WebSocket或XHR發(fā)送錄制數據到服務器，或者使用localStorage或IndexedDB保存到本地。

1.2? 真實不可篡改

考慮到區(qū)塊鏈技術具有真實不可篡改的特性，搭建區(qū)塊鏈平臺，利用分布式多節(jié)點記錄唯一賬本原理保存錄屏文件索引；開發(fā)區(qū)塊鏈DAPP將實時錄屏生成的腳本上傳到區(qū)塊鏈平臺，保存用戶操作行為日志與區(qū)塊鏈哈希值的關聯關系，保證記錄內容的完整性和可回溯性；同時區(qū)塊鏈平臺還提供文件錄屏核驗功能，可驗證本地錄屏文件與鏈上文件索引的一致性，確?；胤盼募恼鎸嵭院筒豢纱鄹男?。

1.3? 平臺回放

rrweb使用iframe作為回放的容器，將虛擬DOM渲染到iframe中，以實現頁面的隔離和安全，使用虛擬DOM重建頁面結構，并根據增量快照更新DOM狀態(tài)。rrweb回放技術主要包括使用addEventListener模擬用戶交互事件，并根據事件快照觸發(fā)相應的行為；使用requestAnimationFrame控制回放速度，并根據性能快照顯示頁面性能指標；使用WebSocket或XHR接收服務器端的錄制數據，或者使用localStorage或IndexedDB讀取本地的錄制數據?？梢詫rweb網頁回放集成到區(qū)塊鏈平臺前端瀏覽器中，通過平臺入口輸入對應錄屏文件的哈希值，索引到對應的鏈上文件，下載到本地瀏覽器中實現還原。

2? 方案設計

基于需求分析及技術調研結果，最終選擇了基于區(qū)塊鏈的可視化回放方案。如圖1所示，方案設計了四個網元滿足系統功能：存證JSSDK、存證服務端、區(qū)塊鏈平臺和可視化回放平臺。其中存證JSSDK滿足客戶端錄制操作的需求，存證服務端接收存證JSSDK的錄制腳本，并且按照智能合約的數據格式上傳區(qū)塊鏈平臺，最終用戶可在區(qū)塊鏈平臺校驗對比錄制腳本真實性，支持在可視化界面回放。

2.1? 區(qū)塊鏈平臺

本文采用的區(qū)塊鏈平臺分為三層，基礎設施層（基于IPFS的區(qū)塊數據存儲）、聯盟鏈網絡層（共識網絡）和業(yè)務層（智能合約）。其中基礎設施層包括區(qū)塊鏈節(jié)點和IPFS節(jié)點兩部分，區(qū)塊鏈指安裝了運行底層區(qū)塊鏈所需的軟件包的節(jié)點，負責數據共識上鏈等操作，IPFS指數據存儲節(jié)點，負責IPFS認證管理和數據上傳下載等操作；聯盟鏈網絡層指共識算法保障節(jié)點安全，業(yè)界通用共識算法有Raft、Kafka、TBFT等，本文結合實踐經驗采用DPos+Pipelined BFT委托權益證明+流水線拜占庭容錯，容忍最多6個惡意出塊節(jié)點，適用于可以接受最長2分鐘的交易確認速度的場景；業(yè)務層指根據業(yè)務所需規(guī)則編寫智能合約。針對錄屏文件這種大報文消息區(qū)塊鏈提供區(qū)塊鏈+IPFS方式實現，IPFS由區(qū)塊鏈系統提供，存證服務端使用http方式遠程調用，無須安裝客戶端，存證服務端將錄屏文件哈希值等關鍵數據上傳區(qū)塊鏈系統，等需要回放時再從區(qū)塊鏈上獲取到錄屏文件哈希值后再從IPFS系統獲取錄屏文件。

區(qū)塊鏈管理平臺提供鏈賬戶管理和智能合約賬戶管理能力，統一管理聯盟鏈接入方的賬號權限。存證服務端為實現區(qū)塊鏈上鏈功能，向區(qū)塊鏈管理平臺申請了鏈賬戶用于數據簽名上鏈，申請了智能合約賬戶用于發(fā)布智能合約。

2.2? 存證JSSDK

存證JSSDK提供了獲取鑒權憑證、開始錄制、取消錄制、結束錄制上鏈等調用方法。首先根據申請的賬號向存證服務端發(fā)起鑒權請求，參數校驗通過后開始錄制，頁面錄屏功能利用了現代瀏覽器的MutationObserver，該接口提供了監(jiān)視對DOM樹所做更改的能力。初始化的時候依照document.readyState狀態(tài)先全量記錄DOM樹，然后根據這個接口記錄下DOM的變化過程。并將不同時間點收集到的操作指令或者某個DOM的變化作為一個增量快照，在原先快照的基礎上，不斷加入根據行為解析的DOM數據，構建了后續(xù)的快照，減少大量數據的存儲或傳輸。錄制結束后將最終生成的所有快照合成轉化為json格式的腳本文件并調用結束錄制上鏈方法。

2.3? 存證服務端

存證服務端主要提供兩個方法，第一個是服務端鑒權方法，校驗請求來源合法性，通過校驗后分配一個身份令牌給存證JSSDK，令牌兩小時有效，不續(xù)期則需要重新獲取。第二個是存證上鏈方法，支持多種文件格式存證上鏈，上鏈信息除了腳本文件之外還包括關聯該腳本的用戶信息（手機號碼、身份證等唯一標識用戶的信息）。該方法還集成了區(qū)塊鏈DAPP的接口，實現ipfs token獲取、ipfs文件上傳和下載、交易上鏈等功能。

存證服務端對接區(qū)塊鏈平臺，存證JSSDK通過調用存證上鏈的方法把錄屏腳本文件固化在區(qū)塊鏈上。

2.4? 可視化回放平臺

回放的時候利用iframe創(chuàng)建沙漏環(huán)境，解析收集到的events 集合并將記錄的events 集合在iframe中進行回放。當事件類型為FullSnapshot時，會調用rebuild，根據快照數據生成頁面的DOM，當事件類型為IncrementalSnapshot時，則說明是增量快照，即收集的數據只是DOM 的變化數據或者對應的用戶行為數據，根據不同的數據類型做對應的節(jié)點插入，刪除，節(jié)點屬性的更改等。

互聯網應用接收用戶投訴工單，將工單對應的本地腳本和交易哈希值發(fā)送到存證服務端校驗，存證服務端根據交易哈希查詢到的區(qū)塊數據下載上鏈的腳本，將本地腳本與上鏈腳本做對比，兩者一致情況下，載入存證回溯頁面進行回放。

3? 方案對比與評價

在傳統的可視化方案中，錄屏數據無法完整存儲，而且可能存在篡改和偽造等問題。此外，由于數據存儲和傳輸的限制，傳統方案畫面質量低、回放卡頓、回放效率低，往往無法提供高質量的錄屏回放。相比之下，本文提出的方案在功能和性能方面都有突出的優(yōu)勢。該方案采用了rrweb和區(qū)塊鏈技術，實現了全過程錄制、視頻幀級還原、高性能無壓縮、高質量重現操作現場等功能，并能夠根據存證哈希值快速定位到視頻原件，提高了回放效率和精度。手機操作原始頁面如圖2所示，終端應用已集成存證JSSDK，具備屏幕錄制功能，可視化回放平臺存證回溯輸入頁面如圖3所示，輸入對應存證數據指紋即可開始回放，實際回放頁面如圖4所示。

此外，存證JSSDK集成包體積?。?53 KB）、錄屏存儲文件體積相對較?。?00 KB），與錄屏時長不存在線性遞增關系，如表1所示，滿足了互聯網基本應用場景的錄屏回放需要。

4? 結? 論

本文介紹了一種利用區(qū)塊鏈技術和回放錄制庫rrweb實現可視化回放的解決方案。通過存證JSSDK記錄用戶操作腳本、存證服務端上傳到區(qū)塊鏈平臺，以及可視化平臺導入腳本回放用戶操作，實現了快速定位問題、降低人工排查成本的效果，并增強了數據的安全性和可信度。相信這種解決方案可以應用于許多領域，例如金融、醫(yī)療和物流等。未來，將繼續(xù)研究和探索區(qū)塊鏈技術在可視化回放領域的應用，為用戶提供更好的服務。

參考文獻：

[1] hcsy.rrweb介紹及原理解讀 [EB/OL].（2022-03-26）.https：//zhuanlan.zhihu.com/p/488020176.

[2] 思學堂.學會Rrweb前端可回溯方案，再也不怕客訴了 [EB/OL].（2021-08-23）.https：//juejin.cn/post/699945941

5053041677.

[3] 郝潤雨.rrweb實現原理介紹 [EB/OL].（2023-04-18）.https：//juejin.cn/post/7223200148862746684.

[4] 王曉文，沈思.我國區(qū)塊鏈領域研究態(tài)勢及前沿演化可視化分析 [J].技術與創(chuàng)新管理，2022，43（2）：188-192.

[5] 張燦，薛云志，陳軍成.一種基于Android平臺GUI錄制回放工具的設計與實現 [J].計算機應用與軟件，2012，29（12）：6-9+68.

[6] 李江.基于hook機制的android自動化腳本錄制回放框架的設計與實現 [J].軟件，2014，35（10）：1-6.

[7] 閆凱，孫軍梅，劉雪嬌，等.Android應用錄制與回放工具設計 [J].計算機系統應用，2018，27（9）：249-255.

[8] 鄭永清，孔蘭菊，洪曉光，等.基于區(qū)塊鏈的數據資產可視化方法、系統及介質及設備：202011495377.0 [P].

2021-03-19.

[9] 蔣麗雯.基于區(qū)塊鏈的數據分析及可視化應用 [J].區(qū)域治理，2021（2）：258-259.

[10] 李少恒.一種區(qū)塊鏈的可視化方法及系統：201710448099.5 [P].2017-11-03.

作者簡介：余筱（1988—），女，漢族，江西南昌人，副高，碩士研究生，研究方向：區(qū)塊鏈技術在互聯網行業(yè)的應用。