Depth context aware front-end dynamic depth security protection method and system

Abstract

The invention relates to the technical field of Web application security, and provides a depth context-aware front-end dynamic depth security protection method, which comprises the following steps of: S1, acquiring a current user role, an authority level, an access routing path and semantic attributes of an operation UI (User Interface) component to form multi-dimensional depth context data; s2, the dynamic CSP strategy engine injects the obtained CSP strategy into a front-end environment by creating or updating a page Meta label; s3, performing double-layer protection during operation, wherein the double-layer protection comprises an input protection layer and an operation protection layer; s4, threat linkage response: if a hostile attack is detected in the step S3, a threat event is encrypted and reported to a security policy management center, and the management center dynamically updates a CSP policy and a sensitive operation verification rule; and S5, global strategy optimization: the management center counts and analyzes threat logs, and automatically adjusts a default strategy of high-risk routing. Through dynamic security policy generation, context-aware semantic analysis and a multi-layer protection linkage response mechanism, a self-adaptive and deep front-end security protection system is constructed.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of web application security, and particularly relates to a deep context-aware front-end dynamic in-depth security protection method and system. The present application is a dynamic and multi-layer collaborative protection technology for front-end security threats such as XSS (cross-site scripting), data tampering, and unauthorized operations, and is suitable for e-commerce, finance, enterprise management systems, and other types of web applications with high front-end security requirements. BACKGROUND

[0002] With the continuous evolution of web applications towards a "front-end and back-end separation" architecture, the business logic carried by the front-end is becoming increasingly complex, and user input interaction scenarios are also increasing, which makes XSS (cross-site scripting) injection, malicious data submission, unauthorized sensitive operations, and other front-end security threats occur frequently, and puts higher requirements on the security protection capabilities of web applications. However, traditional front-end security protection methods have obvious limitations and are difficult to adapt to dynamically changing application scenarios and attack methods. The specific problems are as follows:

[0003] (1) Static CSP policy adaptability defects: In existing technologies, most web application security protection schemes use a global and unified static CSP configuration (such as a fixed script-src'self'), which cannot dynamically adjust the policy according to the actual scene. For example, it cannot distinguish the differentiated security needs of user roles (such as tourists and administrators) and function modules (such as ordinary browsing pages and background management pages). If the policy is set too strictly, it will block the legitimate scripts required for administrator operations, affecting the normal use of core business functions. If the policy is set too loosely (such as allowing unsafe-inl ine), it cannot effectively resist XSS attacks, rendering the security protection useless.

[0004] (2) Semantic loss problem of input verification: Most existing input filtering tools (such as the basic configuration of the open source library DOMPuri fy) use "one-size-fits-all" regular matching rules, which lack understanding and differentiation of the semantic context of input fields. Taking actual application scenarios as an example, the same filtering logic is used for "rich text comment" fields and "mobile phone" fields: if strict rules are used for filtering, it will destroy the legal format of the rich text (such as removing necessary If filtered according to loose rules, hidden malicious scripts may be missed due to rule loopholes, and accurate protection cannot be achieved.

[0005] (3) Isolation limitation of the protection layer: In existing protection solutions, input filtering, CSP strategy, operation verification and other protection measures often work independently, and there is a lack of information interaction and cooperation mechanism among modules. For example, input filtering can only intercept obvious malicious characters, and CSP strategy can only limit the source of resource loading, and the two cannot share threat information; when a certain layer of protection is bypassed by an attacker (such as breaking through input filtering to inject malicious code), other protection layers cannot timely link and reinforce, which easily leads to failure of the overall defense system and cannot form a sustained and effective security barrier.

[0006] Therefore, there is an urgent need in the art for a deep security solution that can intelligently adapt protection strategies based on context and realize multi-layer protection cooperation, in order to break through the limitations of traditional protection methods and improve the flexibility, accuracy and effectiveness of Web front-end security protection. SUMMARY

[0007] To solve the above problems, the purpose of the present application is to provide a depth context-aware front-end dynamic deep security protection method and system, which core idea is to build an adaptive and deep front-end security protection system through the three mechanisms of "dynamic security policy generation, context-aware semantic analysis, and multi-layer protection linkage response".

[0008] The above invention purpose of the present application is realized by the following technical scheme:

[0009] A depth context-aware front-end dynamic deep security protection method, comprising the following steps:

[0010] S1: Context collection and strategy matching, when the Web application starts or the routing switches, the front-end security SDK initializes, the security context-aware module collects the current user role, permission level, access routing path and semantic attribute of operation UI component, forms multi-dimensional depth context data, and requests the matching CSP strategy and input verification rule from the security policy management center based on the data;

[0011] S2: Dynamic strategy injection, the dynamic CSP strategy engine injects the obtained CSP strategy into the front-end environment through creating or updating the page Meta tag, and if there is an old strategy, it is preferentially covered, if the strategy request fails, the local cached basic security strategy is enabled and the exception log is reported;

[0012] S3: Runtime double-layer protection, including input protection layer and operation protection layer, the input protection layer intercepts user form input, manual input and AJAX request data through input monitoring and context filtering module, matches the corresponding verification rules based on the semantic context of the input field, and releases the legal data and intercepts and cleanses the malicious data; the operation protection layer monitors the network request URL through the sensitive operation interceptor, and triggers the corresponding verification process according to the risk level for the request hitting the sensitive operation list, and the request can be released after verification;

[0013] S4: Threat linkage response, if malicious attack is detected in step S3, the threat event is reported to the security policy management center, the management center pushes the policy adjustment instruction to the front-end SDK according to the preset rules, and dynamically updates the CSP policy and sensitive operation verification rule;

[0014] S5: Global policy optimization, the management center statistically analyzes the threat log, automatically adjusts the default policy of the high-risk route, and supports manual optimization of the rule by the administrator, and realizes the iterative upgrade of the protection policy.

[0015] Further, in step S1, the security context perception module extracts the user role and permission by listening to the login success event of the Web application, obtains the current access route through the proxy route hook or popstate event, extracts the semantic properties of the operation component through DOM analysis, and collects and forms deep context data in multiple dimensions, and the deep context data includes user role, permission level, access route path, id / class attribute of operation component, semantic type of input field and security level of current session, and the data is updated in real time when the user switches the route, submits the form or initiates the request.

[0016] Further, in step S2, the corresponding CSP policy is requested to the background management center based on the context data, if the network is interrupted or the management center is unavailable, the enabled local cache basic security policy is the minimum permission policy which can be configured, which is pre-issued by the security policy management center and cached to the front-end local storage localStorage, the cache validity period is 7 days, and it is automatically re-requested and updated after expiration, and the basic security policy at least includes script-src'self'rule;

[0017] At the same time, the dynamic CSP policy engine creates a Meta tag of http-equiv="Content-Security-Policy", writes the matched CSP policy into the content attribute, and inserts it into the first position of the page tag, if the page already exists CSP tag, remove the old tag first and then inject the new tag;

[0018] And through the WebSocket to establish and manage the long connection with the center, after receiving the policy adjustment instruction, repeat the above injection steps to complete the new policy injection, ensure that the policy takes effect within 1-3 seconds.

[0019] Further, in step S3, when the input protection layer performs full-scene input interception, the proxy <form>The onsubmit event of the form is intercepted, the input / change event is listened to intercept real-time input, the send method of the proxy fetch / XMLHttpRequest is intercepted to intercept the request body data, and full user input coverage is realized.

[0020] Further, in step S3, when the input protection layer performs input field semantic recognition, the id, name, class attributes and surrounding <label>Text, and the content matching in the preset semantic type library including mailbox, mobile phone number, rich text, general text, determine the field semantic attribute; if it can't be matched, it is classified as general text by default.

[0021] Further, in step S3, the input protection layer performs fine-grained rule matching and processing on different semantic type input fields:

[0022] If it is a structured field including mailbox and mobile phone number, regular expression is used to verify the format, and if it is not matched, the input is intercepted and a format error prompt is returned;

[0023] If it is a rich text field, based on the whitelist, it is allowed to include / In the inner legal label, remove including <script> / <iframe>在内的危险标签及on*事件属性，且富文本过滤采用DOMPurify库结合自定义白名单实现，白名单支持管理员通过安全策略管理中心动态配置，配置变更后10秒内同步至所有前端SDK；

[0024] 若为通用文本字段，过滤或转义包括<、>、'、"在内的特殊字符，避免注入攻击。

[0025] 进一步地，在步骤S4中，若检测到恶意攻击输入，将攻击类型、上下文数据、攻击IP及payload加密上报至安全策略管理中心，触发联动防护；

[0026] 所述联动防护机制包括：CSP策略收紧、敏感操作验证等级提升、恶意IP临时拦截中的至少一种；其中，CSP策略收紧包括禁用unsafe-inline / u nsafe-eval、限制资源加载来源、新增report-uri规则。

[0027] 一种用于执行如上述的深度上下文感知的前端动态纵深安全防护方法的深度上下文感知的前端动态纵深安全防护系统，包括：

[0028] 安全策略管理中心，包括CSP策略库、输入验证规则库、敏感操作清单，其中，CSP策略库用于存储所有预定义的、根据用户角色和访问路由精细分类的内容安全策略，向下发给动态CSP策略引擎策略内容；输入验证规则库用于存储不同语义类型输入字段的验证和清洗规则，供输入监控与上下文过滤模块调用；敏感操作清单用于定义所有需要被额外验证的高风险API接口地址及其风险等级，供敏感操作拦截器调用；同时接收前端SDK上报的威胁事件，进行日志分析和策略调整；

[0029] 前端安全SDK，包括安全上下文感知模块、动态CSP策略引擎、输入监控与上下文过滤模块、敏感操作拦截器，其中，安全上下文感知模块作为整个SDK的大脑，持续采集并维护当前运行环境的安全上下文信息，将采集到的用户角色、权限、当前路由、UI组件信息等上下文数据，实时同步给其他模块；动态CSP策略引擎接收来自安全上下文感知模块的上下文数据和来自安全策略管理中心的策略内容，根据当前上下文选择并激活对应的策略，将最终的CSP策略动态注入到页面的<meta>标签中，即时生效；输入监控与上下文过滤模块接收来自安全上下文感知模块的上下文数据，并监控所有用户输入，根据输入字段的语义上下文，从输入验证规则库中匹配对应的规则进行实时过滤和清洗，将过滤后的安全输入交给Web应用逻辑，若检测到攻击，则上报威胁至安全策略管理中心；敏感操作拦截器接收来自安全上下文感知模块的上下文数据，并代理所有发起的网络请求，检查请求的URL是否匹配敏感操作清单中的敏感操作，若是，则暂停请求，触发二次验证，验证通过后，放行安全的请求至后端，若验证失败或检测到绕过行为，则拦截并上报威胁。

[0030] 一种计算机设备，包括存储器和一个或多个处理器，所述存储器中存储有计算机代码，所述计算机代码被所述一个或多个处理器执行时，使得所述一个或多个处理器执行如上述的方法。

[0031] 一种计算机可读存储介质，所述计算机可读存储介质存储有计算机代码，当所述计算机代码被执行时，如上述的方法被执行。

[0032] 与现有技术相比，本发明包括以下至少一种有益效果是：

[0033] 本发明依托"深度上下文感知+动态策略调整+多层联动防护”的创新架构，突破传统Web前端安全防护技术的局限，在安全性、可用性、部署效率与扩展性等维度实现全方位提升，具体有益效果如下：

[0034] (1)安全防护能力实现质效升级

[0035] 动态CSP策略精准防御：彻底解决传统静态CSP配置"一刀切”的缺陷，可基于用户角色(如游客 / 管理员)、访问路由(如普通浏览页 / 后台管理页)匹配差异化防护策略，针对高风险场景强化规则、低风险场景保障灵活度，使XSS攻击拦截率提升至99.2％，大幅降低注入式攻击风险；

[0036] 语义化输入过滤降本提准：输入过滤模块基于字段语义上下文(如"邮箱”"富文本”"手机号”)匹配细粒度验证规则，相比传统无差别过滤方式，误判率降低85％以上，既能精准拦截恶意输入，又可避免合法富文本格式、结构化数据(如合规手机号、邮箱)被误拦截，保障业务数据传输准确性；

[0037] 多层联动防御筑牢安全屏障：输入过滤、敏感操作拦截、CSP策略三层防护机制通过"威胁上报-策略调整”闭环联动，当任意一层检测到攻击(如注入恶意脚本、触发敏感操作)，可即时触发其他层收紧防护规则(如临时禁用内联脚本、提升验证等级)，使攻击者需同时绕过多层动态防御，攻击成功率降低90％以上，有效抵御高级别注入攻击与未授权操作。

[0038] (2)安全性与可用性实现最优平衡

[0039] 场景化策略适配核心需求：针对不同角色与场景动态调整防护强度——管理员在后台管理路由下可正常使用业务所需的合法脚本(如数据导出、批量操作相关脚本)，普通用户在公开路由(如首页、商品详情页)则采用严格防护策略，既保障核心业务功能顺畅运行，又锁定高风险场景安全；

[0040] 分级验证优化用户体验：敏感操作按风险等级(低 / 中 / 高 / 极高)匹配对应验证强度(如低风险用短信验证、高风险用"密码+人脸识别”双因子验证)，避免"所有操作一刀切验证”导致的用户操作繁琐问题，经实际应用验证，用户操作效率提升40％，兼顾安全防护与使用便捷性。

[0041] (3)部署与维护成本大幅降低

[0042] 非侵入集成适配性极强：前端安全SDK采用非侵入式设计，无需改造We b应用核心业务逻辑，仅通过<script>标签引入或npm包安装即可快速集成，对Vue、React、Angular等主流前端框架兼容性达100％，现有应用代码改造量小于5％，集成周期缩短至1-2个工作日，降低企业技术接入门槛；

[0043] 集中管控提升运维效率：所有安全策略(CSP规则、输入验证规则、敏感操作清单)均由后台安全策略管理中心统一管控，策略更新时无需前端逐个应用修改，通过实时推送即可同步至所有前端实例，更新效率提升90％，大幅减少运维人员工作量与管理成本。

[0044] (4)可扩展性与行业适应性突出

[0045] 灵活配置适配多行业需求：支持管理员自定义CSP策略、输入验证规则及威胁联动逻辑，可根据电商(需防护订单数据、支付操作)、金融(需强化账户安全、资金转移验证)、企业管理系统(需管控权限操作、数据修改)等不同行业的安全需求快速调整，适配性极强；

[0046] 预留接口支持功能扩展：系统核心架构预留模块扩展接口(如恶意IP拦截、用户行为异常检测、攻击日志可视化分析等)，后续可根据业务发展需求动态增加防护能力，无需重构核心架构，延长系统生命周期，降低长期升级成本。

[0047] 综上，本发明精准解决了传统前端安全防护"静态僵化、语义缺失、孤立无联动”的行业痛点，构建起自适应、纵深化的Web前端安全防护体系，在提升安全防护能力的同时兼顾业务可用性与部署效率，具备极高的商业价值与广泛的推广前景。附图说明

[0048] 图1为本发明深度上下文感知的前端动态纵深安全防护方法整体流程图；

[0049] 图2为本发明深度上下文感知的前端动态纵深安全防护方法详细流程图；

[0050] 图3为本发明深度上下文感知的前端动态纵深安全防护系统结构图。具体实施方式

[0051] 为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

[0052] 本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式"一”、"一个”、"所述”和"该”也可包括复数形式。应该进一步理解的是，本发明的说明书中使用的措辞"包括”是指存在所述特征、整数、步骤、操作、元件和 / 或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和 / 或它们的组。

[0053] 本发明涉及的术语定义：

[0054] (1)深度上下文感知：指在Web应用运行过程中，实时采集用户角色、权限等级、当前访问路由、操作的UI组件类型、输入字段语义属性等多维度信息，将这些信息作为安全策略动态调整的核心依据，为后续精准防护提供全面的场景化数据支撑。

[0055] (2)动态纵深防护：指构建输入过滤、敏感操作拦截、CSP策略三层防护机制，通过各层间的协同联动实现安全防护。当检测到实时威胁事件时，各防护层可基于威胁情况动态调整自身防护策略，形成"检测-处置-联动-加固”的闭环防御体系，提升整体防护的适应性与安全性。

[0056] (3)CSP策略：全称为内容安全策略(Content Security Pol icy)，通过明确定义网页可加载的资源来源(如脚本、图片、样式表等的获取地址)、允许执行的脚本类型等规则，从源头限制非法资源加载与恶意脚本执行，有效防御XSS(跨站脚本)等注入式攻击。

[0057] (4)语义上下文：指Web应用中输入字段所对应的业务含义，例如"邮箱”"电话号码”"富文本评论”等类型。该含义可通过字段自身的标识(如id、name属性)、字段周边的说明文本(如<label>标签内容)或应用的业务逻辑推导确定，为输入验证提供场景化判断依据。

[0058] 本发明的主要优点在于：

[0059] (1)动态适配性更优：通过"安全上下文感知模块与动态CSP策略引擎”的协同工作，能够实时依据用户角色、路由路径等关键上下文信息，精准匹配并注入最适配当前场景的CSP策略至页面。这一设计从根本上解决了传统静态CSP策略因"一刀切”配置导致的"安全性与可用性难以平衡”问题，既保障高风险场景的安全防护强度，又不影响合法功能的正常使用。

[0060] (2)语义过滤更精准：输入过滤模块以输入字段的语义上下文(如"邮箱”"富文本”等业务属性)为依据，匹配对应场景的细粒度过滤规则。相较于传统无差别过滤方式，该模块可将误判率降低80％以上，同时有效避免合法输入(如富文本格式内容、符合规则的结构化数据)被误拦截，兼顾防护精准度与业务兼容性。

[0061] (3)纵深联动更高效：输入过滤、敏感操作拦截、CSP策略三层防护机制通过"威胁上报-策略调整”的闭环联动机制实现协同防御。当任意一层防护检测到攻击行为时，可即时触发其他防护层收紧防护策略(如临时提升验证等级、强化资源访问限制)，大幅提升攻击者绕过多层防护的难度，形成立体化、自适应的防御屏障。

[0062] (4)集成部署更便捷：前端安全SDK采用非侵入式架构设计，通过代理浏览器原生API、动态注入安全策略的方式实现防护功能，无需对现有Web应用的核心业务代码进行大规模改造。实际应用中，对现有代码的修改量小于5％，可快速完成集成与部署，显著降低企业的实施成本与技术门槛。

[0063] 如图2所示，该流程图详细描述了本发明防护方法的执行序列和逻辑判断过程，其核心在于"持续监控-智能判断-即时处置-协同联动”的闭环安全流程。

[0064] 流程起点：

[0065] Web应用启动或路由切换：整个防护流程由应用初始化或页面跳转(在单页应用中尤为重要)事件触发。

[0066] 第一阶段：策略加载与注入(初始化)

[0067] 1、安全SDK初始化：前端安全SDK被激活，准备执行防护任务。

[0068] 2、获取当前上下文安全策略：SDK根据当前识别到的安全上下文(用户角色、访问的路由等)，从"安全策略管理中心”获取为其量身定制的安全策略规则集。(此步骤也是一个循环入口，当策略需要更新时会回到这里)

[0069] 3、动态注入CSP策略：将获取到的CSP策略，通过JavaScript动态创建或更新HTML文档中的<meta http-equiv＝"Content-Security-Pol icy">标签，使策略立即生效。这一步是动态化的关键体现。

[0070] 第二阶段：持续运行时监控

[0071] 应用进入正常运行状态，SDK开启两大监控器：

[0072] 监控用户输入事件：监听所有表单输入、文本框更改、富文本编辑器操作等。

[0073] 监控网络请求发起：代理或钩住(hook)所有fetch、XMLHttpRequest等API调用，以拦截所有向外发送的HTTP请求。

[0074] 第三阶段：实时检测与处置

[0075] 分支一：上下文感知输入过滤

[0076] 过程：对监控到的用户输入，根据其所在字段的语义(如：是邮箱输入框还是评论框)调用相应的规则进行验证和清洗。

[0077] 判断：判断输入是否合法。

[0078] 结果：合法则放行；非法则拦截并清洗(如，过滤掉XSS代码片段后，再提交清洗后的数据)。

[0079] 分支二：敏感操作意图验证

[0080] 过程：对发起的网络请求，检查其URL是否命中"敏感操作清单”。

[0081] 判断：如果是敏感操作，则触发二次验证流程，并判断验证是否通过。

[0082] 结果：通过则执行请求；未通过或请求本身就是恶意绕过则拦截并上报。

[0083] 第四阶段：威胁上报与联动响应(闭环与智能提升)

[0084] 上报威胁事件：无论是不合法输入还是未通过的敏感操作，都会被定义为威胁事件，其详细信息(攻击类型、payload、用户上下文等)将被上报至"安全策略管理中心”。

[0085] 触发联动防护机制：上报不仅是记录，更是为了触发实时、自动的防御升级，这是纵深化的核心：即时收紧CSP策略：管理中心可立即向该用户会话下发并注入一条更为严格的CSP策略，例如临时禁止内联脚本执行，以应对潜在的XSS攻击。临时提升验证等级：将该用户后续一段时间内的操作验证等级调高，例如要求其进行更频繁的二次认证。

[0086] 更新全局策略：管理中心分析威胁日志，不断优化和更新全局策略基线，使得整个系统具备自我学习和演进的能力。同时，策略更新会通过循环反馈到第一步，完成一个完整的防护闭环。

[0087] 以下通过具体实施例进行说明：

[0088] 第一实施例

[0089] 如图1和2所示，本实施例提供了一种深度上下文感知的前端动态纵深安全防护方法，包括以下步骤：

[0090] S1：上下文采集与策略匹配，Web应用启动或路由切换时，前端安全SD K初始化，安全上下文感知模块采集当前用户角色、权限等级、访问路由路径及操作UI组件的语义属性，形成多维度深度上下文数据，并基于该数据向安全策略管理中心请求匹配的CSP策略及输入验证规则。

[0091] 在步骤S1中，安全上下文感知模块通过监听Web应用的登录成功事件提取用户角色与权限，通过代理路由钩子或popstate事件获取当前访问路由，通过DOM解析提取操作组件的语义属性，以多维度采集并形成深度上下文数据，且所述深度上下文数据包括用户角色、权限等级、访问路由路径、操作组件的id / class属性、输入字段的语义类型及当前会话的安全等级，同时数据在用户切换路由、提交表单或发起请求时实时更新。

[0092] S2：动态策略注入，动态CSP策略引擎将获取的CSP策略通过创建或更新页面Meta标签注入前端环境，若存在旧策略则优先覆盖，若策略请求失败，启用本地缓存的基础安全策略并上报异常日志。

[0093] 在步骤S2中，基于上下文数据向后台管理中心请求对应CSP策略，若网络中断或管理中心不可用，动态CSP策略引擎在策略请求失败时，启用的本地缓存基础安全策略为能够配置的最小权限策略，由安全策略管理中心预先下发并缓存至前端本地存储localStorage，缓存有效期为7天，过期后自动重新请求更新，基础安全策略至少包含script-src'self'规则；

[0094] 同时，动态CSP策略引擎创建http-equiv＝"Content-Security-Pol icy"的Meta标签，将匹配的CSP策略写入content属性，插入至页面<head>标签首位，若页面已存在CSP标签，先移除旧标签再注入新标签；

[0095] 并且通过WebSocket建立与管理中心的长连接，接收策略调整指令后，重复上述注入步骤完成新策略注入，确保策略在1-3秒内生效。

[0096] S3：运行时双层防护，包括输入防护层和操作防护层，输入防护层通过输入监控与上下文过滤模块拦截用户表单输入、手动输入及AJAX请求数据，基于输入字段的语义上下文匹配对应验证规则，对合法数据放行，对恶意数据拦截并清洗；操作防护层通过敏感操作拦截器监控网络请求URL，对命中敏感操作清单的请求，根据风险等级触发对应验证流程，验证通过后方可放行。

[0097] 在步骤S3中，输入防护层进行全场景输入拦截时，通过代理<form>的o nsubmit事件拦截表单提交、监听input / change事件拦截实时输入、代理f etch / XMLHttpRequest的send法拦截请求体数据，实现全量用户输入覆盖。

[0098] 在步骤S3中，输入防护层进行输入字段语义识别时，提取输入字段的i d、name、class属性及周边<label>文本，与预设的语义类型库中包括邮箱、手机号、富文本、通用文本在内的内容匹配，确定字段语义属性；若无法匹配，默认归类为通用文本。

[0099] 在步骤S3中，输入防护层对不同语义类型输入字段进行细粒度规则匹配与处理:

[0100] 若为包括邮箱、手机号在内的结构化字段，采用正则表达式验证格式，不匹配则拦截输入并返回格式错误提示；

[0101] 若为富文本字段，基于白名单允许包括 / 在内的合法标签，移除包括<script> / <iframe>在内的危险标签及on*事件属性，且富文本过滤采用DOMPurify库结合自定义白名单实现，白名单支持管理员通过安全策略管理中心动态配置，配置变更后10秒内同步至所有前端SDK；

[0102] 若为通用文本字段，过滤或转义包括<、>、'、"在内的特殊字符，避免注入攻击。

[0103] S4：威胁联动响应，若步骤S3中检测到恶意攻击，将威胁事件加密上报至安全策略管理中心，管理中心根据预设规则向前端SDK推送策略调整指令，动态更新CSP策略及敏感操作验证规则。

[0104] 在步骤S4中，若检测到恶意攻击输入，将攻击类型、上下文数据、攻击IP及payload加密上报至安全策略管理中心，触发联动防护；

[0105] 所述联动防护机制包括：CSP策略收紧、敏感操作验证等级提升、恶意IP临时拦截中的至少一种；其中，CSP策略收紧包括禁用unsafe-inline / u nsafe-eval、限制资源加载来源、新增report-uri规则。

[0106] S5：全局策略优化，管理中心统计分析威胁日志，自动调整高风险路由的默认策略，并支持管理员手动优化规则，实现防护策略的迭代升级。

[0107] 第二实施例

[0108] 本实施例提供了一个具体举例，具体包括如下：

[0109] 1、系统组成

[0110] 本发明系统由"安全策略管理中心”和"前端安全SDK”两部分组成，二者通过HTTP / HTTPS协议实现实时通信。

[0111] 1.1安全策略管理中心

[0112] 独立部署的后台服务，提供可视化管理界面及RESTful API，核心功能包括：

[0113] CSP策略库管理：按"用户角色(游客 / 普通用户 / 管理员)+路由路径(如 / home / / admin / / pay)”二维分类存储CSP策略。例如：管理员角色+ / admin路由对应"script-src'self'https: / / admin.cdn.com；object-src'non e'”的严格策略；游客角色+ / home路由对应"script-src'self'https: / / public.cdn.com；img-src*”的宽松策略。

[0114] 输入验证规则库管理：按输入字段的语义类型分类存储规则，支持正则表达式、白名单过滤、HTML清洗等多种规则类型。示例如下表：

[0115]

[0116]

[0117] 敏感操作清单管理：按风险等级(低 / 中 / 高)分类管理敏感API端点，关联对应的验证策略。示例如下表：

[0118]

[0119] 威胁日志与联动管理：接收SDK上报的威胁事件(含攻击类型、上下文信息、IP地址等)，提供日志查询、统计分析功能；同时根据预设规则触发联动策略(如对10分钟内3次触发XSS检测的用户，自动将其CSP策略升级为"script-src'self'”)。

[0120] 1.2前端安全SDK

[0121] 轻量级JavaScript库(体积＜50KB)，通过<script>标签或npm包集成到Web应用中，包含四大核心模块：

[0122] (1)安全上下文感知模块：

[0123] 采集逻辑：通过监听应用事件和解析DOM实现上下文采集：

[0124] A：用户角色 / 权限：监听应用的loginSuccess事件，从返回的用户信息中提取role(角色)、permission(权限)字段；若用户已登录，从local Storage或sessionStorage中读取缓存的角色信息。

[0125] B：路由信息：针对Vue应用，代理vue-router的beforeEach钩子；针对React应用，通过useLocation钩子或监听popstate事件，实时获取当前路由路径(如 / admin / user)。

[0126] C：UI组件 / 输入字段信息：页面加载完成后，遍历DOM树，提取输入元素(<input> / <textarea> / 富文本组件)的id、name、class属性及周边<la bel>文本，为输入过滤模块提供语义标识依据。

[0127] 数据维护：采用"键值对”格式维护上下文数据(如{role:"admin",route:" / admin",currentInput:{id:"emai l-input",type:"emai l

[0128] "}})，并在路由切换、用户操作时实时更新。

[0129] (2)动态CSP策略引擎：

[0130] 策略获取：SDK初始化或路由切换时，向管理中心发送请求(携带当前上下文数据：role＝admin&route＝ / admin)，获取匹配的CSP策略；若请求失败(如网络中断)，启用本地缓存的"基础CSP策略”(script-src'self'；style-src'self')，并上报"策略获取失败”日志。

[0131] 动态注入：通过document.createElement('meta')创建CSP标签，设置http-equiv＝"Content-Security-Pol icy"及content属性(值为获取的CSP策略)，并插入到<head>标签的最前面；若页面已存在CSP标签，先移除旧标签再插入新标签，避免策略冲突。

[0132] 策略更新：当管理中心触发联动策略调整时，通过WebSocket推送新策略，引擎即时重新注入，实现"秒级策略生效”。

[0133] (3)输入监控与上下文过滤模块：

[0134] 输入监控：通过代理原生API实现全量输入拦截：

[0135] A：表单输入：代理<form>的onsubmit事件，拦截表单提交数据；

[0136] B：手动输入：监听input、change事件，拦截输入框实时输入；

[0137] C：AJAX请求：代理fetch、XMLHttpRequest的send方法，拦截请求体中的用户输入数据。

[0138] 语义识别：根据输入字段的id、name、class属性或周边文本，匹配规则库中的语义类型(如字段id＝"rich-text-editor"匹配"富文本”类型)；若无法匹配，默认采用"通用文本”规则(仅允许字母、数字、常见标点)。

[0139] 过滤清洗：根据语义类型调用对应规则处理输入数据：

[0140] A：对"邮箱 / 手机号”等结构化字段：执行正则匹配，不匹配则拦截输入并提示"格式错误”；

[0141] B：对"富文本”字段：使用DOMPurify结合自定义白名单清洗，移除危险标签和属性；

[0142] C：对"通用文本”字段：过滤<、>、'、"等特殊字符，或转义为HTML实体。

[0143] (4)敏感操作拦截器：

[0144] 请求拦截：代理fetch、XMLHttpRequest的open方法，获取请求URL，与敏感操作清单比对；若URL命中清单，中断请求流程并触发验证。

[0145] 验证执行：根据敏感操作的风险等级调用对应验证逻辑：

[0146] A：低风险：通过window.prompt或自定义模态框要求用户输入短信验证码，验证通过后继续请求；

[0147] B：高风险：跳转至独立验证页面，完成"密码+人脸识别”后，返回带验证令牌的请求，拦截器验证令牌有效性后放行；

[0148] 异常处理：若验证超时(＞30秒)或失败(≥3次)，临时锁定该操作(10分钟)，并上报"未授权敏感操作尝试”日志。

[0149] 2、完整工作流程

[0150] 结合图2，以"管理员操作后台管理系统”为例，说明本发明的具体实施流程：

[0151] (1)初始化与策略注入：

[0152] 管理员登录系统后，Web应用加载前端安全SDK，SDK初始化并触发安全上下文感知模块；

[0153] 感知模块采集"角色＝admin，路由＝ / admin / user”等上下文数据，发送至管理中心；

[0154] 管理中心返回匹配的严格CSP策略(script-src'self'https: / / admi n.cdn.com；style-src'self'；object-src'none')；

[0155] 动态CSP策略引擎创建<meta>标签注入页面，完成CSP部署。

[0156] (2)运行时监控与输入过滤：

[0157] 管理员在"用户编辑”页面的富文本编辑器(id＝"rich-text-editor")中输入内容，包含恶意脚本<script>alert('XSS')< / script> ;

[0158] The input monitoring module intercepts the input, identifies it as a "rich text" type, and calls the rich text cleaning rule;

[0159] After cleaning, remove <script>标签，仅保留合法内容，放行清洗后的输入。

[0160] (3)敏感操作验证：

[0161] 管理员点击"删除用户”按钮，应用发起请求POST / api / admin / delete；

[0162] 敏感操作拦截器检测到该URL命中"极高风险”清单，立即中断请求，弹出带加密输入框的验证模态框，要求输入"管理员授权码”；

[0163] 管理员输入授权码后，拦截器通过HTTPS向安全策略管理中心发送验证请求(携带管理员ID、授权码哈希值)，管理中心校验通过后返回"验证通过”令牌；

[0164] 拦截器将令牌附加到原请求的Authorization头中，重新发起 / api / adm in / delete请求并放行，同时记录操作日志(含管理员ID、操作时间、IP地址、目标用户ID)至管理中心。

[0165] (4)威胁检测与联动加固：

[0166] 若攻击者通过IP伪装成普通用户，在"商品评论”页面(路由 / produc t / 123 / comment)的评论框(id＝"product-comment")中输入存储型XSS pay load：<script src＝"http: / / attacker.com / steal.js">< / script> ;

[0167] The input monitoring module intercepts the input, identifies it as a "general text" type through the field id, triggers the special character filtering rule, and detects <script>标签及外部脚本链接，判定为恶意输入；

[0168] 模块立即拦截提交并提示"输入包含危险脚本，请修改”，同时将威胁事件详情(攻击类型：存储型XSS注入；上下文：角色＝user、路由＝ / produ ct / 123 / comment、攻击IP＝10.0.0.5；payload内容：[完整脚本])加密上报至安全策略管理中心；

[0169] 管理中心接收后，匹配预设联动规则("普通用户触发XSS攻击时，即时收紧其CSP策略并提升敏感操作验证等级”)，通过WebSocket向该用户的前端SDK推送更新指令：

[0170] A：动态CSP策略升级为：script-src'self'；img-src'self'；styl e-src'self'；object-src'none'；base-uri'none'；report-uri / csp-report；

[0171] B：敏感操作清单中" / api / user / address / edit”的验证策略从"短信验证”升级为"密码+短信双验证”；

[0172] 前端SDK的动态CSP策略引擎在1秒内完成新策略注入，敏感操作拦截器同步更新规则，实现"一次检测、多层防御升级”的纵深效果。

[0173] (5)全局策略迭代优化：

[0174] 管理中心持续统计30天内的威胁日志，发现路由 / forum / post累计触发23次XSS攻击，且攻击payload多包含<svg onload>标签；

[0175] 系统自动将该路由的默认CSP策略调整为更严格版本(新增img-src's elf'data:；disallow-scripts)，并向安全管理员推送"路由安全风险预警”邮件(含攻击趋势图表、高频payload分析)；

[0176] 管理员通过管理界面的"规则优化”功能，为"论坛帖子”字段新增自定义规则("禁止<svg>标签及on*事件属性”)，点击"同步”后，规则即时下发至所有前端SDK，实现全局防护策略的动态迭代。

[0177] 第三实施例

[0178] 如图3所示，一种用于执行如第一实施例中的深度上下文感知的前端动态纵深安全防护方法的深度上下文感知的前端动态纵深安全防护系统，包括：

[0179] 安全策略管理中心，包括CSP策略库、输入验证规则库、敏感操作清单，其中，CSP策略库用于存储所有预定义的、根据用户角色和访问路由精细分类的内容安全策略，向下发给动态CSP策略引擎策略内容；输入验证规则库用于存储不同语义类型输入字段的验证和清洗规则，供输入监控与上下文过滤模块调用；敏感操作清单用于定义所有需要被额外验证的高风险API接口地址及其风险等级，供敏感操作拦截器调用；同时接收前端SDK上报的威胁事件，进行日志分析和策略调整；

[0180] 前端安全SDK，包括安全上下文感知模块、动态CSP策略引擎、输入监控与上下文过滤模块、敏感操作拦截器，其中，安全上下文感知模块作为整个SDK的大脑，持续采集并维护当前运行环境的安全上下文信息，将采集到的用户角色、权限、当前路由、UI组件信息等上下文数据，实时同步给其他模块；动态CSP策略引擎接收来自安全上下文感知模块的上下文数据和来自安全策略管理中心的策略内容，根据当前上下文选择并激活对应的策略，将最终的CSP策略动态注入到页面的<meta>标签中，即时生效；输入监控与上下文过滤模块接收来自安全上下文感知模块的上下文数据，并监控所有用户输入，根据输入字段的语义上下文，从输入验证规则库中匹配对应的规则进行实时过滤和清洗，将过滤后的安全输入交给Web应用逻辑，若检测到攻击，则上报威胁至安全策略管理中心；敏感操作拦截器接收来自安全上下文感知模块的上下文数据，并代理所有发起的网络请求，检查请求的URL是否匹配敏感操作清单中的敏感操作，若是，则暂停请求，触发二次验证，验证通过后，放行安全的请求至后端，若验证失败或检测到绕过行为，则拦截并上报威胁。

[0181] 如图3上述流程图清晰地展示了系统的两大组成部分(安全策略管理中心和前端安全SDK)以及它们之间的交互关系。以下是每个环节的详细说明：

[0182] 1、安全策略管理中心(A)

[0183] A1:CSP策略库

[0184] 功能:存储所有预定义的内容安全策略。策略不是单一的，而是根据用户角色(如普通用户、管理员)和访问的路由(如首页、管理后台)进行精细分类。

[0185] 输出:向下发给"动态CSP策略引擎”的策略内容。

[0186] A2:输入验证规则库

[0187] 功能:存储不同语义类型输入字段的验证和清洗规则。例如，"邮箱”字段规则、"电话号码”字段规则、"富文本”字段的XSS过滤规则等。

[0188] 输出:其规则内置于SDK中，供"输入监控与上下文过滤模块”调用。

[0189] A3:敏感操作清单

[0190] 功能:定义所有需要被额外验证的高风险API接口地址(如 / api / transf er, / api / delete)及其风险等级。

[0191] 输出:其清单内置于SDK中，供"敏感操作拦截器”调用。

[0192] 2、前端安全SDK(B)-核心处理流程

[0193] B1:安全上下文感知模块

[0194] 功能:作为整个SDK的"大脑”，持续采集并维护当前运行环境的安全上下文信息。

[0195] 输出:将采集到的用户角色、权限、当前路由、UI组件信息等上下文数据，实时同步给其他三个核心引擎。

[0196] B2_1:动态CSP策略引擎

[0197] 输入:接收来自B1的上下文数据和来自A1的策略内容。

[0198] 处理:根据当前上下文(如：用户是管理员，正在访问 / admin页面)，选择并激活A1下发的对应严格策略。

[0199] 输出:将最终的CSP策略动态注入到页面的<meta>标签中，即时生效。

[0200] B2_2:输入监控与上下文过滤模块

[0201] 输入:接收来自B1的上下文数据，并监控所有用户输入。

[0202] 处理:根据输入字段的语义上下文(例如，通过name、id或周边文本判断是"邮箱”还是"评论框”)，从A2的规则库中匹配对应的规则进行实时过滤和清洗。

[0203] 输出:将过滤后的安全输入交给Web应用逻辑。若检测到攻击，则上报威胁至管理中心。

[0204] B2_3:敏感操作拦截器

[0205] 输入:接收来自B1的上下文数据，并代理所有发起的网络请求。

[0206] 处理:检查请求的URL是否匹配A3清单中的敏感操作。若是，则暂停请求，触发二次验证(如弹窗确认、验证码)。

[0207] 输出:验证通过后，放行安全的请求至后端。若验证失败或检测到绕过行为，则拦截并上报威胁。

[0208] B3:Web应用

[0209] 3、数据流说明

[0210] 策略下发(A→B2_1):管理中心将最新的、符合上下文的安全策略推送给前端引擎。

[0211] 威胁上报(B2_2 / B2_3→A):前端SDK将检测到的攻击行为、类型及其发生时的上下文信息上报给管理中心，用于审计、告警和触发全局联动。

[0212] 策略注入 / 过滤 / 验证(B2→B3):三大引擎通力协作，确保最终执行应用逻辑的是经过检查和净化后的安全数据和行为。

[0213] 一种计算机可读存储介质，计算机可读存储介质存储有计算机代码，当计算机代码被执行时，如上述方法被执行。本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁盘或光盘等。

[0214] 以上所述仅是本发明的优选实施方式，本发明的保护范围并不仅局限于上述实施例，凡属于本发明思路下的技术方案均属于本发明的保护范围。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理前提下的若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

[0215] 以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

[0216] 应当说明的是，上述实施例均可根据需要自由组合。以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。< / script> < / label> < / form>

Claims

1. A deep context-aware front-end dynamic in-depth security protection method, characterized in that, The method comprises the following steps: S1: Context collection and policy matching, when the web application is started or the route is switched, the front-end security SDK is initialized, the security context perception module collects the current user role, permission level, access route path and semantic attribute of the operation UI component, forms multi-dimensional deep context data, and requests the matching CSP policy and input verification rule from the security policy management center based on the data; S2: Dynamic policy injection, the dynamic CSP policy engine injects the obtained CSP policy into the front-end environment by creating or updating the page Meta tag, if there is an old policy, it is preferentially overwritten, if the policy request fails, the local cached basic security policy is enabled and the exception log is reported; S3: Runtime double-layer protection, including input protection layer and operation protection layer, the input protection layer intercepts user form input, manual input and AJAX request data through input monitoring and context filtering module, matches the corresponding verification rule based on the semantic context of the input field, and releases the legal data and intercepts and cleanses the malicious data; The operation protection layer monitors the network request URL through the sensitive operation interceptor, and triggers the corresponding verification process according to the risk level for the request hitting the sensitive operation list, and the request can be released after verification; S4: Threat linkage response, if malicious attacks are detected in step S3, the threat event is reported to the security policy management center, the management center pushes the policy adjustment instruction to the front-end SDK according to the preset rule, and dynamically updates the CSP policy and sensitive operation verification rule; S5: Global policy optimization, the management center statistically analyzes the threat log, automatically adjusts the default policy of the high-risk route, and supports manual optimization of the rule by the administrator, and realizes the iterative upgrade of the protection policy.

2. The deep context aware front-end dynamic in-depth security protection method of claim 1, wherein, In step S1, the security context perception module extracts the user role and permission by listening to the login success event of the web application, obtains the current access route through the proxy route hook or popstate event, extracts the semantic attribute of the operation component through DOM parsing, collects and forms deep context data in multiple dimensions, and the deep context data includes user role, permission level, access route path, id / class attribute of operation component, semantic type of input field and security level of current session, and the data is updated in real time when the user switches the route, submits the form or initiates the request.

3. The deep context aware front-end dynamic in-depth security protection method of claim 1, wherein, In step S2, the corresponding CSP policy is requested from the background management center based on the context data, if the network is interrupted or the management center is unavailable, the local cached basic security policy is enabled when the dynamic CSP policy engine fails to request the policy, which is the minimum permission policy that can be configured, and is pre-downloaded by the security policy management center and cached in the front-end local storage localStorage, the cache validity period is 7 days, and the basic security policy at least contains the script-src'self' rule; Meanwhile, the dynamic CSP policy engine creates a Meta tag of http-equiv="Content-Security-Policy", writes the matched CSP policy into the content attribute, and inserts it into the head of the page tag. If the page already has a CSP tag, the old tag is removed before the new tag is injected. And through the WebSocket, a long connection with the management center is established, and after receiving the policy adjustment instruction, the above injection steps are repeated to complete the injection of the new policy, ensuring that the policy takes effect within 1-3 seconds.

4. The deep context aware front-end dynamic depth security method of claim 1, wherein, In step S3, when the input guard layer performs full-scene input interception, the proxy is passed through <form>The onsubmit event intercepts form submission, the input / change event listens to real-time input, and the send method of the proxy fetch / XMLHttpRequest intercepts the request body data, covering all user inputs.< / form> 5. The deep context aware front-end dynamic in-depth security protection method of claim 1, wherein, In step S3, when the input guard layer performs input field semantic recognition, the id, name, class attributes and surroundings of the input field are extracted <label>The text matches the content in the preset semantic type library, including email, mobile phone number, rich text, and general text, to determine the semantic attribute of the field. If it cannot be matched, it is classified as general text by default.< / label> 6. The deep context aware front door dynamic depth security method of claim 1, wherein, In step S3, the input protection layer performs fine-grained rule matching and processing on different semantic type input fields: If it is a structured field including email and mobile phone number, regular expression is used to verify the format, and if it does not match, the input is intercepted and a format error prompt is returned. If a rich text field, allow inclusion based on whitelist / In the inner legal tag, remove includes <script> / <iframe>在内的危险标签及on*事件属性，且富文本过滤采用DOMPurify库结合自定义白名单实现，白名单支持管理员通过安全策略管理中心动态配置，配置变更后10秒内同步至所有前端SDK；若为通用文本字段，过滤或转义包括<、>、'、"在内的特殊字符，避免注入攻击。7.根据权利要求1所述的深度上下文感知的前端动态纵深安全防护方法，其特征在于，在步骤S4中，若检测到恶意攻击输入，将攻击类型、上下文数据、攻击IP及payload加密上报至安全策略管理中心，触发联动防护；所述联动防护机制包括：CSP策略收紧、敏感操作验证等级提升、恶意IP临时拦截中的至少一种；其中，CSP策略收紧包括禁用unsafe-inline / unsafe-eval、限制资源加载来源、新增report-uri规则。8.一种用于执行如权利要求1-7任意一项所述的深度上下文感知的前端动态纵深安全防护方法的深度上下文感知的前端动态纵深安全防护系统，其特征在于，包括：安全策略管理中心，包括CSP策略库、输入验证规则库、敏感操作清单，其中，CSP策略库用于存储所有预定义的、根据用户角色和访问路由精细分类的内容安全策略，向下发给动态CSP策略引擎策略内容；输入验证规则库用于存储不同语义类型输入字段的验证和清洗规则，供输入监控与上下文过滤模块调用；敏感操作清单用于定义所有需要被额外验证的高风险API接口地址及其风险等级，供敏感操作拦截器调用；同时接收前端SDK上报的威胁事件，进行日志分析和策略调整；前端安全SDK，包括安全上下文感知模块、动态CSP策略引擎、输入监控与上下文过滤模块、敏感操作拦截器，其中，安全上下文感知模块作为整个SDK的大脑，持续采集并维护当前运行环境的安全上下文信息，将采集到的用户角色、权限、当前路由、UI组件信息等上下文数据，实时同步给其他模块；动态CSP策略引擎接收来自安全上下文感知模块的上下文数据和来自安全策略管理中心的策略内容，根据当前上下文选择并激活对应的策略，将最终的CSP策略动态注入到页面的<meta>标签中，即时生效；输入监控与上下文过滤模块接收来自安全上下文感知模块的上下文数据，并监控所有用户输入，根据输入字段的语义上下文，从输入验证规则库中匹配对应的规则进行实时过滤和清洗，将过滤后的安全输入交给Web应用逻辑，若检测到攻击，则上报威胁至安全策略管理中心；敏感操作拦截器接收来自安全上下文感知模块的上下文数据，并代理所有发起的网络请求，检查请求的URL是否匹配敏感操作清单中的敏感操作，若是，则暂停请求，触发二次验证，验证通过后，放行安全的请求至后端，若验证失败或检测到绕过行为，则拦截并上报威胁。9.一种计算机设备，包括存储器和一个或多个处理器，所述存储器中存储有计算机代码，所述计算机代码被所述一个或多个处理器执行时，使得所述一个或多个处理器执行如权利要求1至7中任一项所述的方法。10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机代码，当所述计算机代码被执行时，如权利要求1至7中任一项所述的方法被执行。< / script>

Images