AWS WAFの機能だけでブロック時にカスタムエラーページを表示させてみた

#AWS WAF

#AWS

杉金晋

2021.09.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

みなさんこんにちは、杉金です。

AWS WAFで通信をブロックする際にカスタムレスポンスで簡易的なhtmlファイルを返すことができます。今回はそれを試してみようと思います。過去にカスタムレスポンスによるリダイレクトを紹介した記事もございますので、そちらは以下のページをご覧ください。

[update] AWS WAFがカスタムレスポンスに対応しました

やってみる

事前準備

まずは事前準備として検証環境を作ります。検証環境作成は割愛しますが、以下のものを用意します。

EC2(Amazon Linux2でnginx導入), ALB, WAFを作成&紐付けしてALBのDNS名でアクセスできることを確認
WAFのIP setsから自身のグローバルIPアドレスを登録（ブロックルール作成時に使用）
エラーページ(html）の用意

よし、アクセスできてるできてる。

WAFにブロックするルール追加

事前準備ができましたら、WAFブロック時にカスタムエラーページを表示させるルールを追加していきます。
作成したWAFの「Rules」→「Add rules」→「Add my own rules and rule groups」を選択

Rule typeで「IP set」を選択

作成したIP setの設定を選び、ActionをBlockにして「Custom response」を展開します。
※ActionがAllowもしくはCountではカスタムページ表示はできません

Responseコード(HTTPステータスコード)を設定します。
今回は403を設定してみました。正常を表す200にするとクローラが正常なページとして認識してしまう可能性があるため、エラーページは200以外に設定する形が良いです。設定後、画面下にある「Create a custom response body」をクリックして編集画面を開きます。

Content typeとしてHTMLだけでなく、JSONやPlain textも選択可能です。ブロック時のページをリッチにする必要性はあまり無さそうですが、実験としてCSSを含んだページを作ってみました。コードをResponse bodyに貼り付けます。ここで注意なのがページサイズが4KBまでであることです。

貼り付けたテスト用HTMLページです。サイズは900バイト弱です。

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>Site Maintenance</title>
  </head>
  <style type="text/css">
  .box1 {
    color: #000000;
    font-weight: bold;
    border: solid 2px #130012;
    margin: 3em 0 1em 0;
    border-radius: 6px;
    background: #feffff;
    padding: 22px 8px 22px 8px;
    line-height: 2;
  }
  .box1-title {
    border-bottom: solid 2px #130012;
    font-size: 1.2em;
    background: repeating-linear-gradient(-45deg, #d3a129 , #d3a129  12px,#130012 12px, #130012 28px);
    color: #feffff;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: -22px -8px 22px -8px;
    border-radius: 6px 6px 0 0;
  }
  .box1 p {
    margin: 0;
    padding: 0;
  }
  </style>

  <body>
    <div class="box1">
      <div class="box1-title">工事中</div>
      <center>こちらは現在通行不可となっております </center>
      </div>
  </body>
</html>

設定が終わったら保存してルールを適用します。そしてページに再度アクセスしてカスタムエラーページが表示されることを確認します。

こんな感じで表示されました。CSSもちゃんと表示されてますね。

最初試したときに文字コードを指定してなかったため、思いっきり文字化けしました。ページ内容を編集したい場合はWAF設定画面の「Custom response bodies」から作成した設定を選び「Edit」から編集できます。

使ってみた所感

リッチページを表示させるならCloudFront+S3を使う
WAFブロック時のエラーページはCloudFront+S3を使う方法もあります。こちらの方がS3に静的コンテンツを配置できますので一般的なユースケースに向いています。
AWS WAFのブロック時にカスタムエラーページを表示する
Sorryページではない
サイトがダウンしたときに表示させるSorryページのような使い方はできません。CloudFrontとS3を使って実装する形となります。その方法は以下の記事が参考になります。
CloudFrontを利用してオリジンサーバー障害時にS3上のコンテンツを表示する

最後に

カスタムエラーページ表示は無事できました。以前、某社のロードバランサでSorryページを設定したことがあるのですが、その時のWebページの最大サイズが200Byte(KByteじゃないよByteだよ)で文字数と表現のはざまで格闘した覚えがあります。（日本語は2バイト文字なので文章書くとすぐにサイズが足らなくなる）それに比べるとWAFのカスタムページは4KBと簡易的なページを表示させるなら十分なサイズです。何かのきっかけにこの機能を使うことになったら、その時は本記事を思い出していただけると幸いです。