物件上傳方法及裝置
本說明書一個或多個實施例涉及電腦技術領域，尤其涉及一種物件上傳方法及裝置。
目前，在使用者存取不支持物件上傳功能的網頁頁面(以下稱為第一頁面)的過程中，若有上傳物件的需求，第一頁面可以在接收到使用者發送的待上傳的物件之後，將該物件上傳至支持物件上傳功能的網頁頁面(以下稱為第二頁面)對應的伺服器。上述第一頁面與第二頁面之間的通訊過程往往是一種跨域、異步通訊的過程。其中，跨域是指上述第一頁面與第二頁面的協定、域名或者埠不全部相同。異步是指第一頁面在將物件上傳至第二頁面對應的伺服器的過程中，不需要跳轉頁面。
因此，如何安全、可靠地實現頁面之間的跨域、異步通訊就成為要解決的問題。
本說明書一個或多個實施例描述了一種物件上傳方法及裝置，以安全、可靠地實現頁面之間的跨域、異步通訊。
第一方面，提供了一種物件上傳方法，包括：
第一網頁頁面接收第二網頁頁面藉由調用能實現訊息跨域傳輸的應用程式設計介面API函數發送的物件上傳訊息，所述第一網頁頁面屬於第一域，所述第二網頁頁面屬於任一域；所述物件上傳訊息包括待跨域上傳的物件；
對所述物件上傳訊息進行合法性驗證；
在對所述物件上傳訊息合法性驗證通過後，向對應的伺服器上傳所述物件；
接收所述伺服器返回的所述物件的鏈接位址；
調用所述API函數向所述第二網頁頁面發送所述物件的鏈接位址。
第二方面，提供了一種物件上傳方法，包括：
第二網頁頁面接收物件跨域上傳請求，所述物件跨域上傳請求包括待跨域上傳的物件；所述第二網頁頁面屬於任一域；
調用能實現訊息跨域傳輸的應用程式介面API函數向第一網頁頁面發送物件上傳訊息，所述物件上傳訊息用於指示所述第一網頁頁面在對所述物件上傳訊息合法性驗證通過後將所述物件上傳至對應的伺服器，並獲取所述物件的鏈接位址；所述第一網頁頁面屬於第一域；
接收所述第一網頁頁面藉由調用所述API函數返回的所述物件的鏈接位址。
第三方面，提供了一種物件上傳裝置，包括：
接收單元，用於接收第二網頁頁面藉由調用能實現訊息跨域傳輸的應用程式設計介面API函數發送的物件上傳訊息，所述第一網頁頁面屬於第一域，所述第二網頁頁面屬於任一域；所述物件上傳訊息包括待跨域上傳的物件；
驗證單元，用於對所述接收單元接收的所述物件上傳訊息進行合法性驗證；
上傳單元，用於在所述驗證單元對所述物件上傳訊息合法性驗證通過後，向對應的伺服器上傳所述物件；
所述接收單元，還用於接收所述伺服器返回的所述物件的鏈接位址；
發送單元，用於調用所述API函數向所述第二網頁頁面發送所述物件的鏈接位址。
第四方面，提供了一種物件上傳裝置，包括：
接收單元，用於接收物件跨域上傳請求，所述物件跨域上傳請求包括待跨域上傳的物件；所述第二網頁頁面屬於任一域；
發送單元，用於調用能實現訊息跨域傳輸的應用程式介面API函數向第一網頁頁面發送物件上傳訊息，所述物件上傳訊息用於指示所述第一網頁頁面在對所述物件上傳訊息合法性驗證通過後將所述物件上傳至對應的伺服器，並獲取所述物件的鏈接位址；所述第一網頁頁面屬於第一域；
所述接收單元，還用於接收所述第一網頁頁面藉由調用所述API函數返回的所述物件的鏈接位址。
本說明書一個或多個實施例提供的物件上傳方法及裝置，第一域的第一網頁頁面接收任一域的第二網頁頁面發送的物件上傳訊息。對該物件上傳訊息進行合法性驗證，在合法性驗證通過後，將物件上傳訊息中的物件上傳至對應的伺服器，並獲取該物件的鏈接位址。向上述第二網頁頁面返回該物件的鏈接位址。由此可以看出，本說明書的實施例中，當任一域的網頁頁面想要上傳物件至第一域的伺服器時，可以先將該物件轉發至第一域的網頁頁面，在該第一域的網頁頁面進行合法性驗證後，再將該物件上傳至第一域的伺服器。由此，可以安全、可靠地實現頁面之間的跨域、異步通訊。
在介紹本說明書提供的方案之前，先解釋兩個概念：同域和跨域。為了保證資訊的安全，所有瀏覽器都實行一個策略：網站協定、網站域名以及存取埠三者都相同的兩個網頁頁面，才可以不受限制存取對方的本地儲存(如，Cookie、LocalStorage和IndexDB等)、操作對方文檔物件模型(Document Object Model，DOM)、向對方發送異步JavaScript和可延伸標示語言(Extensible Markup Language，XML)(Asynchronous Javascript And XML，AJAX)。本說明書中的域藉由網站協定、網站域名以及存取埠來定義。需要說明的是，當兩個網頁頁面不滿足上述三者相同的條件時稱為跨域，而當滿足這三者相同的條件時稱為同域。
下面結合圖式，對本說明書提供的方案進行描述。
本說明書一個實施例提供的物件上傳方法可以應用於如圖1所示的場景中，圖1中，第一網頁(Web)頁面屬於第一域，該第一域也可以稱為自定義域，即由商家自己定義網站協定、網站域名以及存取埠。其可以綁定在任何已有的域下。該第一網頁頁面具有對應的伺服器，該伺服器可以提供物件儲存功能，或者說可以提供物件儲存服務。此處的物件可以包括：文檔、圖片或者音視頻等。圖1中的第二網頁頁面、第三網頁頁面以及第N網頁頁面可以分別屬於不同的其它域，該其它域可以為不同於第一域的任一域。
需要說明的是，為了能實現第一網頁頁面與其它網頁頁面(包括第二網頁頁面、第三網頁頁面或者第N網頁頁面)之間的跨域、異步通訊，可以預先在第一網頁頁面以及其它網頁頁面進行相應的配置。如，可以在第一網頁頁面中進行相應的配置，以實現第一網頁頁面可以監聽其它網頁頁面發送的訊息。此外，還可以在其它網頁頁面中也進行相應的配置，以實現其它網頁頁面可以監聽第一網頁頁面發送的訊息。本說明書中，第一網頁頁面與其它網頁頁面之間可以是一對多的關係。
圖1中，當第一網頁頁面與其它網頁頁面之間藉由調用postMessage應用程式設計介面(Application Programming Interface，API)函數來實現跨域、異步訊息的傳輸時，可以藉由修改postMessage API函數中的“origin”參數，來進行上述配置。具體地，可以在第一網頁頁面中，將“origin”參數設為“*”。在具體監聽過程中，當第一網頁頁面接收到其它網頁頁面發送的訊息時，第一網頁頁面可以將其它網頁頁面的域與“origin”參數的參數值進行匹配，若匹配成功，則監聽該訊息。否則不監聽。需要說明的是，因為“*”是通用字元，任一網頁頁面的域均能匹配成功，所以第一網頁頁面可以監聽任一網頁頁面發送的訊息。在其它網頁頁面中，將“origin”參數設為第一網頁頁面的域。其具體監聽過程類似，在此不復贅述。
當然，在實際應用中，也可以藉由其它方式來進行相應的配置，如，在第一網頁頁面中，不對訊息的來源進行判斷等。本說明書對此不復贅述。
圖2為本說明書一個實施例提供的物件上傳方法流程圖。所述方法的執行主體可以為圖1中的第一網頁頁面。如圖2所示，所述方法具體可以包括：
步驟210，第一網頁頁面接收第二網頁頁面藉由調用能實現訊息跨域傳輸的應用程式設計介面API函數發送的物件上傳訊息。
其中，第一網頁頁面屬於第一域。該第一域可以由商家自己定義，如，可以定義為：“fengdie.alipay.com”。第二網頁頁面屬於任一域，如，該任一域例如可以為：“www.abc.cn”。也即本說明書實施例中的第一網頁頁面可以接收來自任一域的網頁頁面(也可以稱為外域頁面)發送的訊息。
步驟210中的物件上傳訊息可以包括待跨域上傳的物件，如，文檔、圖片或者音視頻等。
在一種具體實現方式中，第一網頁頁面可以以隱藏的方式在第二網頁頁面中加載(也即第一網頁頁面綁定在了第二網頁頁面的域下)。具體地，第二網頁頁面藉由產生一個高度為0、寬度為0的iframe標籤(標籤是創建網頁頁面的標記語言中的基本單位)加載第一網頁頁面。在該方式中，第一網頁頁面和第二網頁頁面運行在同一個終端上。如，同時運行在使用者當前使用的電腦或者行動終端上。只不過終端上安裝的瀏覽器只顯示第二網頁頁面。使用者直接可以互動的是第二網頁頁面，而第一網頁頁面對使用者來說是不可見的。當使用者想要藉由第二網頁頁面上傳物件時，也即在第二網頁頁面接收到使用者發送的物件上傳請求時，該第二網頁頁面會向隱藏的第一網頁頁面發送上述物件上傳訊息。
需要說明的是，第一網頁頁面與第二網頁頁面屬於不同的域。也就是說，該兩個網頁頁面之間的通訊是跨域通訊。在該跨域通訊的過程中，第二網頁頁面可以藉由調用能實現訊息跨域傳輸的API函數，來向第一網頁頁面發送上述物件上傳訊息。在一個例子中，上述能實現訊息跨域傳輸的API函數可以為postMessage API函數。
還需要說明的是，針對部分瀏覽器還未實現postMessage可以傳遞檔案列表(Filelist)的情況，因為這部分瀏覽器通常可以直接傳遞字串，所以在發送上述物件上傳訊息之前，第二網頁頁面可以對待上傳的物件先轉化為對應的字串(也稱為串列化)。以待上傳的物件為圖片為例來說，第二網頁頁面可以使用FileReader類裡的readAsDataURL方法將圖片轉換成base64編碼的字串。可以理解的是，當對待上傳的物件先進行串列化時，上述物件上傳訊息中包括串列化後的物件。相應的，第一網頁頁面在接收到物件上傳訊息之後，首先會判斷該訊息中的物件是否為串列化後的物件。如前述例子，首先會判斷訊息中的物件是否為base64編碼的字串。若是，則對該串列化後的物件進行反串列化，從而得到原來的物件。由此，實現了更好的相容性。
而針對部分瀏覽器實現了postMessage可以傳遞Filelist的情況，則該兩個網頁頁面之間可以直接進行物件傳遞(如，直接可以傳遞圖片)，不需要做串列化。
步驟220，對物件上傳訊息進行合法性驗證。
步驟230，在對物件上傳訊息合法性驗證通過後，向對應的伺服器上傳物件。
為了安全性，第一網頁頁面在向對應的伺服器上傳物件之前，可以對上述物件上傳訊息進行合法性驗證。在物件上傳訊息合法性驗證通過後，再向對應的伺服器上傳物件。此處，對訊息進行合法性驗證屬於傳統常規技術，在此不復贅述。
在一種具體實現方式中，第一網頁頁面可以藉由AJAX post()方法來向對應的伺服器上傳物件。
步驟240，接收伺服器返回的物件的鏈接位址。
在一個例子中，伺服器在儲存該物件之後，可以向第一網頁頁面返回該物件的一致資源定位器(Uniform Resource Locator，URL)位址。
步驟250，調用API函數向第二網頁頁面發送物件的鏈接位址。
如前述例子，第一網頁頁面可以藉由調用上述postMessage API函數來向第二網頁頁面返回物件的URL位址。第二網頁頁面在接收到物件的URL位址之後，可以向使用者展示該URL位址。當接收到使用者對該URL位址的點擊指令時，可以向使用者展示對應的物件。
綜上，本說明書上述實施例提供的物件上傳方法，當任一域的網頁頁面想要上傳物件至第一域的網頁頁面的伺服器時，可以先向第一域的網頁頁面發送物件上傳訊息。該第一域的網頁頁面可以對訊息進行合法性驗證，在合法性驗證通過後，再將物件上傳至對應的伺服器。由此，保證了通訊的安全性。此外，由於該方法只涉及兩個跨域網頁頁面之間的通訊，以及域內網頁頁面與伺服器之間的通訊，從而有方案設計簡單的優點。
在實際應用中，可以將實現上述方案的流程封裝在軟體開發套件(Software Development Kit，SDK)中。當任一域的網頁頁面想要具有物件上傳功能時，可以先安裝該SDK包。之後，該網頁頁面可以將使用者要上傳的物件傳給SDK，SDK就可以返回物件的鏈接位址。該任一域的網頁頁面不需要感知伺服器是什麼，也不需要知道第一域的網頁頁面與對應的伺服器之間如何發AJAX。
圖3為本說明書另一個實施例提供的物件上傳方法流程圖。所述方法的執行主體可以為圖1中的第二網頁頁面。如圖3所示，所述方法具體可以包括：
步驟310，第二網頁頁面接收物件跨域上傳請求。
此處的第二網頁頁面可以為任一域的的網頁頁面。該網頁頁面藉由瀏覽器加載後可以直接與使用者進行互動。以使用者上傳圖片來說，上述跨域上傳請求可以是在使用者選擇了要上傳的圖片，並點擊發送按鈕時發送的。
上述物件跨域上傳請求可以包括待跨域上傳的物件，如，上述圖片、文檔以及音視頻等。
步驟320，調用能實現訊息跨域傳輸的應用程式介面API函數向第一網頁頁面發送物件上傳訊息。
此處，第一網頁頁面可以以隱藏的方式在第二網頁頁面中加載(也即第一網頁頁面綁定在了第二網頁頁面所屬的域下)。在一個例子中，上述能實現訊息跨域傳輸的API函數可以為postMessage API函數。
需要說明的是，針對部分瀏覽器還未實現postMessage可以傳遞檔案列表(Filelist)的情況，在發送上述物件上傳訊息之前，第二網頁頁面可以對待上傳的物件先進行串列化。以待上傳的物件為圖片為例來說，第二網頁頁面可以使用FileReader類裡的readAsDataURL方法將圖片轉換成base64編碼的字串。可以理解的是，當對待上傳的物件先進行串列化時，上述物件上傳訊息中包括串列化後的物件。相應的，第一網頁頁面在接收到物件上傳訊息之後，首先會判斷該訊息中的物件是否為串列化後的物件，若是，則對該串列化後的物件進行反串列化，從而得到原來的物件。由此，實現了更好的相容性。
而針對部分瀏覽器實現了postMessage可以傳遞Filelist的情況，則該兩個網頁頁面之間可以直接進行物件傳遞(如，直接可以傳遞圖片)，不需要做串列化。
步驟330，接收第一網頁頁面藉由調用API函數返回的物件的鏈接位址。
第一網頁頁面可以藉由調用上述postMessage API函數來向第二網頁頁面返回物件的URL位址。第二網頁頁面在接收到物件的URL位址之後，可以向使用者展示該URL位址。當接收到使用者對該URL位址的點擊指令時，可以向使用者展示對應的物件。
下面結合圖4，以使用者上傳圖片至××域圖片伺服器為例，對本說明書給出的方案作進一步詳細描述：
需要說明的是，在執行圖4所示的各步驟之前，可以先執行如下初始化操作：在外域頁面進行相應的配置，以使外域頁面可以監聽××域頁面發送的訊息，如，可以將postMessage API函數中的“origin”參數設為××域頁面的域名。此外，在××域頁面也進行相應的配置，以使××域頁面可以監聽全域的頁面發送的訊息，如，可以將postMessage API函數中的“origin”參數設為“*”。在執行完上述初始化操作之後，就可以執行如下步驟了。
步驟410，外域頁面接收使用者選擇的圖片。
步驟420，外域頁面使用FileReader類裡的readAsDataURL方法將圖片轉換成base64編碼的字串。
步驟430，外域頁面調用postMessage API函數向××域頁面發送字串。
步驟440，××域頁面將字串轉化為圖片。
步驟450，××域頁面藉由AJAX post()方法向××域圖片伺服器上傳圖片。
步驟460，××域圖片伺服器向××域頁面返回圖片的URL位址。
步驟470，××域頁面調用postMessage API函數向外域頁面發送圖片的URL位址。
與上述物件上傳方法對應地，本說明書一個實施例還提供的一種物件上傳裝置，如圖5所示，該裝置包括：
接收單元501，用於接收第二網頁頁面藉由調用能實現訊息跨域傳輸的應用程式設計介面API函數發送的物件上傳訊息，該第一網頁頁面屬於第一域，第二網頁頁面屬於任一域；物件上傳訊息包括待跨域上傳的物件。
此處的物件可以包括以下任意一種：文檔、圖片以及音視頻。
驗證單元502，用於對接收單元501接收的物件上傳訊息進行合法性驗證。
上傳單元503，用於在驗證單元502對物件上傳訊息合法性驗證通過後，向對應的伺服器上傳物件。
接收單元501，還用於接收伺服器返回的物件的鏈接位址。
發送單元504，用於調用API函數向第二網頁頁面發送物件的鏈接位址。
可選地，該裝置還可以包括：
判斷單元505，用於判斷物件是否已被串列化。
處理單元506，用於對物件進行反串列化。
上傳單元503具體可以用於：向對應的伺服器上傳反串列化後的物件。
本說明書上述實施例裝置的各功能模組的功能，可以藉由上述方法實施例的各步驟來實現，因此，本說明書一個實施例提供的裝置的具體工作過程，在此不復贅述。
本說明書一個實施例提供的物件上傳裝置，接收單元501接收第二網頁頁面藉由調用能實現訊息跨域傳輸的應用程式設計介面API函數發送的物件上傳訊息。驗證單元502對物件上傳訊息進行合法性驗證。在對物件上傳訊息合法性驗證通過後，上傳單元503向對應的伺服器上傳物件。接收單元501接收伺服器返回的物件的鏈接位址。發送單元504調用API函數向第二網頁頁面發送物件的鏈接位址。由此，可以安全、可靠地實現網站之間的跨域、異步通訊。
與上述物件上傳方法對應地，本說明書一個實施例還提供的一種物件上傳裝置，如圖6所示，該裝置包括：
接收單元601，用於接收物件跨域上傳請求，該物件跨域上傳請求包括待跨域上傳的物件；該第二網頁頁面屬於任一域。
發送單元602，用於調用能實現訊息跨域傳輸的應用程式介面API函數向第一網頁頁面發送物件上傳訊息，該物件上傳訊息用於指示第一網頁頁面在對所述物件上傳訊息合法性驗證通過後將物件上傳至對應的伺服器，並獲取物件的鏈接位址；該第一網頁頁面屬於第一域。
接收單元601，還用於接收第一網頁頁面藉由調用API函數返回的物件的鏈接位址。
本說明書上述實施例裝置的各功能模組的功能，可以藉由上述方法實施例的各步驟來實現，因此，本說明書一個實施例提供的裝置的具體工作過程，在此不復贅述。
本說明書一個實施例提供的物件上傳裝置，可以安全、可靠地實現網站之間的跨域、異步通訊。本領域技術人員應該可以意識到，在上述一個或多個示例中，本發明所描述的功能可以用硬體、軟體、韌體或它們的任意組合來實現。當使用軟體實現時，可以將這些功能儲存在電腦可讀媒體中或者作為電腦可讀媒體上的一個或多個指令或代碼進行傳輸。
以上所述的具體實施方式，對本發明的目的、技術方案和有益效果進行了進一步詳細說明，所應理解的是，以上所述僅為本發明的具體實施方式而已，並不用於限定本發明的保護範圍，凡在本發明的技術方案的基礎之上，所做的任何修改、等同替換、改進等，均應包括在本發明的保護範圍之內。
S210~S250‧‧‧步驟
S310~S330‧‧‧步驟
S410~S470‧‧‧步驟
501‧‧‧接收單元
502‧‧‧驗證單元
503‧‧‧上傳單元
504‧‧‧發送單元
601‧‧‧接收單元
602‧‧‧發送單元
為了更清楚地說明本發明實施例的技術方案，下面將對實施例描述中所需要使用的圖式作簡單地介紹，顯而易見地，下面描述中的圖式僅僅是本發明的一些實施例，對於本領域具有通常知識者來講，在不付出創造性勞動的前提下，還可以根據這些圖式獲得其它的圖式。
圖1為本說明書一個實施例提供的物件上傳方法的應用場景示意圖；
圖2為本說明書一個實施例提供的物件上傳方法流程圖；
圖3為本說明另一個實施例提供的物件上傳方法流程圖；
圖4為本說明書再一個實施例提供的物件上傳方法的資訊互動圖；
圖5為本說明書一個實施例提供的物件上傳裝置示意圖；
圖6為本說明書另一個實施例提供的物件上傳裝置示意圖。
