精品軟體與實用教程
LiteSpeed設定空標頭,跨越訪問
在某些情況下,用戶可能需要設定自訂標頭,例如Cache-Control 標頭或Expire 標頭。
作為範例,在本指南中,我們將在JavaScript 和CSS 檔案上設定自訂標頭。
步驟1
透過登入WebAdmin Console https://IP:7080
,進入虛擬主機> 上下文,然後建立新的上下文。
第2步
在新建立的上下文中,將Type設定為Static
。
由於目標檔案是JS 和CSS,因此使用正規表示式來匹配URI類型的所有文件,如下所示:
exp:^.*(css|js)$
如果您願意,您可以新增更多靜態檔案副檔名,例如:
exp:^.*(woff|woff2|jpg|jpeg|png|css|js)$
將位置設定為 $DOC_ROOT/$0
。我們需要,$0
因為URI使用正規表示式。
將可訪問設定為Yes
.
將啟用過期設定為Yes
。
將Expires by Type設定為以下內容(15552000
秒等於180 天):
application/javascript=A15552000, text/css=A15552000
將標頭操作設定為以下內容:
unset Cache-control set Cache-control public, max-age=15552000
unset cache-control
在下一行中設定新的快取控制標頭之前,該行會刪除先前的快取控制標頭。
儲存並重新啟動。
確認
您可以從瀏覽器的開發工具中尋找新的回應標頭。
新增自訂標頭
如果需要添加更多標頭,語法和用法與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)$
將可訪問設定為Yes
.
將啟用過期設定為Yes
。
將Expires by Type設定為以下內容(15552000
秒等於180 天):
text/css=A15552000, image/gif=A15552000, image/x-icon=A15552000, image/jpeg=A15552000, application/x-javascript=A15552000A /java application/javascript=A15552000, image/png=A15552000, image/webp=A15552000, font/ttf=A15552000, font/woff=A15552000, font/woff= 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:08:00 "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, 013201931 Cache-Control: public, max-age=15552000 Access-Control-Allow-Origin: * Connection: Keep-Alive
您將看到Cache-Control 和Expire 均已設定為6 個月,且CDN 服務仍存在Access-Control-Allow-Origin: *標頭。
請注意,您可能必須刷新CDN 快取並將CDN 服務配置為尊重或傳遞原始標頭,以使CORS 標頭正常運作。
帶有LiteSpeed 快取外掛的WordPress
如果您有適用於WordPress 的LiteSpeed Cache 插件,並且由於組合/縮小的JS/CSS 檔案而收到404 錯誤,請執行以下操作:
從上面的字串中刪除js|
和。css|
exp:
現在建立兩個新上下文:一個用於CSS,一個用於JS。
CSS 上下文應具有以下設定:
將URI設定為 /wp-content/cache/css/
將位置設定為 $DOC_ROOT/wp-content/cache/css/
。
將可訪問設定為Yes
.
將啟用過期設定為Yes
。
將Expires by Type設定為以下內容(15552000
秒等於180 天):
text/css=A15552000
將標頭操作設定為以下內容:
unset Cache-control set Cache-control public, max-age=15552000 set Access-Control-Allow-Origin: *
JS 上下文應具有以下設定:
將URI設定為 /wp-content/cache/js/
將位置設定為 $DOC_ROOT/wp-content/cache/js/
。
將可訪問設定為Yes
.
將啟用過期設定為Yes
。
將Expires by Type設定為以下內容(15552000
秒等於180 天):
應用程式/x-javascript=A15552000,文字/javascript=A15552000,應用程式/javascript=A15552000
將標頭操作設定為以下內容:
unset Cache-control set Cache-control public, max-age=15552000 set Access-Control-Allow-Origin: *
在“順序”選項卡中,按一下-
符號對上下文重新排序,以便JS 和CSS 位於正規表示式URI 上下文之上,如螢幕截圖所示:
儲存並重新啟動。
跨來源資源共享(CORS)
安全標頭是Web 伺服器傳送到用戶端(通常是Web 瀏覽器)的HTTP 回應標頭,旨在為網站或應用程式提供額外的安全層。
它們有助於防範各種類型的攻擊和漏洞,例如跨站點腳本 (XSS)、點擊劫持、程式碼注入等。
要了解有關安全標頭類型以及如何將它們添加到 OpenLiteSpeed 配置的更多信息,請參閱在OpenLiteSpeed 上設定安全標頭。
瀏覽器的同源政策會阻止從不同來源讀取資源。此機制會阻止惡意網站讀取其他網站的數據,但也可以防止合法使用。
現代Web 應用程式通常需要從不同來源取得資源,例如,從其他網域檢索JSON 數據,或將其他網站中的圖片載入到 canvas
元素中。它們可以是公開資源,應可供任何人讀取,但同源政策會阻止使用。開發者過去一直使用解決方案,例如 JSONP。
跨域資源共享(CORS) 會以標準化方式解決此問題。 啟用CORS 可讓伺服器告知瀏覽器它可以使用其他來源。
瀏覽器和伺服器可以使用超文本傳輸協定 (HTTP) 透過網路交換資料。 HTTP 定義了請求者和回應者之間的通訊規則,包括取得資源所需的資訊。
HTTP 標頭用於協商用戶端與伺服器之間的訊息交換,用於確定存取權限。瀏覽器的請求和伺服器的回應訊息分為標頭和正文。
Access-Control-Allow-Origin * Access-Control-Allow-Methods GET, POST, OPTIONS Access-Control-Allow-Headers Origin, X-Requested-With, Content-Type, Accept
設定CORS 標頭
標Access-Control-Allow-Origin
頭透過指定允許哪些網站存取頁面資源來防止跨域資源共享(CORS) 攻擊。
分配CORS 標頭的最簡單(也是最寬鬆)的值是*
,它表示任何網站都可以存取您頁面的資源。對於更保守和更安全的方法,您將只允許透過特定的受信任網站進行存取。
例子:
存取控制允許來源:*
存取控制允許來源:https://trusted-example.com
支援更多CORS方法
預設情況下,CORS 支援以下方法:PUSH
、GET
和HEAD
。如果您也想支持OPTIONS
和,該怎麼辦?DELETE
您可以簡單地附加到Extra headers : Access-Control-Allow-Methods GET, POST, OPTIONS, DELETE
。
再次嘗試驗證,這次發送DELETE HTTP
方法。您應該會看到200
回覆.
了解有關CORS 的更多信息
若要更深入了解CORS 標頭和方法,請參閱此Mozilla 文檔。