一種基于口令驗(yàn)證的HTML5微場景安全預(yù)覽方案及制作發(fā)布系統(tǒng)

王超，路磊，方有軒，劉建

（中國移動(dòng)（深圳）有限公司，深圳 518048）

隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展和普及，截至2017年6月，中國手機(jī)網(wǎng)民占網(wǎng)民總數(shù)95.1%，達(dá)到7.24億人，特別是以微信為代表的移動(dòng)端即時(shí)通信軟件的不斷普及，互聯(lián)網(wǎng)營銷成為企業(yè)展示和推廣自身的產(chǎn)品和服務(wù)的重要手段，企業(yè)及個(gè)人對于微場景的制作和傳播越來越關(guān)注。在這種情況下，越來越多的平臺提供微場景、微游戲的制作與發(fā)布服務(wù)，展示的內(nèi)容包括文本、圖片、表單、動(dòng)畫、視頻及游戲等。這些平臺為了讓用戶實(shí)時(shí)查看制作的微場景在不同移動(dòng)終端的顯示效果，皆提供了實(shí)時(shí)預(yù)覽的功能。但是對于有安全、私密預(yù)覽與傳播需求的微場景制作者來說，這些平臺提供的預(yù)覽機(jī)制已經(jīng)不能滿足使用需求。為了解決這個(gè)問題，本文提出了一種基于口令驗(yàn)證的HTML5微場景安全預(yù)覽方案及制作發(fā)布系統(tǒng)，該方案提升微場景制作時(shí)實(shí)時(shí)預(yù)覽的效率，增加微場景口令設(shè)置及驗(yàn)證功能，微場景制作者可以安全、私密的進(jìn)行不同移動(dòng)終端的頁面實(shí)時(shí)預(yù)覽。

1 HTML5微場景制作和發(fā)布系統(tǒng)簡介

1.1 系統(tǒng)架構(gòu)

為了滿足集團(tuán)內(nèi)部對于HTML5微場景制作和發(fā)布的需求，我們自主研發(fā)了HTML5微場景制作和發(fā)布系統(tǒng)，該系統(tǒng)的系統(tǒng)架構(gòu)圖如圖1所示，這個(gè)系統(tǒng)可分為接入層、API接口層（Web服務(wù)器集群）、業(yè)務(wù)服務(wù)層、通用服務(wù)層、存儲層、緩存層、服務(wù)注冊中心和異步層。

（1）接入層：采用Ngnix服務(wù)器，實(shí)現(xiàn)反向代理、用戶認(rèn)證、權(quán)限分配、協(xié)議加解密及日志統(tǒng)計(jì)等功能。

（2）API接口層：實(shí)現(xiàn)微場景制作、微場景發(fā)布、微場景審核、微場景模板、微場景統(tǒng)計(jì)及報(bào)表分析等功能。

（3）業(yè)務(wù)服務(wù)層：采用Restful接口風(fēng)格和基于Dubbo的 RPC（Remote Procedure Call， 遠(yuǎn)程過程調(diào)用）機(jī)制，實(shí)現(xiàn)制作服務(wù)、發(fā)布服務(wù)、流程服務(wù)、模板服務(wù)、評論服務(wù)、資源服務(wù)、用戶服務(wù)及認(rèn)證服務(wù)。

（4）通用服務(wù)層：采用Restful接口風(fēng)格和基于Dubbo的RPC機(jī)制，實(shí)現(xiàn)通知服務(wù)、日志服務(wù)及搜索服務(wù)。

（5）存儲層：采用MySQL數(shù)據(jù)庫集群，分別用于用戶、微場景、日志數(shù)據(jù)的持久化存儲，使用Redis集群存儲資源文件（圖片、音樂等）。

（6）緩存層：本系統(tǒng)使用Redis對熱點(diǎn)數(shù)據(jù)進(jìn)行緩存。

（7）服務(wù)注冊中心：采用Zookeeper對系統(tǒng)的服務(wù)進(jìn)行管理，主要實(shí)現(xiàn)服務(wù)注冊、服務(wù)查詢、服務(wù)監(jiān)控和服務(wù)指標(biāo)的管理。

（8）異步層：采用RabbitMQ技術(shù)，實(shí)現(xiàn)短信驗(yàn)證、搜索、圖片加載及定時(shí)服務(wù)等功能。

1.2 系統(tǒng)主界面

HTML5微場景制作和發(fā)布系統(tǒng)主界面示意圖如圖2所示。

（1）功能菜單區(qū)域：功能菜單區(qū)域位于主界面的左邊，是系統(tǒng)的可操作功能菜單列表，包括我的模板、我的場景、場景管理、資源管理、模板管理及系統(tǒng)設(shè)置等。

（2）元素組件工具條：元素組件工具條位于主界面的上端，用于顯示微場景的部分設(shè)計(jì)元素組件，包括表單、互動(dòng)和特效等，用戶可以選擇該工具條中的組件進(jìn)行微場景的設(shè)計(jì)。

（3）編輯區(qū)域：微場景的編輯區(qū)域位于主界面的中間，用戶可以在該區(qū)域選擇微場景模板及所提供的設(shè)計(jì)元素組件進(jìn)行微場景的編輯與設(shè)計(jì)。同時(shí)該區(qū)域還包含一些元素組件，如文本、圖片、圖表、視頻、形狀、背景及音樂等，包含一些操作，例如撤銷、恢復(fù)、預(yù)覽及復(fù)制等。

（4） 頁面及組件管理區(qū)域：該區(qū)域位于主界面的右邊，用戶可以在該區(qū)域?qū)φ诰庉嫷奈鼍暗捻撁婕敖M件進(jìn)行管理，包括頁面的編輯、新增頁面、組件的查看與編輯。

2 基于口令驗(yàn)證的HTML5微場景安全預(yù)覽方案

圖2 HTML5微場景制作和發(fā)布系統(tǒng)主界面示意圖

該部分將詳細(xì)介紹基于口令驗(yàn)證的HTML5微場景安全預(yù)覽方案，該方案的處理流程如圖3所示。下面將從微場景口令的設(shè)置、口令的傳輸與存儲、微場景的預(yù)覽等方面對該方案進(jìn)行詳細(xì)闡述。

圖3 基于口令驗(yàn)證的HTML5微場景安全預(yù)覽方案處理流程

2.1 微場景的口令設(shè)置

用戶通過微場景的編輯區(qū)域完成微場景的編輯后，點(diǎn)擊“設(shè)置”按鈕，進(jìn)入微場景的設(shè)置頁面，用戶可以在該頁面進(jìn)行微場景基本信息和口令的設(shè)置，設(shè)置界面如圖4所示。

圖4 微場景設(shè)置界面

在微場景基本信息設(shè)置區(qū)域，用戶可以進(jìn)行微場景基本信息的設(shè)置，包括封面設(shè)置、場景名稱、描述、場景類型、服務(wù)對象、翻頁方式及場景音樂。

在口令設(shè)置區(qū)域，用戶可以進(jìn)行場景訪問狀態(tài)的設(shè)置，場景訪問狀態(tài)可選項(xiàng)為允許訪問、加密訪問?！霸试S訪問”狀態(tài)下，用戶可以直接訪問和預(yù)覽微場景頁面，無需設(shè)置和輸入口令。當(dāng)用戶想進(jìn)行私密預(yù)覽與傳播時(shí)，可以選擇“加密訪問”狀態(tài)，然后輸入6位口令，并設(shè)置口令的失效時(shí)間。為了控制微場景頁面預(yù)覽的安全性，避免用戶設(shè)置弱口令、易猜解口令，前端程序會對口令的復(fù)雜性進(jìn)行驗(yàn)證，要求用戶設(shè)置的6位口令中需至少包含字母、數(shù)字和特殊字符其中的兩種。

2.2 口令的傳輸與存儲

用戶完成微場景的編輯及口令的設(shè)置后，點(diǎn)擊“保存”按鈕，即可將微場景通過后端子系統(tǒng)保存到主數(shù)據(jù)庫中，并生成訪問鏈接，當(dāng)用戶進(jìn)行微場景預(yù)覽時(shí)，通過后端反向代理服務(wù)器將訪問鏈接以二維碼的形式呈現(xiàn)給用戶，供用戶在不同移動(dòng)終端進(jìn)行實(shí)時(shí)預(yù)覽。

特別說明的是，在將微場景頁面資源及口令發(fā)送到后臺服務(wù)器的過程中，為了保證口令的安全性，我們使用了跨平臺的加密算法XXTEA對口令進(jìn)行加密，這樣使得保存到數(shù)據(jù)庫中的口令是加密后的數(shù)據(jù)，避免微場景口令被第三方人員竊取。

2.3 微場景的安全預(yù)覽

用戶完成微場景的制作就可以開始微場景的預(yù)覽，微場景的預(yù)覽界面如圖5所示。該界面為用戶提供在PC瀏覽器上微場景預(yù)覽的窗口。

圖5 微場景預(yù)覽界面

圖5中的預(yù)覽鏈接二維碼，為用戶提供在移動(dòng)終端進(jìn)行微場景預(yù)覽的入口，當(dāng)用戶使用移動(dòng)終端設(shè)備的微信、瀏覽器等具有掃碼功能的軟件掃描預(yù)覽鏈接二維碼時(shí)，就會通過后端反向代理服務(wù)器向后端子系統(tǒng)發(fā)送請求，后臺子系統(tǒng)接收并響應(yīng)用戶請求，將口令驗(yàn)證頁面資源返回并渲染到移動(dòng)終端瀏覽器中。用戶輸入正確的口令，驗(yàn)證通過，后端反向代理服務(wù)器將完整的微場景頁面資源返回并渲染到移動(dòng)終端的瀏覽器中，生成預(yù)覽頁面，此時(shí)用戶就可以安全、私密的進(jìn)行微場景在移動(dòng)終端瀏覽器中顯示效果的預(yù)覽與調(diào)試了。

特別說明的是，為了保證用戶口令的安全性，用戶輸入的口令將使用跨平臺的加密算法XXTEA加密后傳輸?shù)胶蠖俗酉到y(tǒng)進(jìn)行異步驗(yàn)證，口令驗(yàn)證通過后才會把完整的微場景頁面資源返回并渲染到移動(dòng)終端的瀏覽器中，這樣的處理可以節(jié)省用戶流量。同時(shí)為了防止口令被第三方用戶暴力破解，用戶錯(cuò)誤輸入5次口令后將被暫時(shí)鎖定30 min，并提醒用戶30 min后才可以再次進(jìn)行口令驗(yàn)證。

3 方案優(yōu)勢分析

本文提出的基于口令驗(yàn)證的HTML5微場景安全預(yù)覽方案具有以下兩個(gè)方面的優(yōu)勢。

（1）安全、私密：本方案在微場景設(shè)置時(shí)增加了口令設(shè)置模塊，并對口令的復(fù)雜度進(jìn)行了限制，對口令傳播進(jìn)行了加密，對用戶輸入口令的錯(cuò)誤次數(shù)進(jìn)行了限制。滿足用戶安全、私密的對制作的微場景頁面進(jìn)行多終端頁面預(yù)覽及效果調(diào)試的需求，同時(shí)滿足用戶對微場景私密傳播的需求。

（2）按需加載，節(jié)省流量：當(dāng)用戶通過手機(jī)等移動(dòng)終端掃描預(yù)覽鏈接二維碼發(fā)起微場景頁面預(yù)覽請求時(shí)，通過后端反向代理服務(wù)器向后端子系統(tǒng)發(fā)送請求，后端子系統(tǒng)接收并響應(yīng)用戶請求，然后只將口令驗(yàn)證頁面資源返回并渲染到移動(dòng)終端瀏覽器中，僅當(dāng)用戶輸入正確的口令時(shí)，才會將完整的微場景頁面資源返回并渲染到移動(dòng)終端的瀏覽器中，生成預(yù)覽頁面。這樣的做法，可以為用戶節(jié)省流量資源。

4 系統(tǒng)安全性分析

微場景制作發(fā)布系統(tǒng)作為一個(gè)對外交流的平臺，我們采用了以下手段來避免惡意用戶利用該平臺傳播不良內(nèi)容。

（1）系統(tǒng)授權(quán)機(jī)制：系統(tǒng)會為每個(gè)用戶分配特定角色和特定權(quán)限，用戶不能越權(quán)操作。

（2）敏感詞過濾：系統(tǒng)會對用戶編輯的文字內(nèi)容進(jìn)行敏感詞過濾。

（3）基于內(nèi)容分析的圖像識別與審核技術(shù)：系統(tǒng)基于內(nèi)容識別對用戶上傳的圖片中的敏感信息（包括文字、圖像，涉及反動(dòng)、恐怖、色情、暴力等類型）進(jìn)行智能分析和審核，能夠標(biāo)記違規(guī)圖片具體對應(yīng)的違規(guī)類型，進(jìn)行自動(dòng)過濾。

（4）二級審核機(jī)制：系統(tǒng)對用戶制作和提交的微場景實(shí)行二級審核，即先由省公司管理員進(jìn)行審核，省公司管理員審核通過后提交集團(tuán)管理員進(jìn)行審核，集團(tuán)管理員審核通過后才可以正式發(fā)布。

5 結(jié)束語

本文提出了一種基于口令驗(yàn)證的HTML5微場景安全預(yù)覽方案及系統(tǒng)，并詳細(xì)介紹了該方案的處理流程，同時(shí)也分析了該方案的優(yōu)勢：安全、私密；按需加載，節(jié)省流量，最后對系統(tǒng)的安全性進(jìn)行了分析，介紹了本系統(tǒng)為避免惡意用戶利用該平臺傳播不良內(nèi)容采用的手段及措施。今后擬對該系統(tǒng)在安全預(yù)覽及私密傳播方面做進(jìn)一步增強(qiáng)和優(yōu)化，擬采用的方案是增加白名單功能，用戶在制作微場景時(shí)可以設(shè)置允許訪問的手機(jī)號碼白名單，當(dāng)被加入白名單的用戶想訪問微場景時(shí)，可以通過輸入手機(jī)號碼及短信驗(yàn)證碼進(jìn)行訪問。