與 Ajax 混合

mashup 是一個 Web 應用程序，它集成了來自多個源的內容并將其交付到一個頁面中進行顯示。服務器向每個內容源發(fā)出請求，解析收到的信息，并將結果綜合到一個頁面中發(fā)給瀏覽器，如 圖 1 所示。

Asynchronous JavaScript + XML（Ajax）應用程序 使 Web 頁面能從服務器獲取內容并使用 JavaScript™ 代碼異步地在適當位置進行自我更新，如 圖 2 所示。這樣，用戶就可以與富用戶界面 (UI) 進行交互而無需重新加載整個頁面。服務器向瀏覽器發(fā)送初始頁面，后者回調服務器以獲取更新后的內容。異步的 JavaScript 代碼調用頻繁使用 XML 來編碼數據；但是，其他的數據格式則更通用，如 JavaScript Object Notation (JSON)、HTML 和分隔文本。

Ajax mashup 是一種混合的 Web 應用程序。它使用 Ajax 技術來顯示富 UI，此類富 UI 使用從多個源異步檢索到的內容在適當位置進行自我更新。服務器向瀏覽器發(fā)送初始頁面，后者發(fā)出調用以檢索更新后的內容。這些調用可從瀏覽器直接發(fā)往第三方源或者發(fā)回初始服務器，初始服務器用作第三方內容的代理。

回頁首

格格不入

當設計包含當前瀏覽器環(huán)境的元素時，沒有人注意到 Ajax mashup。瀏覽器、超文本傳輸協(xié)議（HTTP）或 HTML 或專門設計用于容納瀏覽器的（以一種安全而健壯的方式）異步檢索多個源中內容的功能的 XHTML 都沒有內置任何組件。World Wide Web Consortium (W3C) HTTP 規(guī)范中的一些可能用于 mashup 的一些特性（如 Document Object Model (DOM) Level 3 Load 和 Save Specification）并未由大多數瀏覽器完全實現，或是根本沒有實現。

Dynamic HTML (DHTML) 開始時不與動態(tài)檢索到的內容結合使用。動態(tài) Web 頁面的顯示和數據元素都與操作它們的腳本一起交付。這些腳本將顯示、隱藏、移動、創(chuàng)建和銷毀文檔對象以便實現動態(tài)效果，但是一旦需要從服務器獲取更多數據，原頁面就被新頁面取代。數據流與頁面重新加載同步。

因此，希望構建混合 Web 應用程序（現在稱為 mashup）的開發(fā)人員必須利用可用的技術設法對其進行擴展以滿足他們的需求。有兩種方法可使瀏覽器在無需重新加載頁面的情況下檢索內容：嵌入外部傳輸機制和使用瀏覽器本地對象執(zhí)行傳輸任務。

外部幫助

早期的解決方案是 Microsoft 的 Remote Scripting，它使用一個 Java™ applet 與服務器端組件交換 XML 格式的消息。此方法很快就因為供應商的爭論以及 Java Virtual Machine (JVM) 和安全模型的差異而變得不實用。

Microsoft 稍后構建了 XMLHttpRequest (XHR) 對象，其設計者的預想是只能通過 Microsoft® Outlook® Web Access (OWA) 來使用該對象。該對象最初只能由 Windows® Internet Explorer® 用戶使用，直到多年后 Mozilla 和 Safari 采用它時，才得到廣泛使用。它最初是一個外部的 Microsoft ActiveX® 對象，而當前的實現則是瀏覽器內的本地對象。雖然其名稱為 XHR，但是 XHR 對象卻可以傳輸任意格式的數據而非僅限于有效的 XML 格式數據。

很多開發(fā)人員使用 Macromedia Flash 的 XML 通信特性來構建可嵌入的組件與服務器進行通信。XMLSocket 和 flex.net.socket 對象提供了類似 XHR 的功能，但附帶了額外的通信控制和 XML 解析功能。

內部工作

由于外部傳輸機制相關的問題和依賴性，互聯(lián)網開發(fā)團體協(xié)作發(fā)現并開發(fā)了幾個瀏覽器本地的遠程調用方法。

• 使用一個隱藏的 iframe 元素來加載外部內容：然后通過 DOM 訪問 iframe，提取加載文檔中的內容。您可指定 URL querystring 中的任何參數或動態(tài)創(chuàng)建一個表單，此表單以 iframe 為目標提交到服務。此方法與很大范圍內的當前的和舊式瀏覽器兼容。
• 使用 img 元素發(fā)送內容請求：服務器使用 URL 的 querystring 中的參數執(zhí)行其任務，然后在 cookie 中返回編碼后的內容。此方法僅限于可輕松通信數量的數據使用，因為 querystring 和 cookie 都有大小限制。
• 在當前頁面的 DOM 中動態(tài)創(chuàng)建腳本元素：加載后，立即執(zhí)行服務器所提供的代碼。服務器使用 URL querystring 中的參數。

請參閱 參考資料 中關于這些工具和技術的詳細信息的鏈接。

回頁首

突破界限

大多數可用于異步檢索內容的技術都繼承了 JavaScript 安全模型的安全性，它使腳本只與源于該腳本所屬頁面所在的同一服務器的元素進行交互。這就是所有瀏覽器都實現了的同源策略（Same Origin Policy）。

要讓 Web 頁面從第三方檢索內容，必須避開同源策略。常用的不受同源策略限制的例外是 <script> 標記技術，由此向頁面的 DOM 追加 <script> 元素，致使其加載并運行元素的 src 屬性所指定的 URL 處發(fā)現的代碼。

使用 <script> 標記運行來自多個站點的腳本以所有相關站點間的高水平信任為前提，因為所有此類腳本都在相同的執(zhí)行和安全上下文中運行，因此可能獲得其他站點的信息和 cookie 的訪問權。

回頁首

安全或可伸縮性：不可兼得

當前廣泛用于啟用 Ajax mashup 的工作區(qū)都會產生一些代價。當擴展瀏覽器的設計限制時，就會影響應用程序總體操作的其他方面。這種做法通常會導致應用程序的安全性或可伸縮性降低。

安全，但是否可伸縮？

當受到瀏覽器的同源策略限制時，承載應用程序的服務器必須承擔獲取第三方內容并將其發(fā)送到客戶機的任務。服務器除提供常規(guī)的服務器功能外，還擔當第三方服務的客戶機的角色。

使用服務器作為每個客戶機事務的代理意味著大量用戶可能導致過度的服務器負載。使用此技術的應用程序需要設計成服務器端可伸縮，使用多個同等的服務器處理請求負載。

可伸縮，但是否安全？

使用 <script> 標記避開同源策略使客戶機能檢索來自第三方的內容。 此功能消除了服務器的可伸縮性瓶頸，因為每個額外的客戶機都承擔了自身的內容收集任務。

<script> 標記的可伸縮性優(yōu)點的獲得以避開同源策略安全性模型為代價，可能導致易于收到攻擊：

• 跨站點 cookie 訪問成為可能：一個站點的腳本可訪問另一個站點的 cookie。
• 在運行檢索到的代碼之前不能檢查其安全問題：代碼加載后立即運行。

回頁首

可能的解決方案

很明顯，瀏覽器當前提供的用于 mashup 的工具不能構建同時具有可伸縮性和安全性的應用程序。開發(fā)人員必須找到從當前和長遠角度來看都有效的解決方案。

此時此地

一種最近開發(fā)的內容檢索技術通過其 src URL 的片段標識符（URL 中 # 符號后的部分）使用了頁面腳本和隱藏的 iframe 之間的通信。父頁面中的腳本和嵌入的 iframe 可設置彼此的片段標識符，盡管它們來自不同的起源。腳本之間保持一種一致的通信協(xié)議，由 JavaScript 計時器驅動，該計時器定期地激活例程以檢查片段標識符中的更改。

由于腳本必須了解彼此的地址并且它們自身之間必須協(xié)作以取得對協(xié)議的一致遵守，因此要確保信任。由于任何服務器交互都在每個組件本地并且與腳本間通信分離，因此不會暴露 cookie。

雖然仍不完美（例如，它依賴于設計行為以外的異常，并且查詢更改不如用事件激活來響應更改），但是這個解決方案比任何其他方案都更接近于提供瀏覽器本地的、安全的、頁面中的跨域通信。

請注意：James Burke 是 AOL Developer Network 的一名開發(fā)人員，他開創(chuàng)了片段標識符技術并將其構建到最新版本的 Dojo Toolkit JavaScript 庫中。

長期

瀏覽器制造商和開發(fā)團體當前正在討論幾種可能的修改瀏覽器環(huán)境元素的方法，使其以 Ajax mashup 為構建目標。Web Hypertext Application Technology Working Group (WHATWG) 在其用于 Cross Document Messaging 機制的 Web Applications 1.0 Working Draft 的 7.3 節(jié)中提出了一個建議。Opera 瀏覽器已經實現了此特性。它指定了不同域中的 DOM 對象之間協(xié)作通信的方法，該方法允許消息的接收方根據消息的起源來選擇所要響應的消息。

Ian Hickson 以前任職于 Opera，現在任職于 Google。他提出了對現有的 XMLHttpRequest 對象的跨站點擴展。他的提議包括對發(fā)出請求的方式（包括報頭控制的限制和訪問控制機制）的幾個修改。

Douglas Crockford 是任職于 Yahoo! 的一名 JavaScript 傳道者和架構師，他是全球最有造詣的 JavaScript 語言專家之一。您可在他的個人 Web 站點上及通過 Yahoo! Developer Network 找到很多他的解釋高級 JavaScript 技術的展示和文章。Crockford 提出的另一項計劃是 JSON，它是一種 Ajax 應用程序中廣泛使用的數據交換格式，其主要原因是易于被 JavaScript 解析并且不像 XML 那樣冗余。Crockford 編寫了兩個提議來將 mashup 敏感的元素構建到瀏覽器中。

絕妙提議

幾個絕妙提議可幫助您應對此困境：

• JSONRequest 提議：瀏覽器實現一個新對象，其運作方式類似于現有的 XMLHttp 對象，作出了以下幾點修改：
  • JSONRequest 將免除同源策略。
  • 將使用 HTTP 報頭的最小設置，減小請求的總體大小。
  • 不傳輸 cookie，確保避免跨站點 cookie 問題。
  • JSONRequest 將只接受有效的 JSON 文本，確保不將原始的可執(zhí)行代碼發(fā)送執(zhí)行。
  • 通信失敗后，在重試阻止某些攻擊類之前引入隨機延遲。
  • 每個請求都將返回一個序列標識符，使異步響應能 更容易地與其原始請求相關聯(lián)。
  • 對雙向連接的特定支持將使服務器能通過開放的通信通道異步地啟動通信。
• <module> 標記提議：新的 HTML 標記將頁面分隔成彼此不受影響但可安全地通信的模塊集合：
  • The <module> 標記將能夠訪問第三方資源，免除同源策略。
  • 頁面和模塊間的合作通信只能通過特定的接口來進行。模塊間不能相互通信 —— 只能與頁面通信。頁面可使模塊間的通信更加方便。
  • 通信僅限于有效的 JSON 文本， 相比之下，與 JavaScript 對象通信可能因為附帶的代碼導致 安全泄漏。
  • 提出了一些限制用于確保模塊和頁面不會干擾彼此的顯示，避免導致安全問題。
• 內容限制題頭： Gervase Markham 提出了內容限制題頭規(guī)范， 該規(guī)范使作者能表達全部意圖 —— 確定內容與其他站點內容的交互方式。一致的實現將提交包含策略字符串的內容限制題頭。
• W3C Access Control List (ACL) System：W3C ACL System 可用作 基于 ACL 的系統(tǒng)的模型，用來管理對 Ajax mashup 中服務 HTTP 的資源的訪問。
• Cross-browser.xml：Flash 對象在服務器上查找 cross-browser.xml 文件，然后才嘗試訪問其特定的 URL。 此文件指定了哪個站點可承載訪問該服務器上所提供服務的應用程序。很多 Web 服務提供方已經實現了此文件。

請參閱 參考資料 中關于這些提議的詳細信息的鏈接。

回頁首

結束語

分享這篇文章…… 將本文提交到 Digg 發(fā)布到 del. 提交到 Slashdot！

作為開發(fā)人員，我們都與這些討論的結果息息相關。通過參加討論，您可幫助設計最靈活、安全的瀏覽器改進，使所有人都能構建健壯而安全的富 Web 應用程序。我鼓勵您去尋找倡導瀏覽器改進的瀏覽器供應商和組織，并參與以下活動：

• 參與行業(yè)協(xié)會和工作組。
• 在新聞組和論壇中與瀏覽器和工具供應商交流。
• 尋求并吸引行業(yè)內的主事者。

您可在本文的 參考資料 部分找到可作為起點的鏈接。

參考資料

• 您可以參閱本文在 developerWorks 全球網站上的 英文原文。
  
  
• developerWorks XML 專區(qū)：在 developerWorks XML 專區(qū)了解所有關于 XML 的信息。
  
  
• XMLHTTP 的故事：查看 Alex Hopmann 關于 XMLHTTP 起步時期的歷史介紹。
  
  
• DOM Level 3 Load and Save Specification：閱讀 W3C 規(guī)范，了解程序和腳本如何將 XML 文檔的內容動態(tài)地加載到 DOM 文檔中，以及如何將 DOM 文檔動態(tài)地序列化到 XML 文檔中。
  
  
• 同源策略：在 Mozilla Web 站點上查找關于此策略的信息，防止加載自一個源的文檔或腳本獲取或設置另一個源的文檔的屬性。
  
  
• Cross-site scripting（Paul Lee，developerWorks，2002 年 9 月）：了解關于這些腳本編程問題的更多信息。
  
  
• Remote scripting using a servlet（Erik Hatcher，developerWorks，2001 年 2 月）和 Sending rich messages between client and server using asynchronous messaging（Erik Hatcher，developerWorks，2001 年 5 月）：查看這兩篇文章，獲取關于這些技術的更多信息。
  
  
• Ajax Transport Layer Alternatives：獲取 Brent Ashley 的演示文稿，現在可在他的 Web 站點上獲得。
  
  
• Iframe/片段標識符發(fā)現：了解關于片段標識符的更多信息，查看 James Burke 的原始博客。
  
  
• Dojo Toolkit 的實現：了解 Dojo Toolkit 如何實現片段標識符的傳輸方法。
  
  
• 跨文檔消息傳遞：閱讀關于 WHATWG 提議的更多信息。
  
  
• 跨站點 XMLHttpRequest ：閱讀 Ian Hickson 的更新后的提議。
  
  
• JSONRequest 和 <module> 標記：閱讀 Douglas Crockford 的關于 mashup 安全問題的解決方案的提議。
  
  
• 內容限制題頭：閱讀 Gervase Markham 的用于瀏覽器區(qū)分合法腳本和惡意腳本的提議。
  
  
• ACL System：閱讀關于 W3C 的動態(tài)的文件級訪問控制 (ACL) 系統(tǒng)，包括 ACL 存儲和查詢機制的更多信息，以及可用性和此數據在語義 Web 上的用法。
  
  
• Flash XMLSocket 對象 和 cross-domain.xml 文件：了解 XMLSocket 對象和跨域策略文件如何實現運行 Flash Player 的計算機與其他由 IP 地址或域名標識的服務器之間的通信。
  
  
• IBM XML 認證：了解如何才能成為一名 IBM 認證的 XML 及相關技術的開發(fā)人員。
  
  
• XML 技術庫：訪問 developerWorks XML 專區(qū)，獲取更廣泛的技術文章和提示、教程、標準和 IBM 紅皮書。
  
  
• developerWorks 技術事件和網絡廣播：隨時關注這些會議中討論的技術。