コンテンツにスキップ

ヘッダー

ヘッダーを追加する

Cloudflare Pages のレスポンスにヘッダーを追加するには、プロジェクトの出力フォルダーに _headers プレーンテキストファイルを作成します。通常、これはデプロイ準備が整った HTML ファイルやビルドによって生成されたアセット(ファビコンなど)を含むフォルダーです。ヘッダーの変更はビルド時にウェブサイトに更新されます。ヘッダーを更新するたびにファイルをコミットしてプッシュし、新しいビルドをトリガーしてください。

ヘッダーのルールは複数行のブロックで定義されます。ブロックの最初の行は、ルールのヘッダーが適用される URL または URL パターンです。次の行には、インデントされたヘッダー名とヘッダー値のリストを記述する必要があります:

[url]
[name]: [value]

絶対 URL の使用はサポートされていますが、絶対 URL は https で始まる必要があり、ポートの指定はサポートされていないことに注意してください。Cloudflare Pages は、受信リクエストのポートとプロトコルを無視して、受信リクエストに対して一致させます。たとえば、https://example.com/path のようなルールは、other://example.com:1234/path へのリクエストに一致します。

必要に応じて、後続の行に [name]: [value] ペアをいくつでも定義できます。たとえば:

# これはコメントです
/secure/page
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: no-referrer
/static/*
Access-Control-Allow-Origin: *
X-Robots-Tag: nosnippet
https://myproject.pages.dev/*
X-Robots-Tag: noindex

複数のルールの URL パターンに一致する受信リクエストは、すべてのルールのヘッダーを継承します。前述の _headers ファイルを使用すると、次のリクエストには次のヘッダーが適用されます:

リクエスト URLヘッダー
https://custom.domain/secure/pageX-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: no-referrer
https://custom.domain/static/image.jpgAccess-Control-Allow-Origin: *
X-Robots-Tag: nosnippet
https://myproject.pages.dev/homeX-Robots-Tag: noindex
https://myproject.pages.dev/secure/pageX-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: no-referrer
X-Robots-Tag: noindex
https://myproject.pages.dev/static/styles.cssAccess-Control-Allow-Origin: *
X-Robots-Tag: nosnippet, noindex

プロジェクトは 100 のヘッダー ルールに制限されています。_headers ファイルの各行には 2,000 文字の制限があります。スペース、ヘッダー名、値を含む全体の行がこの制限にカウントされます。

_headers ファイルでヘッダーが二重に適用されると、値はカンマ区切りで結合されます。_headers ファイルで定義されたヘッダーは、Cloudflare Pages が通常送信するものを上書きするため、セキュリティヘッダーを設定する際には注意が必要です。Cloudflare は、パフォーマンスを向上させたり、デプロイメントのセキュリティを強化するために、いつでも Pages プロジェクトに新しいヘッダーを追加する権利を留保します。

ヘッダーを削除する

より広範なルールによって追加されたヘッダーを削除したい場合があります。これは、感嘆符 ! を前に付けることで行えます。

.jpg
/*
Content-Security-Policy: default-src 'self';
! Content-Security-Policy

パスを一致させる

_redirects(/pages/configuration/redirects/) が提供するのと同じ URL 一致機能が _headers ファイルにも利用可能です。ただし、リダイレクトはヘッダーの前に適用されるため、リクエストがリダイレクトとヘッダーの両方に一致する場合、リダイレクトが優先されます。

スプラット

一致させる際、スプラットパターン(アスタリスク * で示される)はすべての文字を貪欲に一致させます。URL にスプラットを 1 つだけ含めることができます。

一致した値は、ヘッダー値内で :splat プレースホルダーとして参照できます。

プレースホルダー

A placeholder can be defined with :placeholder_name. A colon (:) followed by a letter indicates the start of a placeholder and the placeholder name that follows must be composed of alphanumeric characters and underscores (:[A-Za-z]\w*). Every named placeholder can only be referenced once. Placeholders match all characters apart from the delimiter, which when part of the host, is a period (.) or a forward-slash (/) and may only be a forward-slash (/) when part of the path.

Similarly, the matched value can be used in the header values with :placeholder_name.

/movies/:title
x-movie-name: あなたは ":title" を見ています

クロスオリジンリソース共有 (CORS)

他のドメインがあなたの Pages プロジェクトからすべてのアセットを取得できるようにするには、次の内容を _headers ファイルに追加できます:

/*
Access-Control-Allow-Origin: *

これは、すべての受信 URL に Access-Control-Allow-Origin ヘッダーを適用します。より制限的にするには、*.pages.dev サブドメインに適用される URL パターンを定義し、その後、staging ブランチのサブドメインからのアクセスのみを許可することができます:

https://:project.pages.dev/*
Access-Control-Allow-Origin: https://staging.:project.pages.dev/

あなたの pages.dev デプロイメントが検索結果に表示されないようにする

Google や他の検索エンジンは、ウェブサイトがどのようにインデックスされるべきかを指示するために X-Robots-Tag ヘッダーをサポートしています。

たとえば、*.pages.dev デプロイメントがインデックスされないようにするには、次の内容を _headers ファイルに追加します:

https://:project.pages.dev/*
X-Robots-Tag: noindex

アプリケーションのセキュリティを強化する

クリックジャッキングを防ぐために、ブラウザにアプリケーションを別のアプリケーション内に埋め込まないように指示するには、X-Frame-Options ヘッダーを使用します。

X-Content-Type-Options: nosniff は、ブラウザがレスポンスを Content-Type ヘッダーで定義された以外のコンテンツタイプとして解釈するのを防ぎます。

Referrer-Policy を使用すると、訪問者がページを離れるときにどれだけの情報を提供するかをカスタマイズできます。

ブラウザの機能は、Permissions-Policy ヘッダー(最近 Feature-Policy から名前が変更されました)を使用して、さまざまな程度で無効にできます。

アプリケーションのコンテンツを細かく制御する必要がある場合、Content-Security-Policy ヘッダーを使用すると、X-Frame-Options ヘッダーと同様の制御を含む多くのセキュリティ設定を構成できます。

/app/*
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: no-referrer
Permissions-Policy: document-domain=()
Content-Security-Policy: script-src 'self'; frame-ancestors 'none';