セキュリティ・ヘッダの設定

ウェブ・アプリケーションのセキュリティを向上させるために、 HTTP セキュリティ・ヘッダをエッジやアプリケーションに設定することがベスト・プラクティスです。次の JavaScript の例は、これらのヘッダーの実装方法を示している。インフライトでレスポンスヘッダを修正することで、バックエンドのアプリケーションを変更することなく、これらの一般的なセキュリティヘッダのような保護を簡単に追加することができます。

X-XSS-Protection: XSS攻撃が検出された場合、ページのロードを防ぎます。もっと詳しく例えば

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

X-Frame-Options

クリックジャッキング攻撃の防止に役立ちます。もっと詳しく例えば

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

X-Content-Type-Options

ブラウザが宣言されたcontent-typeから離れたレスポンスをMIME-sniffするのを止める。もっと詳しく例えば

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

パーミッション-ポリシー

ブラウザの機能へのアクセスをコントロールできます。例えば、Federated Learning of Cohorts ( FLoC ) をオプトアウトする：

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

リファラー・ポリシー

リクエストに含まれるリファラー情報の量を制御します。以下に例を示します。

"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,
      });
    }
  },
};