與元信息相關的標籤
本文說明與元資訊相關的標籤。
本文介紹了 <meta> 標籤，包括與 SEO、響應式設計以及 Content-Security-Policy 相關的內容。
YouTube Video
與元信息相關的標籤
<meta> 標籤
1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta>標籤為HTML文檔提供元數據。元數據不會顯示在頁面上，但會被搜索引擎和瀏覽器使用。<meta>標籤用於頁面描述、關鍵詞、作者信息和響應設計設置。
<meta name="viewport"> 標籤
1<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="viewport">標籤控制網頁在不同設備上的佈局和縮放。它通常用於響應設計中，以確保在移動設備上的正確顯示。
<meta name="description"> 標籤
1<meta name="description" content="An example webpage"><meta name="description">標籤用於簡要描述網頁的內容。搜索引擎使用此描述来展示页面在搜索结果中的摘要。
<meta name="keywords"> 標籤
1<meta name="keywords" content="HTML, CSS, JavaScript"><meta name="keywords">標籤提供與頁面內容相關的關鍵字列表。搜索引擎使用這些關鍵字來更好地理解頁面內容。
<meta name="author"> 標籤
1<meta name="author" content="John Doe"><meta name="author">標籤指定了網頁的作者。此信息主要被搜索引擎和工具用來準確識別頁面的作者。
<meta http-equiv="refresh"> 標籤
1<meta http-equiv="refresh" content="5; url=https://example.com"><meta http-equiv="refresh">標籤用於在指定時間後自動刷新頁面或重定向至另一個URL。它對於重新加載頁面或重定向用戶非常有用。
<meta http-equiv="cache-control"> 標籤
1<meta http-equiv="cache-control" content="no-cache"><meta http-equiv="cache-control">標籤用於控制網頁的緩存行為。它可以指定是否緩存頁面或在後續訪問時重新驗證。
<meta http-equiv="expires"> 標籤
1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT"><meta http-equiv="expires">標籤為頁面內容設定過期日期。一旦指定日期過去，內容即成為過時，瀏覽器會提示檢索新版本。
<meta http-equiv="X-UA-Compatible"> 標籤
1<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="X-UA-Compatible">標籤用於指定Internet Explorer的兼容模式。這個標籤確保瀏覽器使用適當版本的渲染引擎來顯示頁面。
<meta http-equiv="content-security-policy"> 標籤
HTML 中 meta 標籤的 http-equiv="content-security-policy" 屬性是一種在瀏覽器中應用特定安全規則以增強網頁安全性的功能。通過使用此屬性，網站開發人員可以設置有關資源加載和腳本執行的策略，以防止例如 XSS（跨站腳本攻擊）和數據注入等攻擊。
Content-Security-Policy 是什麼？
Content-Security-Policy（CSP）是一種 HTTP 標頭，用於控制網頁可以加載哪些外部資源（圖像、腳本、樣式表等）以及可以執行哪些類型的代碼。這通常以 HTTP 標頭的形式發送，但也可以通過在 HTML 中使用 meta 標籤來定義。此方法允許在客戶端指定 CSP，而不需要在服務器端設置標頭。
例如，您可以在HTML meta 標籤中設置CSP，如下所示：。
1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">在此示例中，設置了以下策略：
default-src 'self'：基本上，所有資源只能從相同來源（自身）加載。img-src https://example.com：圖像只能從https://example.com加載。script-src 'self' https://apis.google.com：腳本只能從相同來源或https://apis.google.com執行。
http-equiv 和HTTP標頭的區別
通常，Content-Security-Policy 是以 HTTP 標頭的形式從服務器發送到客戶端。但是，如果使用 meta 標籤在客戶端設定 CSP，可以直接在 HTML 中編寫。
然而，以HTTP標頭設置和用meta標籤指定之間存在一些重要的差異：
-
優先順序：通過 HTTP 標頭發送的 CSP 比在
meta標籤中指定的 CSP 擁有更高的優先權。這意味著，如果在服務器端設置了 CSP，它不會被客戶端使用的meta標籤覆蓋。 -
應用時機：通過 HTTP 標頭指定的 CSP 在頁面加載之前應用。另一方面，通過
meta標籤指定的 CSP 在 HTML 解析後才應用，因此資源可能已經被加載。
CSP中的可用指示符
在 CSP 中，使用各種類型的指令來指定允許或禁止加載和執行某些類型資源的策略。典型的指令包括以下內容：。
- default-src：指定所有資源的默認來源策略。它適用於未被其他指令指定的資源。
- script-src：指定 JavaScript 的來源。為了防止 XSS 攻擊，可以限制從外部網站加載腳本。
- style-src：指定 CSS 的來源。通過限制從外部來源加載樣式表，可以防止針對網站樣式的攻擊。
- img-src：指定圖像的來源。可以限制從外部來源加載圖像。
- connect-src：指定允許的XMLHttpRequest和WebSocket連接的URL。這可確保外部API和WebSocket通信的安全性。
通過結合這些指令，您可以為網頁資源創建詳細的策略。
增強安全性的實用CSP設置
以下是提升網站安全性的CSP設置範例。這可以降低XSS攻擊和數據洩漏的風險。
1<meta http-equiv="Content-Security-Policy"
2 content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">使用此配置應用以下策略：
default-src 'self'：所有資源僅從同一來源加載。script-src 'self' https://trusted-cdn.com：腳本僅從同一來源或受信任的CDN加載。object-src 'none'：不使用object標籤。這是為了防止基於Flash或插件的攻擊。style-src 'self'：樣式表僅從原始來源載入。base-uri 'self'：由<base>標籤設定的URL基準僅限於原始來源。form-action 'self'：表單提交目的地僅限於原始來源。這減少了表單資料被發送到外部網站的風險。
結論
通過在HTML中使用 http-equiv="content-security-policy" 定義CSP，可以增強網頁的安全性。一個配置得當的CSP是一個強大的工具，可以減少XSS攻擊和資料洩漏的風險，並保護您的網站。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。