aboutsummaryrefslogtreecommitdiff
path: root/files/zh-tw/cross-site_xmlhttprequest/index.html
blob: 9ffdd6ca6e8f22c12acaaf56f99e80468d66e3fe (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
---
title: Cross-site XMLHttpRequest
slug: Cross-site_XMLHttpRequest
---
<p>Firefox 3 支援了 <a class="external" href="http://www.w3.org/TR/access-control/">W3C Access Control</a> working draft,這讓你可以對其他網站作 XMLHttpRequests 以取得其他網站的資料,並加以管理,在自己建立的網站中,混入來自多個其他網站的內容。 </p>
<h3 id="Firefox_3_.E6.94.AF.E6.8F.B4_Cross-site_XMLHttpRequest"> Firefox 3 支援 Cross-site XMLHttpRequest </h3>
<h4 id=".E6.A6.82.E8.A7.80"> 概觀 </h4>
<p>W3C 存取控制(<a class="external" href="http://www.w3.org/TR/access-control/">The W3C Access Control</a>)的架構讓客戶端文件對於誰可以、誰不可以向它們發出「以瀏覽器為基礎的 request」(例如 XMLHttpRequest)有更好的控制。
</p><p>除此之外,這個 access control scheme 讓網路應用程式擁有允許「跨站要求(cross-site request)」的能力。理論上,這讓你在部署好存取控制點(Access Control Point)後,可以由 yoursite.com 的一個頁面透過 XMLHttpRequest 向 google.com 要求一份文件。這個層級的控制,讓管理網站內容的人員在決定是否「讓他們的使用者建立混合不同網站內容的網頁(mashup)或網站應用程式」時更有彈性。
</p>
<h3 id=".E7.94.A8.E6.B3.95"> 用法 </h3>
<p>在 Firefox 3,要使用 W3C 存取控制(W3C Access Controls)有兩個方法。第一個是透過「加入新的存取控制檔頭」(在任何 Resouece Type 都能運用此方式,但你對網站伺服器必須有較高的控制權),另一個是透過「存取控制處理指示」(The Access-control Processing Instruction)(僅能用於 XML 文件)。
</p>
<h4 id=".E5.AD.98.E5.8F.96.E6.8E.A7.E5.88.B6.E6.AA.94.E9.A0.AD.EF.BC.88Access-Control_Headers.EF.BC.89"> 存取控制檔頭(Access-Control Headers) </h4>
<p>這是在允許跨站的 XMLHttpRequests 時最有彈性的作法。如果你在你的 Request Response 中加入額外的存取控制檔頭,像下面這樣,你就可以給予 mozilla.org 上的任何網路應用程式擁有存取的權限。
</p>
<pre>Access-Control: allow &lt;mozilla.org&gt;</pre>
<p>存取控制檔頭讓你有能力可以依據來源、要求方式(request method)來決定是否給予、或拒絕別人存取特定資源。
</p><p>例如,下面這些都是有效的存取控制檔頭:
</p>
<pre> // 任何人都可以存取這項資源 - 沒有限制
 Access-Control: allow &lt;*&gt;

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

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

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

 // 只有這個 domain、在這個 port、運用此方式的 request 可以存取這項資源
 Access-Control: allow &lt;developer.mozilla.org:80&gt; method GET, POST
</pre>
<p><a class="external" href="http://www.w3.org/TR/access-control/#access-control0">W3C Access Control working draft</a> 有更多例子可看。
</p>
<h5 id=".E4.BE.8B.E5.AD.90"> 例子 </h5>
<h4 id="XML_Processing_Instruction"> XML Processing Instruction </h4>
<p>XML 有「include 額外命令讓 XML processor 針對它特別處理」的能力。The Access Control draft 就是利用這種特性指定了一種額外的命令,讓 XML 文件變成可以在遠端被跨站存取。
</p><p>例如: 使用下列存取控制處理指示 (access-control processing instruction)會給 mozilla.org 上的任何網站有存取 XML 文件的能力:
</p>
<pre> &lt;?access-control allow="mozilla.org"?&gt;
</pre>
<p>這裡有一些使用存取控制處理指示(access-control processing instruction)來給予 XML 文件存取權限的簡單例子:
</p>
<pre> // 任何人都可以存取這項資源 - 沒有限制
 &lt;?access-control allow="*"?&gt;

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

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

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

 // 只有這個 domain、在這個 port、運用此方式的 request 可以存取這項資源
 &lt;?access-control allow="developer.mozilla.org" method="GET POST"?&gt;
</pre>
<p>你可以在 W3C Access Control working draft 中找到更多例子。
</p>
<h5 id=".E4.BE.8B.E5.AD.90_2"> 例子 </h5>
<p>這個簡單的例子從一個網站向另一個網站要求 XML 檔。這個 XML 檔包含了「存取控制的處理指示」(Access-control processing instruction),這些指示給予任何向伺服器發出要求的網站存取的權限。如果你複製 ac.html 到你自己的伺服器,你就會看到 request 仍然可以作用(因為所有網站都被允許向它發出請求)。
</p><p><a class="external" href="http://ejohn.org/apps/xdomain/ac.html">ac.html</a>
</p>
<pre> &lt;html&gt;
 &lt;head&gt;
 &lt;script&gt;
 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);
 };
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 Loading...
 &lt;/body&gt;
 &lt;/html&gt;
</pre>
<p><a class="external" href="http://dev.jquery.com/~john/xdomain/test.xml">test.xml</a>
</p>
<pre> &lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;?access-control allow="ejohn.org"?&gt;
 &lt;simple&gt;&lt;name&gt;John Resig&lt;/name&gt;&lt;/simple&gt;
</pre>
<h3 id=".E5.BB.B6.E4.BC.B8.E9.96.B1.E8.AE.80"> 延伸閱讀 </h3>
<ul><li><a class="external" href="http://developer.mozilla.org/en/docs/XMLHttpRequest">XMLHttpRequest</a>
</li><li><a class="external" href="http://www.w3.org/TR/access-control/">W3C Access Control working draft</a>
</li><li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=389508">The bug tracking the implementation of Cross-Site XMLHttpRequest</a>
</li></ul>
<div class="noinclude">
</div>
{{ 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" } ) }}