はじめに
Cloudflare の CDN / WAF にはクライアントにエラーや、WAF でブロックされた際に案内するデフォルトページが用意されていますが、英語で表示されます。
サービスの内容によってはお客様にお掛けするご心配を少なくし、迅速にご対応をする目的で日本語に対応したエラーページ（Sorry Page）やブロックページをご用意したいケースは少なくありません。
しかし、このページのためにわざわざウェブサイトを作成するのも、労力やコストに見合わないと感じるのではないでしょうか。
Cloudflare では下記の面倒やコストを開放するサービスが用意されています。
- Cloudflare Pages でオリジン（ウェブサーバー）を構築せずに、ウェブページが公開できる
- SSL/TLS 証明書は自動的に適用され、自動更新される
- 面倒な作業なく、配信中ドメインURL で表示してくれる
やってみる
まずはローカル開発環境で html を作りましょう。
ここで使っている変数 ::RAY_ID:: は、Cloudflare が用意している、ウェブサイトへアクセスした際に発行されるユニークなIDで、エラー時の特定などに使われます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>dd-lab アクセス制限ページ</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 50px;
}
.container {
background-color: #fff;
margin: auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
max-width: 600px;
}
h1 {
color: #333;
}
p {
color: #666;
}
.contact-info {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>アクセスが制限されました</h1>
<p>申し訳ありませんが、ご利用いただきましたサービスはセキュリティ上の理由により制限されています。</p>
<p>この判断が誤りであると考えられる場合は、以下の連絡先まで、下記に表示されております「Cloudflare Ray ID」をメモの上ご連絡ください。</p>
<div class="contact-info">
<p>サポートチーム: <a href="mailto:support@example.com">support@example.com</a></p>
<p>電話: 123-456-7890</p>
<p>Cloudflare Ray ID: ::RAY_ID::</p>
</div>
</div>
</body>
</html>
Pages にソースをアップロードする
カスタムページの登録
各サイトのメニューにカスタムページという項目がありますので、そこから登録します。
カスタムページの URL は Pages で作成したドメインとソースの場所を指定します。
この場合は custom-blockpage-dd.pages.dev という Pages のプロジェクトに custom_block_page.html をアップロードしているので、この URL (.html は指定しなくても動作しました)
WAF でのブロックが発生すると
このように表示されます
この際、URL は公開しているサイトと同じドメインになり、SSL/TLS 証明書も自動適用された形となります。