随着科学技术的发展,全球制造产业正在发生着深刻的变化,以德国“工业4.0”为代表,全面建立具有适应性、资源效率及人因工程学的智慧工厂。我国制造业能否通过信息化建设优化企业管理、提高生产效率成为了急迫需要解决的问题。而位于执行层的生产制造执行系统(MES)则担当协调运作以及搭建企业计划与实际生产信息之间的桥梁的角色,在制造业信息化过程中起着越来越重要的作用。本文面向中小企业主,利用现代Web的技术开发MES系统具有移动化、跨平台、开发成本低等优势。虽然部分研究中也有基于Web技术的MES系统研究,但是未完全考虑到MES系统作为工业系统对安全性有着更高的要求,暴露在网络平台中有一定的风险。因此本文从前端漏洞的角度为这套MES系统设计了一套前端安全防御模型,来防止XSS攻击以及CSRF攻击。同时在系统模块化设计中,考虑到质量管理和生产管理的联动效应,实现了基于质量生产的设计思路。本文的主要工作包括:通过前期调研MES系统的功能模块需求以及结合市场的期望,开发一套功能模块化、角色模块化的MES系统。该系统的前端基于MVVM模式并以React.js为核心框架进行开发。具体功能模块的设计及研发内容包括了订单管理模块、基础数据管理模块、设备管理模块、生产管理模块、仓储管理模块、质量管理模块等核心功能模块。在系统前端安全方面针对XSS攻击采取输入输出检查、移除不安全关键字的方式进行防御;针对CSRF攻击采取验证码加强页面交互、验证HTTPReferer、增加令牌Token的模式进行防御。并将两种前端攻击的防御应用在客户端请求和服务器响应的过程中,实现基于Web技术的MES系统前端中整体防御模型的搭建。同时本文针对XSS的攻击检测场景,采用基于BM算法的字符串检测算法来识别不安全字符,提升检测效率的同时增强系统的安全性。最后,对系统的各个模块以及系统安全性进行验证测试,并且测试结果均满足MES系统高性能、兼容性、可靠性、安全性的要求。