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

（中國移動（深圳）有限公司，深圳 518048）

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

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

1.1 系統(tǒng)架構

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

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

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

（3）業(yè)務服務層：采用Restful接口風格和基于Dubbo的 RPC（Remote Procedure Call， 遠程過程調用）機制，實現制作服務、發(fā)布服務、流程服務、模板服務、評論服務、資源服務、用戶服務及認證服務。

（4）通用服務層：采用Restful接口風格和基于Dubbo的RPC機制，實現通知服務、日志服務及搜索服務。

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

（6）緩存層：本系統(tǒng)使用Redis對熱點數據進行緩存。

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

（8）異步層：采用RabbitMQ技術，實現短信驗證、搜索、圖片加載及定時服務等功能。

1.2 系統(tǒng)主界面

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

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

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

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

（4） 頁面及組件管理區(qū)域：該區(qū)域位于主界面的右邊，用戶可以在該區(qū)域對正在編輯的微場景的頁面及組件進行管理，包括頁面的編輯、新增頁面、組件的查看與編輯。

2 基于口令驗證的HTML5微場景安全預覽方案

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

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

圖3 基于口令驗證的HTML5微場景安全預覽方案處理流程

2.1 微場景的口令設置

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

圖4 微場景設置界面

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

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

2.2 口令的傳輸與存儲

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

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

2.3 微場景的安全預覽

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

圖5 微場景預覽界面

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

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

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

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

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

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

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

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

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

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

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

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

5 結束語

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