↩ テクノロジーアパッチHTTP 非公開: Apache と Nginx で CORS を有効にする方法は?

Apache と Nginx で CORS を有効にする方法は?

CORS ヘッダーを使用して、サイト間のリソース共有を制限または許可します。

CORS (Cross-Origin Resource Sharing) ヘッダーは、最新のすべてのブラウザーでサポートされています。

コルは使用できますか? caniuse.com の主要ブラウザにおける cors 機能のサポートに関するデータ。

デフォルトでは、ブラウザはスクリプトを介したクロスオリジン HTTP リクエストを制限します。また、 CORS は、他の Web アプリケーションで共通のアプリケーションリソースを再利用するのに便利です。正しく追加されると、ブラウザーに別のオリジンからアプリケーションをロードするように指示されます。

サーバーが送信できる CORS ヘッダーには、一般的な 6 つのタイプがあります。それらを調べてみましょう。

コンテンツ 表示

アクセス制御許可オリジン

最も一般的なものは、許可されたオリジンにリソースをロードするようにブラウザーに指示するものです。ワイルドカード (*) をサポートしており、これにより、どのドメインでもリソースをロードできます。ただし、特定のオリジンを許可するオプションがあります。

アパッチ

httpd.conf またはその他の使用中の構成ファイルに以下を追加します。

 Header set Access-Control-Allow-Origin "*"

Apache を再起動してテストします。応答ヘッダーにそれらが表示されるはずです。

また、特定のオリジン (例: https://gf.dev) からのアクセスを許可するには、以下を使用できます。

 Header set Access-Control-Allow-Origin "https://gf.dev"

Nginx

以下はオリジン https://.dev を許可する例です。 nginx.conf または使用中の設定ファイルの server ブロックに以下を追加します。

 add_header Access-Control-Allow-Origin "https://.dev";

アクセス制御許可メソッド

ブラウザは 1 つ以上の HTTP メソッドを開始してリソースにアクセスできます。例: – GET、PUT、オプション、PUT、DELETE、POST

アパッチ

GET のみと POST のみを許可します。

 Header add Access-Control-Allow-Methods "GET, POST"

Nginx

DELETE メソッドと OPTIONS メソッドを追加する必要がある場合は、以下のように追加できます。

 add_header Access-Control-Allow-Methods "DELETE, OPTIONS";

再起動後、応答ヘッダーにそれらが表示されるはずです。

アクセス制御許可ヘッダー

次のヘッダーはセーフリストに含まれているため、ヘッダーを追加する必要はありません。デフォルトで動作するはずです。

コンテンツタイプ
受け入れる
コンテンツ言語
受け入れ言語

ただし、カスタムのものを追加する必要がある場合は、追加することができます。 1 つ以上のヘッダーをサポートします。

アパッチ

X-Custom-Header および X-Powered-By ヘッダーを許可するとします。

 Header always set Access-Control-Allow-Headers "X-Custom-Header, X-Powered-By"

再起動後、応答ヘッダーに結果が表示されるはずです。

Nginx

X-Customer-Software および X-My-Custom ヘッダーを追加する例。

 add_header Access-Control-Allow-Headers "X-Custom-Software, X-My-Custom";

アクセス制御公開ヘッダー

次のヘッダーはすでにセーフリストです。つまり、公開したい場合は追加する必要はありません。

有効期限が切れます
プラグマ
キャッシュ制御
最終更新日
コンテンツ言語
コンテンツタイプ

ただし、セーフリスト以外が必要な場合は、次のように許可できます。

アパッチ

すべてのヘッダーを公開するには、ワイルドカードを使用します。

 Header always set Access-Control-Expose-Headers "*"

注: ワイルドカードはまだ Authorization ヘッダーを公開しないため、必要な場合は明示的に言及する必要があります。

 Header always set Access-Control-Expose-Headers "Authorization, *"

結果は次のようになります。

Nginx

Origin ヘッダーを公開したい場合。

 add_header Access-Control-Expose-Headers "Origin";

アクセス制御の最大有効期間

Access-Control-Allow-Headers と Access-Control-Allow-Methods ヘッダーのデータをキャッシュできることをご存知ですか? Firefox では最大 24 時間、Chrome (76 以降) では 2 時間キャッシュできます。

キャッシュを無効にするには、値を -1 のままにします。

アパッチ

15 分間キャッシュします。

 Header always set Access-Control-Max-Age "900"

ご覧のとおり、値は秒単位です。

Nginx

1 時間キャッシュします。

 add_header Access-Control-Max-Age "3600";

追加したら、Nginx を再起動して結果を確認します。

アクセス制御許可認証情報

ここで設定するオプションは 1 つだけです – true です。 This Cookie、TLS 証明書、承認などの資格情報を公開する場合に許可するためです。

アパッチ

Header always set Access-Control-Allow-Credentials "true"

Nginx

 add_header Access-Control-Allow-Credentials "true";

そして結果。

結果の検証

必要なヘッダーを追加したら、ブラウザーに組み込まれた開発者ツールまたはオンライン HTTP ヘッダーチェッカーを使用できます。

結論

上記の内容が、セキュリティを向上させるために Apache HTTP と Nginx Web サーバーに CORS ヘッダーを実装するのに役立つことを願っています。 OWASP 推奨のセキュアヘッダーの適用にも興味があるかもしれません。