AWS WAFのブロック時にカスタムエラーページを表示する

AWS WAFが通信をブロックすると、ユーザーには「403 Forbidden」という味気ないメッセージが表示されます。CloudFrontのカスタムエラーページを使うと、ユーザーが用意したhtmlファイルの内容を表示できます。

標準のエラー画面

WAFがブロックすると、ブラウザには「403 Forbidden」と表示されます。一般のエンドユーザーにはわかりづらいかもしれません。

ご紹介するカスタムエラーページを使うと、以下のようにユーザーが用意した内容を表示できます。

構成図

カスタムエラーページの表示にはCloudFrontとS3を使います。S3に「forbidden.html」をアップロードしておきます。検証環境では、ALBにWAFを適用しました。

forbidden.htmlは以下の内容で、S3バケット直下に配置しました。

<!DOCTYPE html>
<html>
<head>
  <title>403</title>
  <meta http-equiv="content-type" charset="utf-8">
</head>
<body>
  <h1>403エラー</h1>
  <p>myname@example.jpまでご連絡ください</p>
 </body>
</html>

CloudFrontの設定

ALBオリジンと、S3オリジンを作成します。

BehaviorsではデフォルトをALBオリジンに、forbidden.htmlはS3オリジンにルーティングします。

Custom Error Responseの設定です。AWS WAFでブロックすると、ALBはHTTPステータス403を返します。カスタムエラーページで403の時に、 /forbidden.htmlを表示させます。

以上で設定完了です。

動作確認用のWAFルールを作成する

参考までに、動作確認のルールの作り方をご紹介します。Stringコンディションを作成します。URIにtabooが含まれているかという条件にしました。

ルールを作成し、先ほど作成したコンディションをdoesで指定します。URIにtabooが含まれている時に一致するルールになります。

WebACLで作成したルールをBlock requestsにします。

https://www.example/tabooのようにtabooをつけて接続すると、AWS WAFでブロックされます。

注意点

CloudFrontは、オリジンによって返された403と、AWS WAFが返す403を区別できません。ステータスコード403で複数のエラーページを表示できません。アプリケーションが出す403とAWS WAFが出す403は同じエラーページを表示することになります。

最後に

AWS WAFで誤ってユーザーの正しい通信をブロックした際に、カスタムエラーページを表示する方法をご紹介しました。

参考