--- title: Serving challenges with interstitial pages summary: null url: >- https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/serving-challenges-with-interstitial-pages --- Client challenges can be served on an [interstitial page](https://en.wikipedia.org/wiki/Interstitial_webpage) or embedded within a [page of your web application](https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/embedding-challenges-in-pages). With the interstitial page presentation method, client challenge management remains in the control panel you use to access the Next-Gen WAF. It is the only presentation method that supports [all challenge types](https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/about-client-challenges/#challenge-types). > **HINT:** Have a React or single-page application? Embed a [dynamic challenge](https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/embedding-challenges-in-pages) within your web application. React and single-page applications don't handle interstitial pages well. ## Prerequisites Before you add a client challenge, you must: - purchase [Bot Management](https://docs.fastly.com/products/bot-management) and [Fastly Next-Gen WAF](https://docs.fastly.com/products/fastly-next-gen-waf) for deployment on Fastly's Edge Cloud. The [Essential platform](https://docs.fastly.com/products/fastly-next-gen-waf#feature-availability) for the Next-Gen WAF does not support Bot Management. - [deploy Bot Management](https://www.fastly.com/documentation/guides/security/bot-management/about-bot-management/#deploying-bot-management) using post-cache inspection on each CDN service where you intend to use client challenges. Compute services are not supported. - [enable client challenges](https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/about-client-challenges/#enabling-client-challenges) on the service where you intend to use them. ## Adding challenges To serve a challenge on an interstitial page, complete the following steps: ### Next Gen Waf Control Panel 1. Log in to the [Next-Gen WAF control panel](https://dashboard.signalsciences.net). 2. From the **Sites** menu, select a site if you have more than one site. 3. From the **Rules** menu, select **Site Rules**. 4. Click **Add site rule**. 5. In the **Type** area, select **Request** or **Rate limit**. For information about each [rule type](https://www.fastly.com/documentation/guides/next-gen-waf/rules/about-rules/#rule-types), check out our [Working with request rules](https://www.fastly.com/documentation/guides/next-gen-waf/rules/working-with-request-rules) and [Working with advanced rate limiting rules](https://www.fastly.com/documentation/guides/next-gen-waf/rules/working-with-advanced-rate-limiting-rules) guides. 6. In the **Conditions** area, define where the rule should send the challenge. For example, to send a challenge to all request traffic destined for `www.example.com/login`, create the following conditions: | Condition | Field | Operator | Value | | --------- | ------ | -------- | ----------------- | | 1 | Method | Equals | GET | | 2 | Domain | Equals | `www.example.com` | | 3 | Path | Equals | `/login` | 7. _(Optional)_ In the **Conditions area**, add conditions to restrict when the rule should send the challenge. For example, if you don't want to send challenges to requests with the `VERIFIED-BOT` signal, add the following condition: - From the first **Field** menu, select **Signal**. - From the first **Operator** menu, select **Does not exist where**. - Select **All** to specify that a request must meet every condition. - From the second **Field** menu, select **Signal Type**. - From the second **Operator** menu, select **Equals**. - From the **Value** menu, select **Verified Bot**. In the Next-Gen WAF control panel, the settings would appear like this: ![Verified bots condition group](/img/ngwaf/verified-bot-condition-group.png) 8. In the **Actions** area, define the [type of challenge](https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/about-client-challenges/#challenge-types) the rule should send. | Challenge type | Actions area | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Dynamic challenge | From the **Action type** menu, select [**Dynamic challenge**](https://www.fastly.com/documentation/guides/next-gen-waf/rules/about-rules/#action-types). | | Non-interactive challenge | From the **Action type** menu, select [**Browser challenge**](https://www.fastly.com/documentation/guides/next-gen-waf/rules/about-rules/#action-types) and leave the **Allow Interactive** switch disabled. | | Interactive challenge | From the **Action type** menu, select [**Browser challenge**](https://www.fastly.com/documentation/guides/next-gen-waf/rules/about-rules/#action-types) and enable the **Allow Interactive** switch. | 9. Fill out the fields in the **Details** area as follows: - In the **Description** field, enter a description for the rule. - Leave the **Status** switch for the rule enabled. 10. Click **Create site rule**. ### Fastly Control Panel 1. Log in to the [Fastly control panel](https://manage.fastly.com). 2. Go to **Security** > **Next-Gen WAF** > [**Rules**](https://manage.fastly.com/security/ngwaf/rules). 3. From the workspaces bar, click the menu Menu icon to the right of the workspace name and select a workspace. 4. Click **Add workspace rule**. 5. In the **Type** area, select **Request** or **Rate limit**. For information about each [rule type](https://www.fastly.com/documentation/guides/next-gen-waf/rules/about-rules/#rule-types), check out our [Working with request rules](https://www.fastly.com/documentation/guides/next-gen-waf/rules/working-with-request-rules) and [Working with advanced rate limiting rules](https://www.fastly.com/documentation/guides/next-gen-waf/rules/working-with-advanced-rate-limiting-rules) guides. 6. In the **Conditions** area, define where the rule should send the challenge. For example, to send a challenge to all request traffic destined for `www.example.com/login`, create the following conditions: | Condition | Field | Operator | Value | | --------- | ------ | -------- | ----------------- | | 1 | Method | Equals | GET | | 2 | Domain | Equals | `www.example.com` | | 3 | Path | Equals | `/login` | 7. _(Optional)_ In the **Conditions area**, add conditions to restrict when the rule should send the challenge. For example, if you don't want to send challenges to requests with the `VERIFIED-BOT` signal, add the following condition: - From the first **Field** menu, select **Signal**. - From the first **Operator** menu, select **Does not exist where**. - Select **All** to specify that a request must meet every condition. - From the second **Field** menu, select **Signal ID**. - From the second **Operator** menu, select **Equals**. - From the **Value** menu, select **Verified Bot**. In the Fastly control panel, the settings would appear like this: ![Verified bots condition group](/img/ngwaf/verified-bot-condition-fcp.png) 8. In the **Actions** area, define the [type of challenge](https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/about-client-challenges/#challenge-types) the rule should send. | Challenge type | Actions area | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Dynamic challenge | From the **Action type** menu, select [**Dynamic challenge**](https://www.fastly.com/documentation/guides/next-gen-waf/rules/about-rules/#action-types). | | Non-interactive challenge | From the **Action type** menu, select [**Browser challenge**](https://www.fastly.com/documentation/guides/next-gen-waf/rules/about-rules/#action-types) and leave the **Allow Interactive** switch disabled. | | Interactive challenge | From the **Action type** menu, select [**Browser challenge**](https://www.fastly.com/documentation/guides/next-gen-waf/rules/about-rules/#action-types) and enable the **Allow Interactive** switch. | 9. Fill out the fields in the **Details** area as follows: - In the **Description** field, enter a description for the rule. - Leave the **Status** switch for the rule enabled. 10. Click **Create workspace rule**. After adding a challenge, you can optionally: - [Add a custom logo](https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/serving-challenges-with-interstitial-pages#adding-custom-logos) to the interstitial page where the challenge is served. - [Set up rules](https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/blocking-requests-with-invalid-challenge-tokens) to block requests from clients that failed a challenge. ## Adding custom logos Challenges support displaying a custom logo allowing you to customize challenge pages with your own branding instead of the default Fastly logo. They automatically attempt to load a custom logo from the path: ```text /fastly/logo ``` This path does not need to physically exist and can be handled via a [URL rewrite](https://www.fastly.com/documentation/solutions/examples/rewrite-url-path/). The challenge container adjusts the logo’s size automatically, with the default image size being approximately 300x300 pixels. If the path fails to load, the challenge will fall back to the default Fastly logo. To provide a custom logo, add the following VCL snippet in the `vcl_recv` subroutine. This example rewrites `/fastly/logo` to load an image from your origin: ```vcl # Redirect custom logo requests to the correct path on the customer origin if (req.url ~ "/fastly/logo") { set req.url = "/static-assets/challenge-robot.jpg"; } ``` Be sure to replace `"/static-assets/challenge-robot.jpg"` with the actual logo URL on your origin. ## Related content - [About client challenges](https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/about-client-challenges) - [Blocking requests with invalid tokens](https://www.fastly.com/documentation/guides/security/bot-management/client-challenges/blocking-requests-with-invalid-challenge-tokens)