How to set custom headers for LiteSpeed cross-origin resource sharing (CORS)

LiteSpeed sets empty header, spans access

In some cases, users may need to setCustom Headers, such as the Cache-Control header or the Expire header.

As an example, in this guide we will set a custom header on our JavaScript and CSS files.

Step 1

Log in to the WebAdmin Console https://IP:7080,EnterVirtual Host > Context, and then create a new context.

Step 2

In the newly created context,TypeSet toStatic.

Since the target files are JS and CSS, a regular expression is used to match the URIAll files of the type are as follows:

exp:^.*(css|js)$

If you wish, you can add more static file extensions, for example:

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

WillLocationSet to $DOC_ROOT/$0.we need to,$0becauseURIUse regular expressions.

WillAccessible settingsforYes.

WillEnable expiration settingsforYes.

Expires by TypeSet to the following (15552000seconds equals 180 days):

application/javascript=A15552000, text/css=A15552000

Header OperationSet to the following:

unset Cache-control set Cache-control public, max-age=15552000

unset cache-controlThis line removes the previous cache-control headers before setting the new cache-control headers in the next line.

Save and reboot.

confirm

You can look for the new response headers from your browser's development tools.

Adding a custom header

If you need to add more headers, the syntax and usage are the same as Apache's mod_headersThe operations supported by the instructions are similar.

Here is an example of adding a headerX-Powered-By:

Verification results:

Useful Headers for WordPress Sites

This is an example context for a typical WordPress site. Add Expire, Cache-Control, and CORS headers for static resources.

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

WillAccessible settingsforYes.

WillEnable expiration settingsforYes.

Expires by TypeSet to the following (15552000seconds equals 180 days):

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, application/font-woff2=A15552000

unset Cache-control set Cache-control public, max-age=15552000 set 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 Expires: Fri, 01 May 2020 21:18:01 GMT Etag: "5d7-5dbf3aff-181c04;;;" Last-Modified: Sun, 03 Nov 2019 20:39:27 GMT Content-Type: text/css Content-Length: 1495 Accept-Ranges: bytes Date: Sun, 03 Nov 2019 21:18:01 GMT Server: LiteSpeed Cache-Control: public, max-age=15552000 Access-Control-Allow-Origin: * Connection: Keep-Alive

You will see that both Cache-Control and Expire are set to 6 months and the CDN service is still available.Access-Control-Allow-Origin: * header.

Note that you may have to refresh your CDN cache and configure your CDN service to respect or pass through origin headers in order for CORS headers to work properly.

WordPress with LiteSpeed Cache Plugin

If you have the LiteSpeed Cache plugin for WordPress and are receiving 404 errors due to combined/minified JS/CSS files, do the following:

Remove from the above stringjs|and.css|exp:

Now create two new contexts: one for CSS and one for JS.

The CSS context should have the following settings:

URISet to /wp-content/cache/css/

WillLocationSet to $DOC_ROOT/wp-content/cache/css/.

WillAccessible settingsforYes.

WillEnable expiration settingsforYes.

Expires by TypeSet to the following (15552000seconds equals 180 days):

text/css=A15552000

Header OperationSet to the following:

unset Cache-control set Cache-control public, max-age=15552000 set Access-Control-Allow-Origin: *

The JS context should have the following settings:

URISet to /wp-content/cache/js/

WillLocationSet to $DOC_ROOT/wp-content/cache/js/.

WillAccessible settingsforYes.

WillEnable expiration settingsforYes.

Expires by TypeSet to the following (15552000seconds equals 180 days):

application/x-javascript=A15552000,text/javascript=A15552000,application/javascript=A15552000

Header OperationSet to the following:

unset Cache-control set Cache-control public, max-age=15552000 set Access-Control-Allow-Origin: *

exist"order"tab, click-The symbol reorders the contexts so that JS and CSS are above the regular expression URI context, as shown in the screenshot:

Save and reboot.

Cross-Origin Resource Sharing (CORS)

Security HeaderAn HTTP response header that a web server sends to a client (usually a web browser) to provide an additional layer of security for a website or application.

They help protect against various types of attacks and vulnerabilities, such asCross-site scripting (XSS), clickjacking, code injection, etc.

To learn more about security header types and how to add them to OpenLiteSpeed For more information on configuration, seeSetting security headers on OpenLiteSpeed.

The browser's same-origin policy prevents reading resources from different origins. This mechanism prevents malicious websites from reading data from other websites, but it can also prevent legitimate use.

Modern web applications often need to fetch resources from different sources, for example, retrieving JSON data from another domain or loading images from another website into canvas element. They can be public resources and should be readable by anyone, but the same-origin policy prevents their use. Developers have historically used workarounds such as JSONP.

Cross-Origin Resource Sharing (CORS) This issue will be fixed in a standardized way. Enabling CORS lets the server tell the browser that it can use other origins.

Browsers and servers can useHypertext Transfer Protocol (HTTP) exchanges data over a network. HTTP defines the rules for communication between a requester and a responder, including the information needed to obtain a resource.

HTTP headers are used to negotiate the message exchange between the client and the server and to determine access permissions. The browser's request and the server's response messages are divided into headers and bodies.

Safely share cross-origin resourcesCross-Origin Resource Sharing (CORS)

Access-Control-Allow-Origin * Access-Control-Allow-Methods GET, POST, OPTIONS Access-Control-Allow-Headers Origin, X-Requested-With, Content-Type, Accept

Setting CORS Headers

StandardAccess-Control-Allow-OriginThe header prevents cross-origin resource sharing (CORS) attacks by specifying which sites are allowed to access the page's resources.

The simplest (and most permissive) value to assign a CORS header is*, which means that any site can access your page's resources. For a more conservative and secure approach, you will only allow access through specific trusted sites.

example:

Access-Control-Allow-Origin: *

Access-Control-Allow-Origin: https://trusted-example.com

Support more CORS methods

By default, CORS supports the following methods:PUSH,GETandHEADIf you also want to supportOPTIONSAnd, what to do?DELETE

You can simply append toExtra headers : Access-Control-Allow-Methods GET, POST, OPTIONS, DELETE.

Try verification again, this time sendingDELETE HTTPmethod. You should see200reply.

Learn more about CORS

For a more in-depth look at CORS headers and methods, seeThis Mozilla document.