From a6eced5e77ce70fce36254fe4602a19ee2ec9a8d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 14 Oct 2024 13:53:33 +0900 Subject: [PATCH] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../corsalloworiginnotmatchingorigin/index.md | 10 +++---- .../cors/errors/corsmethodnotfound/index.md | 15 ++++++---- .../errors/corsmissingalloworigin/index.md | 30 ++++++++++++------- .../cors/errors/corsrequestnothttp/index.md | 29 ++++++++++++------ 4 files changed, 53 insertions(+), 31 deletions(-) diff --git a/files/ja/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md b/files/ja/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md index c56a0510109fc0..7ebd07b60820af 100644 --- a/files/ja/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md +++ b/files/ja/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md @@ -2,7 +2,7 @@ title: "Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz'" slug: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin l10n: - sourceCommit: 45c7ae13178203b4ee58842efbe2a27deab274a6 + sourceCommit: ef46a4ac6bfec3e33c9209244e7cb1a9206165d6 --- {{HTTPSidebar}} @@ -13,7 +13,7 @@ l10n: Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz' ``` -## 何が悪いのか +## エラーの原因 リクエストを作成しているオリジンが、 {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーによって許可されたオリジンのいずれにも一致しないことを表します。このエラーは、レスポンスに複数の `Access-Control-Allow-Origin` ヘッダーが含まれていると発生することがあります。 @@ -24,13 +24,13 @@ Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz' > [!WARNING] > オリジンの一部として HTTPS または HTTP プロトコルを記載する必要があります。 -``` +```apacheconf Header set Access-Control-Allow-Origin 'origin' ``` Nginx では、このヘッダーを設定するコマンドは次の通りです。 -``` +```nginx add_header 'Access-Control-Allow-Origin' 'origin' ``` @@ -39,4 +39,4 @@ add_header 'Access-Control-Allow-Origin' 'origin' - [CORS のエラー](/ja/docs/Web/HTTP/CORS/Errors) - 用語集: {{Glossary("CORS")}} - [CORS 入門](/ja/docs/Web/HTTP/CORS) -- [Enable CORS: I want to add CORS support to my server](https://enable-cors.org/server.html) +- [CORS の有効化: CORS 対応をサーバーに追加したい](https://enable-cors.org/server.html)（英語） diff --git a/files/ja/web/http/cors/errors/corsmethodnotfound/index.md b/files/ja/web/http/cors/errors/corsmethodnotfound/index.md index b0106f02c9709b..7d150e3dbfa3c1 100644 --- a/files/ja/web/http/cors/errors/corsmethodnotfound/index.md +++ b/files/ja/web/http/cors/errors/corsmethodnotfound/index.md @@ -1,23 +1,25 @@ --- -title: "Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’" +title: "Reason: Did not find method in CORS header 'Access-Control-Allow-Methods'" slug: Web/HTTP/CORS/Errors/CORSMethodNotFound +l10n: + sourceCommit: ef46a4ac6bfec3e33c9209244e7cb1a9206165d6 --- {{HTTPSidebar}} ## 理由 -``` -Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’ +```plain +Reason: Did not find method in CORS header 'Access-Control-Allow-Methods' ``` -## 何が悪いのか +## エラーの原因 {{Glossary("CORS")}} リクエストで使われている HTTP メソッドが、レスポンスの {{HTTPHeader("Access-Control-Allow-Methods")}} ヘッダーで指定されたメソッドの一覧に含まれていません。このヘッダーは、 CORS を使用してリクエストで指定された URL にアクセスする時に使われる HTTP メソッドのコンマ区切りのリストを指定します。リクエストが他のメソッドを使用していると、このエラーが発生します。 例えば、レスポンスに以下の行が含まれていると、 -``` +```http Access-Control-Allow-Methods: GET,HEAD,POST ``` @@ -25,7 +27,8 @@ Access-Control-Allow-Methods: GET,HEAD,POST コードからサービスにアクセスするときは、許可された HTTP メソッドのみを使用するように確認してください。 -**メモ:** サーバーが `Access-Control-Allow-methods` ヘッダーに理解できない又は未定義のメソッド名を含めた場合、別なエラー [`Reason: invalid token ‘xyz' in CORS header ‘Access-Control-Allow-Methods’`](/ja/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod) が発生します。 +> [!NOTE] +> サーバーが `Access-Control-Allow-methods` ヘッダーに理解できないまたは未定義のメソッド名を含めた場合、別なエラー [Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Methods'](/ja/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod) が発生します。 ## 関連情報 diff --git a/files/ja/web/http/cors/errors/corsmissingalloworigin/index.md b/files/ja/web/http/cors/errors/corsmissingalloworigin/index.md index 3bef3e482c4646..d139a5cd055cfa 100644 --- a/files/ja/web/http/cors/errors/corsmissingalloworigin/index.md +++ b/files/ja/web/http/cors/errors/corsmissingalloworigin/index.md @@ -1,29 +1,31 @@ --- title: "Reason: CORS header 'Access-Control-Allow-Origin' missing" slug: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin +l10n: + sourceCommit: ef46a4ac6bfec3e33c9209244e7cb1a9206165d6 --- {{HTTPSidebar}} ## 理由 -``` +```plain Reason: CORS header 'Access-Control-Allow-Origin' missing ``` -## 何が悪いのか +## エラーの原因 {{Glossary("CORS")}} リクエストへのレスポンスが、リソースが現在のオリジン内で操作しているコンテンツによってアクセスできるかどうかを判断するために使われる、必須の {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーを欠いています。 -サーバーを自分で制御できる場合は、要求しているサイトのオリジンを `Access-Control-Allow-Origin` ヘッダーの値に追加して、アクセスが許可されているドメインの一覧に追加してください。 +サーバーを自分で制御できる場合は、リクエストしているサイトのオリジンを `Access-Control-Allow-Origin` ヘッダーの値に追加して、アクセスが許可されているドメインの一覧に追加してください。 -例えば、 `https://example.com` のサイトが CORS を使用したリソースにアクセスできるよう許可するためには、ヘッダーを以下のようにしてください。 +例えば、`https://example.com` のサイトが CORS を使用したリソースにアクセスできるよう許可するためには、ヘッダーを以下のようにしてください。 ```http Access-Control-Allow-Origin: https://example.com ``` -`*` を使用することで、あらゆるサイトにアクセスを許可するようサイトを構成することもできます。これは公開 API にのみ使用してください。非公開の API には `*` を使用するべきではなく、代わりに具体的なドメインやドメインの一覧を設定してください。加えて、ワイルドカードは [`crossorigin`](/ja/docs/Web/HTML/Attributes/crossorigin) 属性が `anonymous` に設定された要求にのみ動作し、リクエストでは Cookie のような資格情報の送信を抑制します。 +`*` ワイルドカードを使用することで、あらゆるサイトにアクセスを許可するようサイトを構成することもできます。これは公開 API にのみ使用してください。非公開の API には `*` を使用するべきではなく、代わりに具体的なドメインやドメインの一覧を設定してください。加えて、ワイルドカードは [`crossorigin`](/ja/docs/Web/HTML/Attributes/crossorigin) 属性が `anonymous` に設定されたリクエストにのみ動作し、リクエストでは Cookie のような資格情報の送信を抑制します。 ```http Access-Control-Allow-Origin: * @@ -34,16 +36,22 @@ Access-Control-Allow-Origin: * 何らかのサイトが CORS リクエストを `*` ワイルドカードを使用すること*なく* (たとえば資格情報を有効にする場合) 利用できるようにするには、サーバーにリクエストの `Origin` ヘッダーの値を読み取り、その値を `Access-Control-Allow-Origin` に設定することに加えて、一部のヘッダーがオリジンに応じて動的に設定されることを示すために `Vary: Origin` ヘッダーを設定する必要があります。 -例えば Apache では、サーバー構成 (の中の ``, ``, ``, `` のうち適切な節) に次のような行を追加してください。構成はふつう、 `.conf` ファイル又は (一般的な名前は `httpd.conf` や `apache.conf`) 又は `.htaccess` ファイルにあります。 +## 一般的なウェブサーバーでの例 -``` -Header set Access-Control-Allow-Origin 'origin-list' -``` +ウェブサーバーによって、ヘッダーを設定するための正確なディレクティブは異なります。 -Nginx では、このヘッダーを設定するコマンドは次の通りです。 +下記の例では、 +**Apache**（[ドキュメントはこちら](https://httpd.apache.org/docs/2.4/mod/mod_headers.html#header)）では、サーバー構成（適切な ``, ``, ``, `` 節内）に以下の行を追加します。構成は通常、`.conf` ファイル（一般的な名前は `httpd.conf` や `apache.conf` です）または `.htaccess` ファイルにあります。 + +```apacheconf +Header set Access-Control-Allow-Origin 'https://example.com' ``` -add_header 'Access-Control-Allow-Origin' 'origin-list' + +**Nginx**（[ドキュメントはこちら](https://nginx.org/en/docs/http/ngx_http_headers_module.html#add_header)）では、このヘッダーをセットアップするコマンドは次の通りです。 + +```nginx +add_header 'Access-Control-Allow-Origin' 'https://example.com' always; ``` ## 関連情報 diff --git a/files/ja/web/http/cors/errors/corsrequestnothttp/index.md b/files/ja/web/http/cors/errors/corsrequestnothttp/index.md index 874af75ebe8e3d..d71f9afd21c584 100644 --- a/files/ja/web/http/cors/errors/corsrequestnothttp/index.md +++ b/files/ja/web/http/cors/errors/corsrequestnothttp/index.md @@ -1,31 +1,42 @@ --- title: "Reason: CORS request not HTTP" slug: Web/HTTP/CORS/Errors/CORSRequestNotHttp +l10n: + sourceCommit: ef46a4ac6bfec3e33c9209244e7cb1a9206165d6 --- {{HTTPSidebar}} ## 理由 -``` +```plain Reason: CORS request not HTTP ``` -## 何が悪いのか +## エラーの原因 + +{{Glossary("CORS")}} リクエストは URL スキームが HTTPS の場合のみ利用できますが、リクエストで指定された URL が異なる種類のものです。 +これは、ローカルファイルを指定する URL が、 `file:///` スキームを使用している場合によく起こります。 + +この問題を修正するには、CORS が関わるリクエスト、例えば {{domxref("Window/fetch", "fetch()")}}、{{domxref("XMLHttpRequest")}}、ウェブフォント (`@font-face`)、[WebGL textures](/ja/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL)、XSL スタイルシートなどを発行させるには、必ず HTTPS の URL を使用してください。 -{{Glossary("CORS")}} リクエストは URL スキームが HTTPS の場合のみ利用できますが、リクエストで指定された URL が異なる種類のものです。これは、ローカルファイルを指定する URL が、 `file:///` の URL を使用している場合によく起こります。 +### ローカルファイルの読み込み -この問題を修正するには、単純に CORS に関するリクエストを発行する際に HTTPS の URL を使用するようにしてください。 +同じディレクトリーおよびサブディレクトリーにあるローカルファイルは、以前は[同一オリジン](/ja/docs/Web/Security/Same-origin_policy)から取得されたものとして扱われていました。 +つまり、テスト中にファイルとそのリソースすべてを、CORS エラーが発生することなく、ローカルディレクトリ－またはサブディレクトリ－から読み込むことができたということです。 -### Firefox 68 におけるローカルファイルセキュリティ +残念ながら、この問題にはセキュリティ上の問題があり、勧告（[CVE-2019-11730](https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730)）で指摘されています。 +Firefox や Chrome を含む多くのブラウザーは現在、（既定では）すべてのローカルファイルを不透明なオリジンとして扱います。 +その結果、ローカルリソースが含まれたローカルファイルを読み込むと、CORS エラーが発生します。 -Firefox 67 以前ではユーザが `file:///` URI を用いてページを開いたとき、ページのオリジンはその開かれたページのあるディレクトリとして定義されていました。同じディレクトリやそのサブディレクトリにあるリソースは、CORS 同一オリジンルールを適用する際には同一オリジンとみなされていました。 +テストをローカルで実行する必要がある開発者は、[ローカルサーバーを構築する](/ja/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server)必要がでてきました。 +すべてのファイルが同じスキームとドメイン (`localhost`) から提供されるため、すべて同じオリジンを持ち、オリジン間エラーは発生しません。 -Firefox 68 以降では [CVE-2019-11730](https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730) の対策として、 `file:///` URI を用いて開かれたページのオリジンは、それだけのものとして定義されます。つまり、同じディレクトリやそのサブディレクトリにあるリソースは、CORS 同一オリジンルールを満たさなくなりました。この新たな振る舞いは、`privacy.file_unique_origin` 設定を用いてデフォルトで有効になっています。 +> [!NOTE] +> この変更は、[URL 仕様](https://url.spec.whatwg.org/#origin)と一致しており、ファイルのオリジンの動作は実装に委ねられますが、疑わしい場合はファイルのオリジンは不透明として扱うことが推奨されています。 ## 関連情報 - [CORS のエラー](/ja/docs/Web/HTTP/CORS/Errors) -- 用語集: {{Glossary("CORS")}} - [CORS 入門](/ja/docs/Web/HTTP/CORS) -- [URL とは](/ja/docs/Learn/Common_questions/What_is_a_URL) +- [URL とは](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)