Getting started
Basics
Domains & Origins
Performance

Configuration
Basics
Conditions
Dictionaries
Domains & Origins
Request settings
Cache settings
Headers
Responses
Performance
Custom VCL
Image optimization
Video

Security
Access Control Lists
Monitoring and testing
Securing communications
Security measures
TLS
Web Application Firewall

Integrations
Logging endpoints
Non-Fastly services

Diagnostics
Streaming logs
Debugging techniques
Common errors

Account info
Account management
Billing
User access and control

Reference

    Creating a custom WAF error page

      Last updated November 01, 2018

    You can create a custom HTML error page that will be presented to users who are blocked by the Fastly WAF response object. The attributes of the response object include the HTTP status code, the HTTP response text, the content type, and the returned content.

    For this example, we'll:

    The error page will display the transaction ID, something that might be useful if, for example, the user decides to contact your support team.

    Creating a dynamic VCL Snippet

    To create a dynamic VCL Snippet for the transaction ID, make the following API call in a terminal application:

    1
    
    curl -X POST -s https://api.fastly.com/service/<Service ID>/version/<Editable Version Number>/snippet -H "Fastly-Key:FASTLY_API_TOKEN" -H 'Content-Type: application/x-www-form-urlencoded' --data $'name=my_dynamic_snippet_name&type=recv&dynamic=1&content=if (!req.http.x-request-id) {\n set req.http.x-request-id = digest.hash_sha256(now randomstr(64) req.http.host req.url req.http.Fastly-Client-IP server.identity);\n}'
    

    Creating a synthetic response

    To create a synthetic response for the custom HTML error page, follow the steps below:

    1. Log in to the Fastly web interface and click the Configure link.
    2. From the service menu, select the appropriate service.
    3. Click the Configuration button and then select Clone active. The Domains page appears.
    4. Click the Content link. The Content page appears.
    5. Click the Set up advanced response button. The Create a synthetic response page appears.

      the Create a synthetic response page

    6. Fill out the Create a synthetic response fields as follows:
      • In the Name field, type WAF_Response.
      • From the Status menu, select 403 Forbidden.
      • In the MIME Type field, specify the Content-Type of the response (e.g., text/html).
      • In the Response field, enter the following HTML. This response will display the value of req.http.x-request-id.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      
      <html>
        <head>
          <title>403 Forbidden</title>
        </head>
        <body>
          <p>The requested URL was rejected.</p>
          <p>For additional information, please contact support and provide this reference ID:</p>
          <p>"} req.http.x-request-id {"</p>
          <p><button onclick='history.back();'>Go Back</button></p>
        </body>
      </html>
      
    7. Click the Create button. Your new response appears in the list of responses.
    8. Click the Activate button to deploy your configuration changes.

    Additional notes

    Back to Top