設定安全標頭

為協助提升網頁應用程式的安全性，請在邊緣設備或您的應用程式中設定 HTTP 安全標頭。下面的 JavaScript 示例演示了如何實現這些標頭。透過在傳輸過程中修改回應標頭，您可以在不更動後端應用程式的情況下，新增此類常見安全標頭所提供的防護措施。

X XSS 保護 (X-XSS-Protection): 如果偵測到 XSS 攻擊，防止載入頁面。瞭解更多例如：

"X-XSS-Protection": "1; mode=block",

X-Frame-Options

有助於防止點擊劫持攻擊。瞭解更多例如：

"X-Frame-Options": "DENY",

X 內容類型選項 (X-Content-Type-Options)

阻止瀏覽器從 MIME-sniffing 回應中擷取已宣告的內容類型。瞭解更多例如：

"X-Content-Type-Options": "nosniff",

權限-政策

讓您控制瀏覽器功能的存取。例如，選擇退出群組聯盟學習 ( FLoC )：

"Permissions-Policy": "interest-cohort=()",

Referrer-Policy

控制請求中包含多少推薦人資訊。例如：

"Referrer-Policy": "strict-origin-when-cross-origin",

嚴格-傳輸-安全

強制與您的伺服器進行安全 ( HTTPS ) 連線。這些標頭不會自動設定，因為您的網站可能會被加入 Chrome 的 HTTP Strict Transport Security ( HSTS ) 預載清單。例如：

"Strict-Transport-Security" : "max-age=63072000; includeSubDomains; preload",

內容安全政策

允許來自受信任網域及其所有子網域的內容。瞭解更多例如：

"Content-Security-Policy": "default-src 'self' example.com *.example.com",

Javascript 範例

export default {
  async fetch(request) {
    const DEFAULT_SECURITY_HEADERS = {  
      "X-Content-Type-Options": "nosniff",
      "Referrer-Policy": "strict-origin-when-cross-origin",
      "Cross-Origin-Embedder-Policy": 'require-corp; report-to="default";',
      "Cross-Origin-Opener-Policy": 'same-site; report-to="default";',
      "Cross-Origin-Resource-Policy": "same-site",
    };
    const BLOCKED_HEADERS = [
      "Public-Key-Pins",
      "X-Powered-By",
      "X-AspNet-Version",
    ];
    let response = await fetch(request);
    let newHeaders = new Headers(response.headers);
    const tlsVersion = request.cf.tlsVersion;
    console.log(tlsVersion);
    // This sets the headers for HTML responses:
    if (
      newHeaders.has("Content-Type") &&
      !newHeaders.get("Content-Type").includes("text/html")
    ) {
      return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders,
      });
    }
    Object.keys(DEFAULT_SECURITY_HEADERS).map((name) => {
      newHeaders.set(name, DEFAULT_SECURITY_HEADERS[name]);
    });
    BLOCKED_HEADERS.forEach((name) => {
      newHeaders.delete(name);
    });
    if (tlsVersion !== "TLSv1.2" && tlsVersion !== "TLSv1.3") {
      return new Response("You need to use TLS version 1.2 or higher.", {
        status: 400,
      });
    } else {
      return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders,
      });
    }
  },
};