CORSヘッダーを使用してサイト間のリソース共有を制限または許可する.
CORS（Cross-Origin Resource Sharing）ヘッダーは、すべての最新ブラウザーでサポートされています.
コアを使用できますか? caniuse.comの主要なブラウザでのcors機能のサポートに関するデータ.
デフォルトでは、ブラウザはクロスオリジンHTTPリクエストをスクリプトで制限します。そして, CORS 他のWebアプリケーションで共通のアプリケーションリソースを再利用するのに便利です。正しく追加されると、別のオリジンからアプリケーションをロードするようブラウザに指示します.
サーバーが送信できるCORSヘッダーには、6つの一般的なタイプがあります。それらを探検しましょう.
Contents
Access-Control-Allow-Origin
許可されたオリジンにリソースをロードするようブラウザに指示する最も人気のあるもの。ワイルドカード（*）をサポートしているため、どのドメインでもリソースをロードできます。ただし、特定のオリジンを許可するオプションがあります.
Apache
以下をhttpd.confまたはその他の使用中の構成ファイルに追加します.
ヘッダーセットAccess-Control-Allow-Origin "*"
Apacheを再起動してテストします。応答ヘッダーに表示されるはずです.
また、特定のオリジン（例：https://gf.dev）から許可するには、以下を使用できます.
ヘッダーセットAccess-Control-Allow-Origin "https://gf.dev"
Nginx
以下は、オリジンhttps://geekflare.devを許可する例です。 nginx.confのサーバーブロックまたは使用中の構成ファイルに以下を追加します.
add_header Access-Control-Allow-Origin "https://geekflare.dev";
アクセス制御許可メソッド
ブラウザは、リソースにアクセスするために1つ以上のHTTPメソッドを開始できます。例：– GET、PUT、OPTIONS、PUT、DELETE、POST
Apache
GETとPOSTのみを許可するには.
ヘッダー追加Access-Control-Allow-Methods "GET、POST"
Nginx
DELETEメソッドとOPTIONSメソッドを追加する必要があるとしましょう。その後、以下のように追加できます.
add_header Access-Control-Allow-Methods "削除、オプション";
再起動後、応答ヘッダーに表示されるはずです.
アクセス制御許可ヘッダー
次のヘッダーはセーフリストにあり、追加する必要はありません。デフォルトで動作するはずです.
- コンテンツタイプ
- 受け入れる
- コンテンツ言語
- 受け入れ言語
ただし、カスタムのものを追加する必要がある場合は、それを行うことができます。 1つ以上のヘッダーをサポートします.
Apache
X-Custom-HeaderおよびX-Powered-Byヘッダーを許可するとします。.
ヘッダーは常に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";
Access-Control-Expose-Headers
次のヘッダーはすでに安全なリストです。つまり、公開したい場合は追加する必要はありません.
- 期限切れ
- プラグマ
- キャッシュ制御
- 最終更新日
- コンテンツ言語
- コンテンツタイプ
ただし、セーフリスト以外が必要な場合は、次のように許可できます。.
Apache
ワイルドカードを使用してすべてのヘッダーを公開する.
ヘッダーは常にAccess-Control-Expose-Headersを設定 "*"
注：ワイルドカードは依然としてAuthorizationヘッダーを公開していません。必要な場合は、明示的に言及する必要があります.
ヘッダーは常にAccess-Control-Expose-Headersを設定 "承認、*"
結果は次のようになります.
Nginx
Originヘッダーを公開したい場合.
add_header Access-Control-Expose-Headers "原点";
アクセス制御-最大年齢
Access-Control-Allow-HeadersおよびAccess-Control-Allow-Methodsヘッダーからのデータをキャッシュできることを知っていますか？ Firefoxでは最大24時間、Chromeでは最大2時間（76以上）キャッシュできます。.
キャッシングを無効にするには、値を-1に保つことができます
Apache
15分間キャッシュするには.
ヘッダーは常にAccess-Control-Max-Ageに設定 "900"
ご覧のとおり、値は秒単位です.
Nginx
1時間キャッシュするには.
add_header Access-Control-Max-Age "3600";
追加したら、Nginxを再起動して結果を確認します.
Access-Control-Allow-Credentials
ここで設定できるオプションは1つだけです– true。これは、Cookie、TLS証明書、承認などの資格情報を公開する場合に許可します.
Apache
ヘッダーは常にAccess-Control-Allow-Credentialsを設定します "本当"
Nginx
add_header Access-Control-Allow-Credentials "本当";
そしてその結果.
結果を確認する
必要なヘッダーが追加されたら、ブラウザーに組み込まれている開発者ツールを使用するか、 オンラインHTTPヘッダーチェッカー.
結論
上記がApache HTTPとNginx WebサーバーにCORSヘッダーを実装してセキュリティを強化するのに役立つことを願っています。 OWASP推奨のセキュアヘッダーを適用することもできます。.
