So legen Sie benutzerdefinierte Header für LiteSpeed Cross-Origin Resource Sharing (CORS) fest

LiteSpeed setzt leeren Header, überspannt den Zugriff

In manchen Fällen müssen BenutzerBenutzerdefinierte Header, wie etwa der Cache-Control-Header oder der Expire-Header.

Als Beispiel legen wir in dieser Anleitung einen benutzerdefinierten Header für unsere JavaScript- und CSS-Dateien fest.

Schritt 1

Melden Sie sich bei der WebAdmin-Konsole an https://IP:7080,EingebenVirtueller Host > Kontext, und erstellen Sie dann einen neuen Kontext.

Schritt 2

Im neu geschaffenen KontextTypEingestellt aufStatisch.

Da es sich bei den Zieldateien um JS und CSS handelt, wird ein regulärer Ausdruck verwendet, um die URI abzugleichenAlle Dateien dieses Typs sind wie folgt:

exp:^.*(css|js)$

Wenn Sie möchten, können Sie weitere statische Dateierweiterungen hinzufügen, zum Beispiel:

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

WilleStandortEingestellt auf $DOC_ROOT/$0.wir müssen,$0WeilURIVerwenden Sie reguläre Ausdrücke.

WilleZugängliche EinstellungenfürJa.

WilleAblaufeinstellungen aktivierenfürJa.

Läuft nach Typ abStellen Sie Folgendes ein (15552000Sekunden entsprechen 180 Tagen):

Anwendung/Javascript=A15552000, Text/CSS=A15552000

Header-BetriebStellen Sie Folgendes ein:

Cache-Steuerung aufheben, Cache-Steuerung öffentlich setzen, max-age=15552000

Cache-Steuerung aufhebenDiese Zeile entfernt die vorherigen Cache-Control-Header, bevor in der nächsten Zeile die neuen Cache-Control-Header festgelegt werden.

Speichern und neu starten.

bestätigen

Sie können in den Entwicklungstools Ihres Browsers nach den neuen Antwortheadern suchen.

Hinzufügen einer benutzerdefinierten Kopfzeile

Wenn Sie weitere Header hinzufügen müssen, sind Syntax und Verwendung identisch mit Apaches mod_headersDie von den Anweisungen unterstützten Operationen sind ähnlich.

Hier ist ein Beispiel für das Hinzufügen einer KopfzeileX-Powered-By:

Ergebnisse der Überprüfung:

Nützliche Header für WordPress-Sites

Dies ist ein Beispielkontext für eine typische WordPress-Site. Fügen Sie Expire-, Cache-Control- und CORS-Header für statische Ressourcen hinzu.

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

WilleZugängliche EinstellungenfürJa.

WilleAblaufeinstellungen aktivierenfürJa.

Läuft nach Typ abStellen Sie Folgendes ein (15552000Sekunden entsprechen 180 Tagen):

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, Anwendung/Schriftart-woff2=A15552000

Cache-Steuerung aufheben, Cache-Steuerung öffentlich festlegen, max. Alter=15552000, Access-Control-Allow-Origin festlegen: *

[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 Läuft ab: Fr., 01. Mai 2020 21:18:01 GMT Etag: "5d7-5dbf3aff-181c04;;;" Letzte Änderung: So., 03. Nov. 2019 20:39:27 GMT Inhaltstyp: Text/CSS Inhaltslänge: 1495 Akzeptierte Bereiche: Bytes Datum: So., 03. Nov. 2019 21:18:01 GMT Server: LiteSpeed Cache-Steuerung: öffentlich, max. Alter=15552000 Zugriffskontrolle-Zulassen-Ursprung: * Verbindung: Keep-Alive

Sie werden sehen, dass sowohl Cache-Control als auch Expire auf 6 Monate eingestellt sind und der CDN-Dienst weiterhin verfügbar ist.Zugriffskontrolle-Zulassen-Ursprung: * Header.

Beachten Sie, dass Sie möglicherweise Ihren CDN-Cache aktualisieren und Ihren CDN-Dienst so konfigurieren müssen, dass er Ursprungsheader berücksichtigt oder weiterleitet, damit CORS-Header ordnungsgemäß funktionieren.

WordPress mit LiteSpeed Cache Plugin

Wenn Sie das LiteSpeed Cache-Plugin für WordPress haben und aufgrund kombinierter/minimierter JS/CSS-Dateien 404-Fehler erhalten, gehen Sie wie folgt vor:

Aus der obigen Zeichenfolge entfernenjs|Und.CSS|exp:

Erstellen Sie nun zwei neue Kontexte: einen für CSS und einen für JS.

Der CSS-Kontext sollte die folgenden Einstellungen haben:

URIEingestellt auf /wp-content/cache/css/

WilleStandortEingestellt auf $DOC_ROOT/wp-content/cache/css/.

WilleZugängliche EinstellungenfürJa.

WilleAblaufeinstellungen aktivierenfürJa.

Läuft nach Typ abStellen Sie Folgendes ein (15552000Sekunden entsprechen 180 Tagen):

text/css=A15552000

Header-BetriebStellen Sie Folgendes ein:

Cache-Steuerung aufheben, Cache-Steuerung öffentlich festlegen, max. Alter=15552000, Access-Control-Allow-Origin festlegen: *

Der JS-Kontext sollte die folgenden Einstellungen haben:

URIEingestellt auf /wp-content/cache/js/

WilleStandortEingestellt auf $DOC_ROOT/wp-content/cache/js/.

WilleZugängliche EinstellungenfürJa.

WilleAblaufeinstellungen aktivierenfürJa.

Läuft nach Typ abStellen Sie Folgendes ein (15552000Sekunden entsprechen 180 Tagen):

Anwendung/x-javascript=A15552000,Text/javascript=A15552000,Anwendung/javascript=A15552000

Header-BetriebStellen Sie Folgendes ein:

Cache-Steuerung aufheben, Cache-Steuerung öffentlich festlegen, max. Alter=15552000, Access-Control-Allow-Origin festlegen: *

existieren"Befehl"auf-Das Symbol ordnet die Kontexte neu an, sodass JS und CSS über dem URI-Kontext des regulären Ausdrucks stehen, wie im Screenshot gezeigt:

Speichern und neu starten.

Cross-Origin-Ressourcenfreigabe (CORS)

SicherheitsheaderEin HTTP-Antwortheader, den ein Webserver an einen Client (normalerweise einen Webbrowser) sendet, um eine zusätzliche Sicherheitsebene für eine Website oder Anwendung bereitzustellen.

Sie schützen vor verschiedenen Arten von Angriffen und Schwachstellen, wie zum BeispielCross-Site-Scripting (XSS), Clickjacking, Code-Injection usw.

Um mehr über Sicherheitsheadertypen zu erfahren und wie Sie diese hinzufügen OpenLiteSpeed Weitere Informationen zur Konfiguration finden Sie unterFestlegen von Sicherheitsheadern auf OpenLiteSpeed.

Die Same-Origin-Policy des Browsers verhindert das Lesen von Ressourcen unterschiedlicher Herkunft. Dieser Mechanismus verhindert, dass bösartige Websites Daten von anderen Websites lesen, kann aber auch die legitime Nutzung verhindern.

Moderne Webanwendungen müssen oft Ressourcen aus verschiedenen Quellen abrufen, beispielsweise um JSON-Daten aus einer anderen Domäne abzurufen oder Bilder von einer anderen Website in Leinwand Element. Sie können öffentliche Ressourcen sein und sollten für jeden lesbar sein, aber die Same-Origin-Policy verhindert ihre Verwendung. Entwickler haben in der Vergangenheit Workarounds verwendet wie JSONP.

Cross-Origin-Ressourcenfreigabe (CORS) Dieses Problem wird standardisiert behoben. Durch die Aktivierung von CORS teilt der Server dem Browser mit, dass er andere Ursprünge verwenden kann.

Browser und Server könnenHypertext Transfer Protocol (HTTP) dient dem Datenaustausch über ein Netzwerk. HTTP definiert die Regeln für die Kommunikation zwischen Anforderer und Antwortender, einschließlich der zum Abrufen einer Ressource erforderlichen Informationen.

HTTP-Header dienen dazu, den Nachrichtenaustausch zwischen Client und Server auszuhandeln und Zugriffsberechtigungen festzulegen. Die Anfrage des Browsers und die Antwort des Servers werden in Header und Body unterteilt.

Sicheres Teilen von Cross-Origin-RessourcenCross-Origin Resource Sharing (CORS)

Zugriffskontrolle-Erlauben-Ursprung * Zugriffskontrolle-Erlauben-Methoden GET, POST, OPTIONEN Zugriffskontrolle-Erlauben-Header Ursprung, X-Angefordert-Mit, Inhaltstyp, Akzeptieren

Festlegen von CORS-Headern

StandardZugriffskontrolle-Erlauben-UrsprungDer Header verhindert CORS-Angriffe (Cross-Origin Resource Sharing), indem er angibt, welche Sites auf die Ressourcen der Seite zugreifen dürfen.

Der einfachste (und freizügigste) Wert zum Zuweisen eines CORS-Headers ist*, was bedeutet, dass jede Site auf die Ressourcen Ihrer Seite zugreifen kann. Für einen konservativeren und sichereren Ansatz erlauben Sie den Zugriff nur über bestimmte vertrauenswürdige Sites.

Beispiel:

Zugriffskontrolle-Erlauben-Ursprung: *

Zugriffskontrolle-Erlauben-Ursprung: https://trusted-example.com

Unterstützung weiterer CORS-Methoden

Standardmäßig unterstützt CORS die folgenden Methoden:DRÜCKEN,ERHALTENUndKOPFWenn Sie auch unterstützen möchtenOPTIONENUnd was tun?LÖSCHEN

Sie können einfach anhängen anZusätzliche Header : Zugriffssteuerungs-Zulassungsmethoden GET, POST, OPTIONS, DELETE.

Versuchen Sie die Verifizierung erneut, diesmal sendenHTTP LÖSCHENMethode. Sie sollten sehen200Antwort.

Erfahren Sie mehr über CORS

Einen ausführlicheren Einblick in CORS-Header und -Methoden finden Sie unterDieses Mozilla-Dokument.