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

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

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

中圖分類號：TP311? 文獻(xiàn)標(biāo)識碼：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? 引? 言

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

1? 需求分析及技術(shù)選型

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

1.1? 實時記錄

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

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

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

1.2? 真實不可篡改

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

1.3? 平臺回放

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

2? 方案設(shè)計

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

2.1? 區(qū)塊鏈平臺

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

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

2.2? 存證JSSDK

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

2.3? 存證服務(wù)端

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

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

2.4? 可視化回放平臺

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

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

3? 方案對比與評價

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

此外，存證JSSDK集成包體積小（153 KB）、錄屏存儲文件體積相對較?。?00 KB），與錄屏?xí)r長不存在線性遞增關(guān)系，如表1所示，滿足了互聯(lián)網(wǎng)基本應(yīng)用場景的錄屏回放需要。

4? 結(jié)? 論

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

參考文獻(xiàn)：

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

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

5053041677.

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

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

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

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

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

[8] 鄭永清，孔蘭菊，洪曉光，等.基于區(qū)塊鏈的數(shù)據(jù)資產(chǎn)可視化方法、系統(tǒng)及介質(zhì)及設(shè)備：202011495377.0 [P].

2021-03-19.

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

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

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