基于HTML5的加密直播系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

黃 明， 葉德建

(復(fù)旦大學(xué) 軟件學(xué)院， 上海 201203)

?

基于HTML5的加密直播系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

黃 明， 葉德建

(復(fù)旦大學(xué) 軟件學(xué)院， 上海 201203)

隨著在線直播的飛速發(fā)展，保護(hù)內(nèi)容不被盜播和竊取對(duì)視頻網(wǎng)站而言越來(lái)越重要。另外，目前廣泛使用的Flash播放插件由于性能低、安全性差逐步被HTML5原生播放器所替代，如何利用HTML5技術(shù)實(shí)現(xiàn)直播的全棧架構(gòu)成為亟待解決的問(wèn)題之一。設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)基于HTML5的加密直播系統(tǒng)，保證了直播數(shù)據(jù)傳輸?shù)陌踩耘c穩(wěn)定性，填補(bǔ)了HTML5加密播放器市場(chǎng)的空白，對(duì)提高視頻網(wǎng)站的安全性能、保護(hù)內(nèi)容的數(shù)字版權(quán)具有現(xiàn)實(shí)意義。

視頻直播； 流媒體加密； 漸進(jìn)式下載； 版權(quán)保護(hù)

0 引言

近年來(lái)，得益于“光網(wǎng)城市”的不斷推進(jìn)，光纖網(wǎng)絡(luò)走進(jìn)千家萬(wàn)戶，設(shè)備接入網(wǎng)絡(luò)的條件得到大幅度提升，視頻網(wǎng)站因此得到了迅猛的發(fā)展，在線直播是其重點(diǎn)業(yè)務(wù)之一。與電視等傳統(tǒng)媒體不同，網(wǎng)絡(luò)直播具有門(mén)檻低、互動(dòng)性強(qiáng)等特點(diǎn)，更受年輕一代觀眾的歡迎。如目前樂(lè)視網(wǎng)購(gòu)買(mǎi)了英超、F1賽車(chē)以及大量網(wǎng)球賽事的網(wǎng)絡(luò)轉(zhuǎn)播權(quán)，并通過(guò)在線直播的方式提供轉(zhuǎn)播服務(wù)，以其良好的使用體驗(yàn)吸引了大量觀眾。

盜播問(wèn)題是當(dāng)今視頻網(wǎng)站亟待解決的問(wèn)題之一，其能影響正版資源的訪問(wèn)流量，阻礙版權(quán)方回籠資金，從而破壞整個(gè)內(nèi)容生態(tài)鏈。除了通過(guò)法律手段，視頻網(wǎng)站也可以使用技術(shù)手段防止視頻資源泄露，對(duì)視頻進(jìn)行加密是一種有效的解決方案。

同時(shí)，隨著HTML5技術(shù)的興起，F(xiàn)lash播放插件逐漸走向沒(méi)落。2010年，蘋(píng)果宣布iOS系統(tǒng)放棄對(duì)Flash的支持，2016年12月，Google在Chrome瀏覽器中，將網(wǎng)頁(yè)默認(rèn)播放器改為 HTML5，用戶如需使用 Flash插件，必須進(jìn)行手動(dòng)加載?？梢?jiàn)Flash播放器被淘汰只是時(shí)間問(wèn)題。目前市面上暫時(shí)沒(méi)有基于HTML5的加密播放器，因此設(shè)計(jì)并實(shí)現(xiàn)一款基于HTML5的加密直播播放器具有重要意義。

videojs-flow開(kāi)源插件是一個(gè)基于HTML5技術(shù)實(shí)現(xiàn)的直播框架，能夠?qū)LV數(shù)據(jù)塊逐個(gè)轉(zhuǎn)碼成MP4視頻流和音頻流供播放器播放。但是，其對(duì)數(shù)據(jù)順序很敏感，傳輸中數(shù)據(jù)包后發(fā)先至造成的書(shū)序混亂會(huì)造成播放器崩潰。

綜上所述，本文的主要工作為：(1)在瀏覽器端實(shí)現(xiàn)密文視頻數(shù)據(jù)的解密；(2)使用HTML5原生播放器實(shí)現(xiàn)直播視頻的播放；(3)改進(jìn)videojs-flow，保證直播視頻數(shù)據(jù)包的順序傳輸。

1 HTML5的播放與加密技術(shù)

HTML5的播放與加密分別依賴(lài)W3C推出的MediaSourceExtensions(媒體源擴(kuò)展，簡(jiǎn)稱(chēng)MSE)草案和WebCryptography API。

(1) MediaSourceExtensions草案

MSE草案能夠允許JavaScript生成用于播放的媒體流，瀏覽器端從而可以完全使用JavaScript腳本預(yù)先獲取并緩沖媒體數(shù)據(jù)?；谠摬莅福岸四_本需要?jiǎng)?chuàng)建一個(gè)MediaSource對(duì)象作為HTML5媒體標(biāo)簽的視頻源，該對(duì)象中至少包含一個(gè)負(fù)責(zé)維護(hù)媒體流的SourceBuffer對(duì)象，通過(guò)調(diào)用appendBuffer函數(shù)向其添加媒體數(shù)據(jù)可以實(shí)現(xiàn)音/視頻的播放。

(2) WebCryptography API

Web密碼學(xué)API(簡(jiǎn)稱(chēng)webcrypto)是W3C新近推出的一項(xiàng)標(biāo)準(zhǔn)，其允許瀏覽器端的網(wǎng)頁(yè)應(yīng)用程序進(jìn)行基礎(chǔ)的密碼學(xué)操作，如哈希、簽名生成/驗(yàn)證以及加密/解密等。在最新版本的Chrome、Firefox、Opera和Edge瀏覽器中，AES、RSA、SHA等常用算法均得到了原生支持。

2 加密系統(tǒng)的架構(gòu)

為了保證瀏覽器能夠正常接收數(shù)據(jù)并完成解密播放，本節(jié)設(shè)計(jì)了包括服務(wù)器與瀏覽器的加密系統(tǒng)架構(gòu)，兼顧了整體的性能與安全性。

由于數(shù)據(jù)在傳輸過(guò)程中存在被中間人和惡意用戶截獲的可能，因此需要引入各種加密算法，對(duì)傳輸中的視頻數(shù)據(jù)進(jìn)行有效的保護(hù)。瀏覽器調(diào)試工具的存在使得保證密鑰的安全傳輸存在很大困難，采用AES密鑰的結(jié)構(gòu)可以很好地解決該問(wèn)題,如圖1所示。

圖1 AES密鑰的再加密

RSA私鑰由前端腳本利用webcrypto隨機(jī)生成并保存于本地，無(wú)法被惡意用戶與中間人獲取。而能夠被截獲的RSA公鑰不能用來(lái)解密，即使泄露也不會(huì)影響密文信息的安全。由于效率原因，RSA算法不直接對(duì)視頻數(shù)據(jù)進(jìn)行加密。AES算法的運(yùn)算效率遠(yuǎn)高于RSA算法，因此視頻數(shù)據(jù)的加密使用AES算法進(jìn)行。

3 服務(wù)器搭建

服務(wù)器端有以下任務(wù)：(1)向客戶端發(fā)送必要的解密參數(shù)；(2)對(duì)視頻數(shù)據(jù)包進(jìn)行加密并發(fā)送；(3)為每個(gè)發(fā)送的數(shù)據(jù)包編上序號(hào)。

位于瀏覽器的客戶端通過(guò)WebSocket協(xié)議與服務(wù)器進(jìn)行數(shù)據(jù)傳輸，這相當(dāng)于創(chuàng)建了雙方專(zhuān)用的通信管道，攻擊者無(wú)法冒用客戶端身份通過(guò)此連接與服務(wù)器通信。并且，服務(wù)器可以清楚地知道自身維護(hù)的連接數(shù)量以及對(duì)方的身份。同時(shí)，在WebSocket連接中雙方發(fā)送的是二進(jìn)制字節(jié)流，能夠?qū)γ襟w數(shù)據(jù)的實(shí)際位置進(jìn)行有效隱藏。

首先服務(wù)器需要接收來(lái)自客戶端的RSA公鑰。服務(wù)器使用Node.js實(shí)現(xiàn)，該部分的功能由HTTP模塊提供。服務(wù)器對(duì)外開(kāi)放接口的形式為URL，客戶端在訪問(wèn)時(shí)將公鑰作為參數(shù)以POST的方式請(qǐng)求該URL即可。

本文選用CTR模式下的256位AES算法對(duì)視頻數(shù)據(jù)進(jìn)行加密，該算法需要密鑰與IV兩個(gè)參數(shù)。服務(wù)器收到請(qǐng)求后，首先隨機(jī)生成一個(gè)32字節(jié)的Buffer對(duì)象作為密鑰，一個(gè)16字節(jié)Buffer對(duì)象作為IV值。之后，將兩個(gè)Buffer組合并使用剛才獲取的公鑰字符串對(duì)其進(jìn)行加密，代碼如下：

其中crypto為Node.js的原生加密模塊，pub_key為客戶端發(fā)送的公鑰字符串，buffer為組合后的48字節(jié)二進(jìn)制數(shù)據(jù)，返回值encryptedAESInfo為一個(gè)Buffer對(duì)象，內(nèi)容是加密后的AES密鑰與IV值。第二行代碼的目的是將Buffer對(duì)象中的二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為Base64字符串。

另一方面，服務(wù)器生成一個(gè)16個(gè)字符的隨機(jī)字符串作為路徑，并挑選一個(gè)空閑端口啟動(dòng)一個(gè)WebSocket服務(wù)器，其對(duì)應(yīng)一個(gè)有效的URL，例如ws://10.132.141.234:17079/BkE4PoRhVuDsxHns?？蛻舳送ㄟ^(guò)該URL建立與服務(wù)器的WebSocket連接，從而能夠接收視頻數(shù)據(jù)。

之后，服務(wù)器將base64編碼的AES密鑰信息與WebSocket服務(wù)器URL兩個(gè)字符串打包為一個(gè)JSON對(duì)象并作為HTTP Response返回客戶端。客戶端成功接收后便可以建立與服務(wù)器的WebSocket連接。

WebSocket服務(wù)器的作用是將原始的FLV流切分成大小為10KB的連續(xù)數(shù)據(jù)塊，在編上序號(hào)并加密之后發(fā)送給客戶端，如圖2所示。

圖2 WebSocket服務(wù)器工作原理

服務(wù)器采用request模塊從流中實(shí)時(shí)讀取數(shù)據(jù)，關(guān)鍵代碼如下：

從流中每得到一個(gè)數(shù)據(jù)塊，都將其放入dataPool隊(duì)列中，buf中保存著清理緩沖區(qū)后剩余的數(shù)據(jù)，sum變量中保存著隊(duì)列與buf變量中所有數(shù)據(jù)的字節(jié)總數(shù)，當(dāng)其超過(guò)10KB時(shí)，會(huì)調(diào)用flush函數(shù)將buf中和從dataPool中移除的數(shù)據(jù)合并為一個(gè)10KB的數(shù)據(jù)塊并將其加密發(fā)送給客戶端，超過(guò)10KB的剩余數(shù)據(jù)重新保存在buf中，再將sum值設(shè)置為buf當(dāng)前的長(zhǎng)度，加密的核心代碼為：

其中aesKey為AES算法的密鑰，iv代表計(jì)數(shù)器，buffer為待加密Buffer對(duì)象。

服務(wù)器維護(hù)著一個(gè)自零開(kāi)始的變量，每當(dāng)發(fā)送一個(gè)加密數(shù)據(jù)塊時(shí)，其都被包含在數(shù)據(jù)消息中，之后，該變量自動(dòng)加1。該變量記錄數(shù)據(jù)包的順序編號(hào)，被用于在接收方進(jìn)行排序。

4 客戶端的搭建

客戶端需要對(duì)加密數(shù)據(jù)進(jìn)行解密并根據(jù)數(shù)據(jù)包編號(hào)的順序進(jìn)行播放。

(1) 客戶端結(jié)構(gòu)

客戶端基于videojs-flow項(xiàng)目并作出了的改進(jìn)，加入了密文視頻數(shù)據(jù)解密功能并通過(guò)緩沖區(qū)實(shí)現(xiàn)了數(shù)據(jù)包的排序,如圖3所示。

圖3 對(duì)videojs-flow的改進(jìn)

服務(wù)器實(shí)現(xiàn)了數(shù)據(jù)的切分加密以及編號(hào)工作，客戶端完成接收后首先需要將數(shù)據(jù)包進(jìn)行解密，之后將明文數(shù)據(jù)放入緩沖區(qū)，利用其編號(hào)進(jìn)行排序，保證輸出的順序。

(2) 客戶端工作流程

首先,客戶端需要新建一個(gè)MediaSource對(duì)象，再調(diào)用全局對(duì)象URL的createObjectURL函數(shù)生成該MediaSource對(duì)象的ObjectURL并賦給頁(yè)面video元素的src屬性。之后，調(diào)用該對(duì)象的addSourceBuffer函數(shù)兩次，傳入的參數(shù)分別是video/mp4;codecs="mp4a.40.2"和video/mp4;codecs="avc1.42E01E"，從而生成代表視頻和音頻的兩個(gè)SourceBuffer對(duì)象。最后，讓MediaSource對(duì)象監(jiān)聽(tīng)sourceopen事件。觸發(fā)該事件意味著可以向SourceBuffer對(duì)象中傳入視頻數(shù)據(jù)。

客戶端通過(guò)調(diào)用webcrypto的generateKey函數(shù)生成RSA密鑰對(duì)。之后，將公鑰以POST請(qǐng)求的方式發(fā)送給HTTP服務(wù)器，并得到包含base64格式加密密鑰與WebSocket服務(wù)器地址的返回消息。接著，客戶端將AES加密密鑰從返回?cái)?shù)據(jù)中提取出來(lái)，相關(guān)代碼如下：

其中privateKey為私鑰對(duì)象，aes_base64為base64編碼的被RSA公鑰加密過(guò)的AES密鑰信息，aes_key為解密后的AES密鑰對(duì)象，其中涉及將密鑰二進(jìn)制數(shù)據(jù)從base64字符串中解析出、使用RSA私鑰解密、從整體數(shù)據(jù)中切分和導(dǎo)出為CryptoKey對(duì)象四個(gè)步驟。在webcrypto中，只有合法的CryptoKey對(duì)象才能用于加密或解密操作。解碼出的keyInfo長(zhǎng)度為48字節(jié)，前32字節(jié)為AES密鑰，后16字節(jié)為計(jì)數(shù)器，保存在了ctr變量中。

然后，客戶端根據(jù)獲取的URL向WebSocket服務(wù)器請(qǐng)求建立連接。連接建立后，服務(wù)器端會(huì)源源不斷地向客戶端發(fā)送加密視頻數(shù)據(jù)塊，格式,如圖4所示。

圖4 直播數(shù)據(jù)塊內(nèi)部格式

數(shù)據(jù)塊的類(lèi)型為ArrayBuffer，頭4個(gè)字節(jié)保存著當(dāng)前數(shù)據(jù)塊的序號(hào)，后面是密文視頻數(shù)據(jù)。收到后，前端腳本將其解密，代碼如下：

緩沖區(qū)維護(hù)兩個(gè)值：current_id與stall_count，初始狀態(tài)均為0。前者表示下一個(gè)應(yīng)該解碼播放的數(shù)據(jù)對(duì)應(yīng)的序號(hào)，后者表示緩沖區(qū)中阻塞尚未播放數(shù)據(jù)塊的數(shù)量。正常播放過(guò)程中，每當(dāng)接收到視頻數(shù)據(jù)時(shí)都執(zhí)行的流程,如圖5所示。

圖5 緩沖區(qū)工作流程

解碼播放數(shù)據(jù)涉及到使用對(duì)應(yīng)視頻數(shù)據(jù)作為參數(shù)調(diào)用FlowTransmuxer對(duì)象的transmux函數(shù)，之后其分別生成視頻數(shù)據(jù)和音頻數(shù)據(jù)被添加到MediaSource對(duì)象中進(jìn)行播放，如圖6所示。

圖6 FlowTransmuxer將FLV數(shù)據(jù)轉(zhuǎn)碼為MP4音頻視頻

客戶端需要為FlowTransmuxer對(duì)象設(shè)置data事件的監(jiān)聽(tīng)器，一旦其觸發(fā)，即可從回調(diào)函數(shù)中取得數(shù)據(jù)消息。消息的type屬性可以是audio或video，如果是前者，將該消息中的視頻數(shù)據(jù)加入音頻SourceBuffer對(duì)象，如果是后者，則加入視頻SourceBuffer對(duì)象。數(shù)據(jù)載入之后，頁(yè)面中的video元素可以開(kāi)始視頻的播放。

5 實(shí)驗(yàn)與分析

本文選擇ipanda熊貓頻道作為直播源，對(duì)直播系統(tǒng)進(jìn)行了測(cè)試。源的基本信息如表1所示：

表1 直播配置信息

首先對(duì)播放進(jìn)行了測(cè)試，界面如圖7所示。

圖7 播放界面

加密視頻能夠在HTML5原生播放器中進(jìn)行正常播放，無(wú)明顯延遲和卡頓。同時(shí)，通過(guò)對(duì)加密時(shí)間的觀察，絕大多數(shù)10KB的塊都能夠在1毫秒內(nèi)完成解密計(jì)算，表明webcrypto具有高效的解密性能，證明了在瀏覽器端實(shí)現(xiàn)密文視頻數(shù)據(jù)的解密以及使用HTML5原生播放器實(shí)現(xiàn)直播視頻播放的可行性。

為了驗(yàn)證播放器對(duì)亂序數(shù)據(jù)的兼容性，對(duì)服務(wù)器發(fā)送的數(shù)據(jù)包進(jìn)行了延遲發(fā)送處理，時(shí)間間隔為1秒內(nèi)的隨機(jī)值，從而模擬出數(shù)據(jù)包隨機(jī)到達(dá)的效果。在沒(méi)有緩沖支持的播放器中，數(shù)據(jù)包不按順序到達(dá)會(huì)導(dǎo)致播放器立刻崩潰，而本文實(shí)現(xiàn)的具有數(shù)據(jù)包緩沖排序功能的直播播放器可以保證穩(wěn)定播放,如圖8所示。

圖8 直播過(guò)程中緩沖區(qū)內(nèi)的塊數(shù)量變化曲線

從圖8可以看出，緩沖區(qū)內(nèi)的數(shù)據(jù)包數(shù)量在0到10之間波動(dòng)，而不是無(wú)限增長(zhǎng)，說(shuō)明了緩沖區(qū)機(jī)制的有效性，能夠保證數(shù)據(jù)塊的有序播放。綜上所述，該加密播放器的設(shè)計(jì)方案達(dá)到了預(yù)期效果。

6 總結(jié)

本文通過(guò)對(duì)MediaSourceExtensions草案與Web CryptographyAPI的研究，在videojs-flow開(kāi)源直播插件的基礎(chǔ)上，設(shè)計(jì)并實(shí)現(xiàn)了一款利用HTML5原生組件實(shí)現(xiàn)的加密播放器，并通過(guò)實(shí)驗(yàn)對(duì)該方案的可行性進(jìn)行了驗(yàn)證。結(jié)果表明，其能夠高效地在瀏覽器端完成數(shù)據(jù)的解密和播放，并通過(guò)數(shù)據(jù)包排序的方式確保了播放器的穩(wěn)定。該設(shè)計(jì)擺脫了對(duì)Flash等第三方瀏覽器插件的依賴(lài)，順應(yīng)了Web未來(lái)的發(fā)展方向，對(duì)未來(lái)瀏覽器端多功能視頻播放器的設(shè)計(jì)與開(kāi)發(fā)具有實(shí)用價(jià)值。

[1] 陳道敏，周金泉．加密技術(shù)在流媒體安全傳輸中的應(yīng)用[J]．網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2004，11(1)：53-55．

[2] 張玉清, 賈巖, 雷柯楠, 等．HTML5新特性安全研究綜述[J]．計(jì)算機(jī)研究與發(fā)展，2016，53(10)：2163-2172．

[3] 姚寶巖．HTTP直播流媒體安全傳輸方法研究[J]．電腦知識(shí)與技術(shù)，2011，7(29)：7259-7261．

[4] Guolei Zhu, Fang Zhang, Wei Zhu．HTML5 based media player for real-time video surveillance[C]//IEEE．2012 5th International Congress on Image and Signal Processing(CISP)．Chongqing：IEEE，245-248．

[5] 阮一峰．ES6標(biāo)準(zhǔn)入門(mén)(第2版)[M]．北京：電子工業(yè)出版社，2015．

[6] Andrew Lombardi．WebSocket: Lightweight Client-Server Communications[M]．City of Sebastopol：O'Reilly Media，2015．

Design and Implementation of An Encrypted Live System Based On HTML5

Huang Ming, Ye Dejian

(Software School, Fudan University, Shanghai 201203, China)

With the rapid development of online broadcast, it becomes more important for video 1websites to protect contents from piracy and stealing. In addition, due to the low efficiency and poor performance of Flash player, the mainstream websites are using HTML5 player instead, how to implement the whole live broadcast system using HTML technology becomes one of the problems that need to be solved urgently. This paper designs and implements an encrypted live video system based on HTML5 native features ensuring the safety and stability of transmission and play, which fills the HTML5 encryption player market gaps and brings great practical significance in improving safety performance and protecting digital copyrights.

Live video; Streaming media encryption; Progressive download; Copyright protection

r為計(jì)數(shù)器；aes_key為保存著AES密鑰信息的CryptoKey對(duì)象；

為密文視頻數(shù)據(jù)；decrypted為解密后的視頻數(shù)據(jù)，可以看到，其與該數(shù)據(jù)塊的序號(hào)(變量id)一起被加載進(jìn)了緩沖區(qū)內(nèi)。

黃 明(1990-)，男，上海市數(shù)據(jù)科學(xué)重點(diǎn)實(shí)驗(yàn)室,碩士研究生，研究方向：網(wǎng)絡(luò)多媒體。 葉德建(1976-)，男，上海市數(shù)據(jù)科學(xué)重點(diǎn)實(shí)驗(yàn)室,副教授，研究方向：網(wǎng)絡(luò)多媒體。

1007-757X(2017)07-0040-05

TP311

A

2017.04.15)