一种安全的前端跨域请求数据交互的方法与流程
1.本发明涉及跨域数据交互技术领域，具体为一种安全的前端跨域请求数据交互的方法。
背景技术：
2.随着互联网的蓬勃发展，使得日常办公需要通过大量的软件进行，而对于在不同的软件系统之间，需要进行业务数据交互时，往往需要进行跨域请求数据交互，因此一种跨数据交互处理方法相应而生。
3.现有技术中的跨域数据交互处理方法主要存在如下技术缺陷：其一、现有跨域数据交互多通过后台接口实现，使跨域系统之间的前端业务要素各自孤立，造成页面要素无法有效整合，网络开销够大的问题；其二、现有的前端跨域数据交互通常由某一业务域直接操控其他业务域上面的js脚本处理数据，需要其他业务域开放相应的权限，存在较大的安全隐患的问题。
技术实现要素：
4.本发明的目的在于提供一种安全的前端跨域请求数据交互的方法，以解决背景技术中提出的问题。
5.为实现上述目的，本发明提供如下技术方案：一种安全的前端跨域请求数据交互的方法，包括以下步骤：
6.s1、请求方系统前端构建页面；
7.s2、被请求方监听请求方消息事件；
8.s3、请求方通过前端操作触发消息事件；
9.s4、被请求方接收消息事件，进行访问域识别及过滤；
10.s5、被请求方传递数据以同样方式操作；
11.s6、跨域数据交互。
12.进一步的，在所述s1中请求方系统前端构建页面，通过url整合被请求方系统页面，并通过iframe引入被请求方页面url地址，显示被请求方业务元素；同时被请求方系统被动加载页面要素，使跨域系统的页面要素实现统一显示。
13.进一步的，在所述s2中被请求方根据约定规范，监听请求方消息事件；消息在传递过程中会携带消息提交方的域地址、消息key值以及消息内容。
14.进一步的，在所述s3中当用户在请求方系统前端页面进行操作时，由请求方前端页面向被请求方前端页面发送消息事件。
15.进一步的，在所述s4中被请求方页面接收到消息事件之后，对消息请求中的域地址进行解析，对非法域地址过滤；根据消息key值，进行对应的消息事件处理，也可以根据需要解析消息内容，随后根据处理结果，向请求方提交响应消息。
16.进一步的，在所述s5中被请求方页面在事件处理过程中，可以以同样的方式，跨域
向另一方通过消息事件传递数据。
17.进一步，在通过所述s1到s5的操作过程，可以实现较为安全的前端请求的跨域数据交互。
18.与现有技术相比，本发明提供了一种安全的前端跨域请求数据交互的方法，具备以下有益效果：
19.1、该安全的前端跨域请求数据交互的方法，通过通过此种安全的前端跨域请求数据交互的方法，可以使请求方整合被请求方的页面元素，实现跨域系统之间的数据元素统一呈现，并且支持跨域系统之间的数据传输通过前端之间的消息事件进行，使数据无需通过后台转发，节省网络开销。
20.2、该安全的前端跨域请求数据交互的方法，通过通过消息事件机制，使各个域的数据处理保持独立性，保障了各个域的数据访问安全。同时，利用消息机制，可以建立跨域访问白名单，即保证了前端跨域系统之间必要的数据交互，又确保了系统数据交互的安全性。
附图说明
21.图1为本发明流程示意图。
具体实施方式
22.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
23.实施例
24.一种安全的前端跨域请求数据交互的方法，包括以下步骤：
25.s1、请求方系统前端构建页面；
26.s2、被请求方监听请求方消息事件；
27.s3、请求方通过前端操作触发消息事件；
28.s4、被请求方接收消息事件，进行访问域识别及过滤；
29.s5、被请求方传递数据以同样方式操作；
30.s6、跨域数据交互。
31.进一步的，在s1中请求方系统前端构建页面，通过url整合被请求方系统页面，并通过iframe引入被请求方页面url地址，显示被请求方业务元素；同时被请求方系统被动加载页面要素，使跨域系统的页面要素实现统一显示。
32.进一步的，在s2中被请求方根据约定规范，监听请求方消息事件；消息在传递过程中会携带消息提交方的域地址、消息key值以及消息内容。
33.进一步的，在s3中当用户在请求方系统前端页面进行操作时，由请求方前端页面向被请求方前端页面发送消息事件。
34.进一步的，在s4中被请求方页面接收到消息事件之后，对消息请求中的域地址进行解析，对非法域地址过滤；根据消息key值，进行对应的消息事件处理，也可以根据需要解
析消息内容，随后根据处理结果，向请求方提交响应消息。
35.进一步的，在s5中被请求方页面在事件处理过程中，可以以同样的方式，跨域向另一方通过消息事件传递数据。
36.进一步，在通过s1到s5的操作过程，可以实现较为安全的前端请求的跨域数据交互。
37.例如：
38.一种安全的前端跨域请求数据交互的方法，包括需要前端跨域进行数据交互的系统a和系统b，其中a系统页面需要整合b系统的页面，将其作为子页面嵌入到a系统页面中，并且，b系统的页面与a系统页面之间存在数据交互需求；但系统a、系统b属于不同的访问域。按照该方法实现安全的前端跨域请求数据交互时，主要步骤如下：
39.s1、系统a前端构建页面，并通过iframe引入被系统b页面url地址，显示系统b页面元素；使跨域系统的页面要素实现统一显示；
40.s2、系统b将系统a的访问域纳入到访问白名单，根据约定规范，监听消息事件；
41.s3、当用户在系统a前端页面进行操作时，由系统a前端页面向系统b前端页面发送消息事件；消息事件中携带系统a的域地址、事件的key值，以及消息数据；
42.s4、系统b页面接收到消息事件之后，对消息请求中的域地址进行解析，对非法域地址过滤；根据消息key值，进行对应的消息事件处理，也可以根据需要解析消息数据内容。
43.s5、系统b页面在事件处理过程中，可以以同样的方式，跨域向系统a通过消息事件传递数据。
44.s6、通过上述过程，可以实现较为安全的前端请求的跨域数据交互。
45.尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
技术特征：
1.一种安全的前端跨域请求数据交互的方法，其特征在于：包括以下步骤：s1、请求方系统前端构建页面；s2、被请求方监听请求方消息事件；s3、请求方通过前端操作触发消息事件；s4、被请求方接收消息事件，进行访问域识别及过滤；s5、被请求方传递数据以同样方式操作；s6、跨域数据交互。2.根据权利要求1所述的一种安全的前端跨域请求数据交互的方法，其特征在于：在所述s1中请求方系统前端构建页面，并通过iframe引入被请求方页面url地址，显示被请求方业务元素；使跨域系统的页面要素实现统一显示。3.根据权利要求1所述的一种安全的前端跨域请求数据交互的方法，其特征在于：在所述s2中被请求方根据约定规范，监听请求方消息事件；消息在传递过程中会携带消息提交方的域地址、消息key值以及消息内容。4.根据权利要求1所述的一种安全的前端跨域请求数据交互的方法，其特征在于：在所述s3中当用户在请求方系统前端页面进行操作时，由请求方前端页面向被请求方前端页面发送消息事件。5.根据权利要求1所述的一种安全的前端跨域请求数据交互的方法，其特征在于：在所述s4中被请求方页面接收到消息事件之后，对消息请求中的域地址进行解析，对非法域地址过滤；根据消息key值，进行对应的消息事件处理，也可以根据需要解析消息内容。6.根据权利要求1所述的一种安全的前端跨域请求数据交互的方法，其特征在于：在所述s5中被请求方页面在事件处理过程中，可以以同样的方式，跨域向另一方通过消息事件传递数据。7.根据权利要求1所述的一种安全的前端跨域请求数据交互的方法，其特征在于：在通过所述s1到s5的操作过程，可以实现较为安全的前端请求的跨域数据交互。
技术总结
本发明涉及跨域数据交互技术领域，且公开了一种安全的前端跨域请求数据交互的方法，包括请求方系统前端构建页面，并通过iframe引入被请求方页面URL地址，显示被请求方业务元素；使跨域系统的页面要素实现统一显示；被请求方监听请求方消息事件；请求方通过前端操作触发消息事件；被请求方接收消息事件，进行访问域识别及过滤；被请求方传递数据以同样方式操作；跨域数据交互。该安全的前端跨域请求数据交互的方法，通过此种安全的前端跨域请求数据交互的方法，可以使请求方整合被请求方的页面元素，实现跨域系统之间的数据元素统一呈现，并且支持跨域系统之间的数据传输通过前端之间的消息事件进行，使数据无需通过后台转发，节省网络开销。节省网络开销。节省网络开销。
