一種安全的前端跨域請求數據交互的方法與流程
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地址，顯示被請求方業務元素；使跨域系統的頁面要素實現統一顯示；被請求方監聽請求方消息事件；請求方通過前端操作觸發消息事件；被請求方接收消息事件，進行訪問域識別及過濾；被請求方傳遞數據以同樣方式操作；跨域數據交互。該安全的前端跨域請求數據交互的方法，通過此種安全的前端跨域請求數據交互的方法，可以使請求方整合被請求方的頁面元素，實現跨域系統之間的數據元素統一呈現，并且支持跨域系統之間的數據傳輸通過前端之間的消息事件進行，使數據無需通過后臺轉發，節省網絡開銷。節省網絡開銷。節省網絡開銷。
