--- title: Cross-site XMLHttpRequest slug: orphaned/Cross-site_XMLHttpRequest original_slug: Cross-site_XMLHttpRequest ---

Firefox 3 支援了 W3C Access Control working draft,這讓你可以對其他網站作 XMLHttpRequests 以取得其他網站的資料,並加以管理,在自己建立的網站中,混入來自多個其他網站的內容。

Firefox 3 支援 Cross-site XMLHttpRequest

概觀

W3C 存取控制(The W3C Access Control)的架構讓客戶端文件對於誰可以、誰不可以向它們發出「以瀏覽器為基礎的 request」(例如 XMLHttpRequest)有更好的控制。

除此之外,這個 access control scheme 讓網路應用程式擁有允許「跨站要求(cross-site request)」的能力。理論上,這讓你在部署好存取控制點(Access Control Point)後,可以由 yoursite.com 的一個頁面透過 XMLHttpRequest 向 google.com 要求一份文件。這個層級的控制,讓管理網站內容的人員在決定是否「讓他們的使用者建立混合不同網站內容的網頁(mashup)或網站應用程式」時更有彈性。

用法

在 Firefox 3,要使用 W3C 存取控制(W3C Access Controls)有兩個方法。第一個是透過「加入新的存取控制檔頭」(在任何 Resouece Type 都能運用此方式,但你對網站伺服器必須有較高的控制權),另一個是透過「存取控制處理指示」(The Access-control Processing Instruction)(僅能用於 XML 文件)。

存取控制檔頭(Access-Control Headers)

這是在允許跨站的 XMLHttpRequests 時最有彈性的作法。如果你在你的 Request Response 中加入額外的存取控制檔頭,像下面這樣,你就可以給予 mozilla.org 上的任何網路應用程式擁有存取的權限。

Access-Control: allow <mozilla.org>

存取控制檔頭讓你有能力可以依據來源、要求方式(request method)來決定是否給予、或拒絕別人存取特定資源。

例如,下面這些都是有效的存取控制檔頭:

 // 任何人都可以存取這項資源 - 沒有限制
 Access-Control: allow <*>

 // 任何人都不可以存取這項資源 - 沒有例外
 Access-Control: deny <*>

 // 只有在 'mozilla.org' 上面的網站可以存取這項資源
 // (這也包含了 sub-domains)
 Access-Control: allow <mozilla.org>

 // 除了 developer.mozilla.org 以外,其他所有 mozilla.org 的 sub-domain 都可以存取這項資源
 Access-Control: allow <mozilla.org> exclude <developer.mozilla.org>

 // 只有這個 domain、在這個 port、運用此方式的 request 可以存取這項資源
 Access-Control: allow <developer.mozilla.org:80> method GET, POST

W3C Access Control working draft 有更多例子可看。

例子

XML Processing Instruction

XML 有「include 額外命令讓 XML processor 針對它特別處理」的能力。The Access Control draft 就是利用這種特性指定了一種額外的命令,讓 XML 文件變成可以在遠端被跨站存取。

例如: 使用下列存取控制處理指示 (access-control processing instruction)會給 mozilla.org 上的任何網站有存取 XML 文件的能力:

 <?access-control allow="mozilla.org"?>

這裡有一些使用存取控制處理指示(access-control processing instruction)來給予 XML 文件存取權限的簡單例子:

 // 任何人都可以存取這項資源 - 沒有限制
 <?access-control allow="*"?>

 // 任何人都不可以存取這項資源 - 沒有例外
 <?access-control deny="*"?>

 // 只有在 'mozilla.org' 上面的網站可以存取這項資源
 // (這也包含了 sub-domains)
 <?access-control deny="mozilla.org"?>

  // 除了 developer.mozilla.org 以外,其他所有 mozilla.org 的 sub-domain 都可以存取這項資源
 <?access-control allow="mozilla.org" exclude="developer.mozilla.org"?>

 // 只有這個 domain、在這個 port、運用此方式的 request 可以存取這項資源
 <?access-control allow="developer.mozilla.org" method="GET POST"?>

你可以在 W3C Access Control working draft 中找到更多例子。

例子

這個簡單的例子從一個網站向另一個網站要求 XML 檔。這個 XML 檔包含了「存取控制的處理指示」(Access-control processing instruction),這些指示給予任何向伺服器發出要求的網站存取的權限。如果你複製 ac.html 到你自己的伺服器,你就會看到 request 仍然可以作用(因為所有網站都被允許向它發出請求)。

ac.html

 <html>
 <head>
 <script>
 window.onload = function(){
   var xhr = new XMLHttpRequest();
   xhr.open("GET", "http://dev.jquery.com/~john/xdomain/test.xml", true);
   xhr.onreadystatechange = function(){
     if ( xhr.readyState == 4 ) {
       if ( xhr.status == 200 ) {
         document.body.innerHTML = "My Name is: " +
           xhr.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;
       } else {
         document.body.innerHTML = "ERROR";
       }
     }
   };
   xhr.send(null);
 };
 </script>
 </head>
 <body>
 Loading...
 </body>
 </html>

test.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <?access-control allow="ejohn.org"?>
 <simple><name>John Resig</name></simple>

延伸閱讀

{{ languages( { "en": "en/Cross-Site_XMLHttpRequest", "fr": "fr/Requ\u00eates_XMLHttpRequest_inter-sites", "ja": "ja/Cross-Site_XMLHttpRequest", "pl": "pl/\u017b\u0105dania_XMLHttpRequest_przesy\u0142ane_mi\u0119dzy_witrynami" } ) }}