LiteSpeed クロスオリジンリソース共有 (CORS) のカスタムヘッダーを設定する方法

LiteSpeedは空のヘッダーを設定し、アクセスを拡張します

場合によっては、ユーザーは設定する必要があるかもしれませんカスタムヘッダーCache-Control ヘッダーや Expire ヘッダーなど。

例として、このガイドでは、JavaScript ファイルと CSS ファイルにカスタム ヘッダーを設定します。

ステップ1

WebAdminコンソールにログインする https://IP:7080、入力仮想ホスト > コンテキストをクリックして、新しいコンテキストを作成します。

ステップ2

新しく作られた文脈では、タイプ設定静的。

対象ファイルはJSとCSSなので、URIの一致には正規表現が使用されます。このタイプのファイルはすべて次のとおりです。

exp:^.*(css|js)$

必要に応じて、次のように静的ファイル拡張子を追加することもできます。

exp:^.*(woff|woff2|jpg|jpeg|png|css|js)$

意思位置設定 $DOC_ROOT/$0。私たちはする必要があります、$0なぜならURI正規表現を使用します。

意思アクセス可能な設定のためにはい.

意思有効期限設定を有効にするのためにはい。

種類によって有効期限が異なります次のように設定します（15552000秒は180日に相当します):

アプリケーション/javascript=A15552000、テキスト/css=A15552000

ヘッダー操作次のように設定します。

キャッシュ制御を解除し、キャッシュ制御を公開に設定し、max-age=15552000 とする

キャッシュ制御の設定を解除するこの行は、次の行で新しいキャッシュ制御ヘッダーを設定する前に、以前のキャッシュ制御ヘッダーを削除します。

保存して再起動します。

確認する

新しい応答ヘッダーはブラウザの開発ツールから探すことができます。

カスタムヘッダーの追加

さらにヘッダーを追加する必要がある場合、構文と使用法はApacheのmod_headersと同じです。命令によってサポートされる操作は同様です。

ヘッダーを追加する例は次のとおりですX-Powered-By：

検証結果:

WordPressサイトに役立つヘッダー

これは典型的なWordPressサイトのコンテキスト例です。静的リソースにExpire、Cache-Control、CORSヘッダーを追加します。

exp:^.*(css|gif|ico|jpeg|jpg|js|png|webp|woff|woff2|fon|fot|ttf)$

意思アクセス可能な設定のためにはい.

意思有効期限設定を有効にするのためにはい。

種類によって有効期限が異なります次のように設定します（15552000秒は180日に相当します):

text/css=A15552000, image/gif=A15552000, image/x-icon=A15552000, image/jpeg=A15552000, application/x-javascript=A15552000, text/javascript=A15552000, application/javascript=A15552000, image/png=A15552000, image/webp=A15552000, font/ttf=A15552000, font/woff=A15552000, font/woff2=A15552000, application/x-font-ttf=A15552000, application/x-font-woff=A15552000, application/font-woff=A15552000,アプリケーション/フォント-woff2=A15552000

Cache-control を解除 Cache-control を public、max-age=15552000 に設定 Access-Control-Allow-Origin: * を設定

[root@test ~]# curl -I -XGET https://example.com/wp-includes/css/dist/block-library/theme.min.css?ver=5.2.4 HTTP/1.1 200 OK 有効期限: Fri, 01 May 2020 21:18:01 GMT Etag: "5d7-5dbf3aff-181c04;;;" 最終更新日: Sun, 03 Nov 2019 20:39:27 GMT コンテンツタイプ: text/css コンテンツ長: 1495 Accept-Ranges: bytes 日付: Sun, 03 Nov 2019 21:18:01 GMT サーバー: LiteSpeed キャッシュコントロール: public, max-age=15552000 アクセスコントロール許可元: * 接続: Keep-Alive

Cache-Control と Expire の両方が 6 か月に設定されており、CDN サービスが引き続き利用可能であることがわかります。Access-Control-Allow-Origin: * ヘッダー。

CORS ヘッダーが適切に機能するためには、CDN キャッシュを更新し、オリジン ヘッダーを尊重またはパススルーするように CDN サービスを構成する必要がある場合があることに注意してください。

LiteSpeed Cacheプラグインを使用したWordPress

WordPress 用の LiteSpeed Cache プラグインを使用していて、結合/縮小された JS/CSS ファイルが原因で 404 エラーが発生する場合は、次の操作を行ってください。

上記の文字列から削除js|そして。css|経験値:

ここで、CSS 用と JS 用の 2 つの新しいコンテキストを作成します。

CSS コンテキストには次の設定が必要です。

URI設定 /wp-content/cache/css/

意思位置設定 $DOC_ROOT/wp-content/cache/css/。

意思アクセス可能な設定のためにはい.

意思有効期限設定を有効にするのためにはい。

種類によって有効期限が異なります次のように設定します（15552000秒は180日に相当します):

テキスト/css=A15552000

ヘッダー操作次のように設定します。

Cache-control を解除 Cache-control を public、max-age=15552000 に設定 Access-Control-Allow-Origin: * を設定

JS コンテキストには次の設定が必要です。

URI設定 /wp-content/cache/js/

意思位置設定 $DOC_ROOT/wp-content/cache/js/。

意思アクセス可能な設定のためにはい.

意思有効期限設定を有効にするのためにはい。

種類によって有効期限が異なります次のように設定します（15552000秒は180日に相当します):

アプリケーション/x-javascript=A15552000、テキスト/javascript=A15552000、アプリケーション/javascript=A15552000

ヘッダー操作次のように設定します。

Cache-control を解除 Cache-control を public、max-age=15552000 に設定 Access-Control-Allow-Origin: * を設定

存在する"注文"タブをクリック-シンボルは、スクリーンショットに示すように、JS と CSS が正規表現 URI コンテキストの上になるようにコンテキストを並べ替えます。

保存して再起動します。

クロスオリジンリソース共有（CORS）

セキュリティヘッダーWeb サーバーがクライアント (通常は Web ブラウザー) に送信する HTTP 応答ヘッダー。Web サイトまたはアプリケーションのセキュリティをさらに強化します。

これらは、次のようなさまざまなタイプの攻撃や脆弱性から保護するのに役立ちます。クロスサイトスクリプティング (XSS)、クリックジャッキング、コードインジェクションなど。

セキュリティヘッダーの種類と追加方法の詳細については、 オープンライトスピード 設定の詳細については、以下を参照してください。OpenLiteSpeed でのセキュリティ ヘッダーの設定。

ブラウザの同一オリジンポリシーは、異なるオリジンからのリソースの読み取りを防止します。このメカニズムは、悪意のあるウェブサイトが他のウェブサイトからデータを読み取ることを防ぎますが、正当な使用を妨げる可能性もあります。

現代のウェブアプリケーションでは、別のドメインからJSONデータを取得したり、別のウェブサイトから画像をロードするなど、さまざまなソースからリソースを取得する必要があることがよくあります。 キャンバス 要素。これらは公開リソースとして誰でも閲覧できるべきですが、同一オリジンポリシーによって使用が禁止されています。開発者はこれまで、次のような回避策を講じてきました。 JSONP。

クロスオリジンリソース共有（CORS） この問題は標準化された方法で修正される予定です。CORSを有効にすると、サーバーはブラウザに他のオリジンを使用できることを通知できます。

ブラウザとサーバーはハイパーテキスト転送プロトコル (HTTP) はネットワークを介してデータを交換します。HTTP は、リソースを取得するために必要な情報を含む、要求側と応答側間の通信ルールを定義します。

HTTPヘッダーは、クライアントとサーバー間のメッセージ交換をネゴシエートし、アクセス権限を決定するために使用されます。ブラウザからのリクエストとサーバーからのレスポンスメッセージは、ヘッダーとボディに分かれています。

クロスオリジンリソースを安全に共有するクロスオリジンリソース共有 (CORS)

アクセス制御許可オリジン * アクセス制御許可メソッド GET、POST、OPTIONS アクセス制御許可ヘッダー Origin、X-Requested-With、Content-Type、Accept

CORSヘッダーの設定

標準アクセス制御許可オリジンヘッダーは、ページのリソースへのアクセスを許可するサイトを指定することにより、クロスオリジン リソース共有 (CORS) 攻撃を防ぎます。

CORSヘッダーに割り当てる最も単純な（そして最も許容度の高い）値は*は、どのサイトからでもページのリソースにアクセスできることを意味します。より保守的かつ安全なアプローチとして、特定の信頼できるサイトからのアクセスのみを許可してください。

例：

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

アクセス制御許可元: https://trusted-example.com

より多くの CORS メソッドをサポート

デフォルトでは、CORS は次のメソッドをサポートしています。押す、得るそして頭あなたもサポートしたいならオプションそれで、何をすればいいのでしょうか?消去

単に追加するだけで追加ヘッダー : アクセス制御許可メソッド GET、POST、OPTIONS、DELETE。

もう一度検証をお試しください。今回は送信してください。HTTPを削除方法。200返事。

CORSについて詳しくはこちら

CORSヘッダーとメソッドの詳細については、以下を参照してください。このMozillaのドキュメント。