一种基于口令验证的HTML5微场景安全预览方案及制作发布系统

王超，路磊，方有轩，刘建

（中国移动（深圳）有限公司，深圳 518048）

随着移动互联网的快速发展和普及，截至2017年6月，中国手机网民占网民总数95.1%，达到7.24亿人，特别是以微信为代表的移动端即时通信软件的不断普及，互联网营销成为企业展示和推广自身的产品和服务的重要手段，企业及个人对于微场景的制作和传播越来越关注。在这种情况下，越来越多的平台提供微场景、微游戏的制作与发布服务，展示的内容包括文本、图片、表单、动画、视频及游戏等。这些平台为了让用户实时查看制作的微场景在不同移动终端的显示效果，皆提供了实时预览的功能。但是对于有安全、私密预览与传播需求的微场景制作者来说，这些平台提供的预览机制已经不能满足使用需求。为了解决这个问题，本文提出了一种基于口令验证的HTML5微场景安全预览方案及制作发布系统，该方案提升微场景制作时实时预览的效率，增加微场景口令设置及验证功能，微场景制作者可以安全、私密的进行不同移动终端的页面实时预览。

1 HTML5微场景制作和发布系统简介

1.1 系统架构

为了满足集团内部对于HTML5微场景制作和发布的需求，我们自主研发了HTML5微场景制作和发布系统，该系统的系统架构图如图1所示，这个系统可分为接入层、API接口层（Web服务器集群）、业务服务层、通用服务层、存储层、缓存层、服务注册中心和异步层。

（1）接入层：采用Ngnix服务器，实现反向代理、用户认证、权限分配、协议加解密及日志统计等功能。

（2）API接口层：实现微场景制作、微场景发布、微场景审核、微场景模板、微场景统计及报表分析等功能。

（3）业务服务层：采用Restful接口风格和基于Dubbo的 RPC（Remote Procedure Call， 远程过程调用）机制，实现制作服务、发布服务、流程服务、模板服务、评论服务、资源服务、用户服务及认证服务。

（4）通用服务层：采用Restful接口风格和基于Dubbo的RPC机制，实现通知服务、日志服务及搜索服务。

（5）存储层：采用MySQL数据库集群，分别用于用户、微场景、日志数据的持久化存储，使用Redis集群存储资源文件（图片、音乐等）。

（6）缓存层：本系统使用Redis对热点数据进行缓存。

（7）服务注册中心：采用Zookeeper对系统的服务进行管理，主要实现服务注册、服务查询、服务监控和服务指标的管理。

（8）异步层：采用RabbitMQ技术，实现短信验证、搜索、图片加载及定时服务等功能。

1.2 系统主界面

HTML5微场景制作和发布系统主界面示意图如图2所示。

（1）功能菜单区域：功能菜单区域位于主界面的左边，是系统的可操作功能菜单列表，包括我的模板、我的场景、场景管理、资源管理、模板管理及系统设置等。

（2）元素组件工具条：元素组件工具条位于主界面的上端，用于显示微场景的部分设计元素组件，包括表单、互动和特效等，用户可以选择该工具条中的组件进行微场景的设计。

（3）编辑区域：微场景的编辑区域位于主界面的中间，用户可以在该区域选择微场景模板及所提供的设计元素组件进行微场景的编辑与设计。同时该区域还包含一些元素组件，如文本、图片、图表、视频、形状、背景及音乐等，包含一些操作，例如撤销、恢复、预览及复制等。

（4） 页面及组件管理区域：该区域位于主界面的右边，用户可以在该区域对正在编辑的微场景的页面及组件进行管理，包括页面的编辑、新增页面、组件的查看与编辑。

2 基于口令验证的HTML5微场景安全预览方案

图2 HTML5微场景制作和发布系统主界面示意图

该部分将详细介绍基于口令验证的HTML5微场景安全预览方案，该方案的处理流程如图3所示。下面将从微场景口令的设置、口令的传输与存储、微场景的预览等方面对该方案进行详细阐述。

图3 基于口令验证的HTML5微场景安全预览方案处理流程

2.1 微场景的口令设置

用户通过微场景的编辑区域完成微场景的编辑后，点击“设置”按钮，进入微场景的设置页面，用户可以在该页面进行微场景基本信息和口令的设置，设置界面如图4所示。

图4 微场景设置界面

在微场景基本信息设置区域，用户可以进行微场景基本信息的设置，包括封面设置、场景名称、描述、场景类型、服务对象、翻页方式及场景音乐。

在口令设置区域，用户可以进行场景访问状态的设置，场景访问状态可选项为允许访问、加密访问。“允许访问”状态下，用户可以直接访问和预览微场景页面，无需设置和输入口令。当用户想进行私密预览与传播时，可以选择“加密访问”状态，然后输入6位口令，并设置口令的失效时间。为了控制微场景页面预览的安全性，避免用户设置弱口令、易猜解口令，前端程序会对口令的复杂性进行验证，要求用户设置的6位口令中需至少包含字母、数字和特殊字符其中的两种。

2.2 口令的传输与存储

用户完成微场景的编辑及口令的设置后，点击“保存”按钮，即可将微场景通过后端子系统保存到主数据库中，并生成访问链接，当用户进行微场景预览时，通过后端反向代理服务器将访问链接以二维码的形式呈现给用户，供用户在不同移动终端进行实时预览。

特别说明的是，在将微场景页面资源及口令发送到后台服务器的过程中，为了保证口令的安全性，我们使用了跨平台的加密算法XXTEA对口令进行加密，这样使得保存到数据库中的口令是加密后的数据，避免微场景口令被第三方人员窃取。

2.3 微场景的安全预览

用户完成微场景的制作就可以开始微场景的预览，微场景的预览界面如图5所示。该界面为用户提供在PC浏览器上微场景预览的窗口。

图5 微场景预览界面

图5中的预览链接二维码，为用户提供在移动终端进行微场景预览的入口，当用户使用移动终端设备的微信、浏览器等具有扫码功能的软件扫描预览链接二维码时，就会通过后端反向代理服务器向后端子系统发送请求，后台子系统接收并响应用户请求，将口令验证页面资源返回并渲染到移动终端浏览器中。用户输入正确的口令，验证通过，后端反向代理服务器将完整的微场景页面资源返回并渲染到移动终端的浏览器中，生成预览页面，此时用户就可以安全、私密的进行微场景在移动终端浏览器中显示效果的预览与调试了。

特别说明的是，为了保证用户口令的安全性，用户输入的口令将使用跨平台的加密算法XXTEA加密后传输到后端子系统进行异步验证，口令验证通过后才会把完整的微场景页面资源返回并渲染到移动终端的浏览器中，这样的处理可以节省用户流量。同时为了防止口令被第三方用户暴力破解，用户错误输入5次口令后将被暂时锁定30 min，并提醒用户30 min后才可以再次进行口令验证。

3 方案优势分析

本文提出的基于口令验证的HTML5微场景安全预览方案具有以下两个方面的优势。

（1）安全、私密：本方案在微场景设置时增加了口令设置模块，并对口令的复杂度进行了限制，对口令传播进行了加密，对用户输入口令的错误次数进行了限制。满足用户安全、私密的对制作的微场景页面进行多终端页面预览及效果调试的需求，同时满足用户对微场景私密传播的需求。

（2）按需加载，节省流量：当用户通过手机等移动终端扫描预览链接二维码发起微场景页面预览请求时，通过后端反向代理服务器向后端子系统发送请求，后端子系统接收并响应用户请求，然后只将口令验证页面资源返回并渲染到移动终端浏览器中，仅当用户输入正确的口令时，才会将完整的微场景页面资源返回并渲染到移动终端的浏览器中，生成预览页面。这样的做法，可以为用户节省流量资源。

4 系统安全性分析

微场景制作发布系统作为一个对外交流的平台，我们采用了以下手段来避免恶意用户利用该平台传播不良内容。

（1）系统授权机制：系统会为每个用户分配特定角色和特定权限，用户不能越权操作。

（2）敏感词过滤：系统会对用户编辑的文字内容进行敏感词过滤。

（3）基于内容分析的图像识别与审核技术：系统基于内容识别对用户上传的图片中的敏感信息（包括文字、图像，涉及反动、恐怖、色情、暴力等类型）进行智能分析和审核，能够标记违规图片具体对应的违规类型，进行自动过滤。

（4）二级审核机制：系统对用户制作和提交的微场景实行二级审核，即先由省公司管理员进行审核，省公司管理员审核通过后提交集团管理员进行审核，集团管理员审核通过后才可以正式发布。

5 结束语

本文提出了一种基于口令验证的HTML5微场景安全预览方案及系统，并详细介绍了该方案的处理流程，同时也分析了该方案的优势：安全、私密；按需加载，节省流量，最后对系统的安全性进行了分析，介绍了本系统为避免恶意用户利用该平台传播不良内容采用的手段及措施。今后拟对该系统在安全预览及私密传播方面做进一步增强和优化，拟采用的方案是增加白名单功能，用户在制作微场景时可以设置允许访问的手机号码白名单，当被加入白名单的用户想访问微场景时，可以通过输入手机号码及短信验证码进行访问。