Customize your attack response page with F5 Essential App Protect Service
Security is a very important aspect of creating and running a web application, which is why we created the Essential App Protect Service. This SaaS solution is quick to setup—just a few clicks—and easy to work with. Best of all, when someone tries to attack your application, you get notified and they get blocked.
Sometimes, though, a would-be attack is a false positive or an interface error causing a legitimate user to get blocked. For those times, Essential App Protect puts up a message letting the user know that there’s a problem. Here’s the default:
That’s functional, but it looks generic and boring—almost like the operating system is broken rather than the web application can’t understand what you are trying to do. A better solution is for the application developer to create a branded page that looks like the web application and gives the user an idea of what to do next—assuming it was not an actual attack.
Essential App Protect offers this capability by allowing you to supply an attack response page. Let’s start by looking at our BuyTime demo site:
Like you, we put some time and effort into a nice-looking site with some strong branding elements. We thought it would be fun to tell the user something went wrong in an interesting way that tied into our branding. Here’s what a user will now see in a browser if Essential App Protect blocks their request:
Making this change is easy in Essential App Protect, whether you are using the Cloud Services portal in a browser or the declarative API as part of your CI/CD process. The three easy steps below will show you how we updated the attack response page in Essential App Protect.
1. Create your attack response web page.
This is the web page you want to display to your user in case Essential App Protect blocks the user’s request. You can also provide a support ID for the blocked request. This will enable you to find the specific event in the portal or API, all the details about the request, and why it was blocked. If you would like to show a support ID to the user, you can add “<%TS.request.ID()%>” into your html file, and Essential App Protect will replace that string with the support ID. Here is a simple example of a response page using the support ID:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("Auction-warp.jpg");
background-color: #4e4d52;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: contain;
}
</style>
</head>
<body>
<p style="font-family:Futura BT,Arial;color:white;text-align:center;font-size:200%;">We seem to be in a <span style="color:#0da95e;font-size:150%;">TIME WARP!</span><br>Contact support with this ID:<br><span style="font-size:50%;"><%TS.request.ID()%></span></p>
</body>
</html>
Alternatively, you can create a simple redirect to a more complex web page and pass the support ID as a parameter like this:
<!DOCTYPE html> <html> <head> <meta http-equiv="Refresh" content="0; url=http://www.mywebsite.com/myresponse.html?ID=<%TS.request.ID()%>" /> </head> </html>
2. Convert the HTML source for a JSON string
Because you will provide this source as a JSON string variable, the content of that string needs to be properly escaped. Using the first example, the string becomes this:
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody { \r\n background-image: url(\"Auction-warp.jpg\");\r\n background-color: #4e4d52;\r\n background-repeat: no-repeat;\r\n background-attachment: fixed;\r\n background-position: center; \r\n background-size: contain;\r\n}\r\n</style>\r\n</head>\r\n<body>\r\n<p style=\"font-family:Futura BT,Arial;color:white;text-align:center;font-size:200%;\">We seem to be in a <span style=\"color:#0da95e;font-size:150%;\">TIME WARP!</span><br>Contact support with this ID:<br><span style=\"font-size:50%;\"><%TS.request.ID()%></span></p>\r\n</body>\r\n</html>
The easiest way to convert your HTML source is to use one of the free on-line converters, such as https://jsonformatter.org/json-escape.
3. Tell Essential App Protect to use your response source rather than the default.
This is done by adding a mitigation section to the policy section of your existing JSON configuration. It contains two fields:
- “response_page_html” – this holds the code for your response page
- “type” – this will be “response_page”
If the mitigation section is not is not present, the default response page will be shown. Here is the mitigation section we’ll add:
"mitigation": {
"response_page_html": "<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody { \r\n background-image: url(\"Auction-warp.jpg\");\r\n background-color: #4e4d52;\r\n background-repeat: no-repeat;\r\n background-attachment: fixed;\r\n background-position: center; \r\n background-size: contain;\r\n}\r\n</style>\r\n</head>\r\n<body>\r\n<p style=\"font-family:Futura BT,Arial;color:white;text-align:center;font-size:200%;\">We seem to be in a <span style=\"color:#0da95e;font-size:150%;\">TIME WARP!</span><br>Contact support with this ID:<br><span style=\"font-size:50%;\"><%TS.request.ID()%></span></p>\r\n</body>\r\n</html>",
"type": "response_page"
},
To add your response page through the portal, add the mitigation section to the JSON configuration as shown below:
Adding the response page through the API is very similar. You will use the following request to update your subscription with the added mitigation section as shown below:
PUT https://api.cloudservices.f5.com/v1/svc-subscription/subscriptions/{subscription_id}
Payload:
{
"service_type": "waf",
"service_instance_name": "My Site",
"configuration": {
“waf_service”: {
“application”: { … },
“industry”: “finance”,
"policy": {
"encoding": "utf-8",
"compliance_enforcement": { … },
"high_risk_attack_mitigation": { … },
"malicious_ip_enforcement": { … },
"mitigation": {
"response_page_html": "<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody { \r\n background-image: url(\"Auction-warp.jpg\");\r\n background-color: #4e4d52;\r\n background-repeat: no-repeat;\r\n background-attachment: fixed;\r\n background-position: center; \r\n background-size: contain;\r\n}\r\n</style>\r\n</head>\r\n<body>\r\n<p style=\"font-family:Futura BT,Arial;color:white;text-align:center;font-size:200%;\">We seem to be in a <span style=\"color:#0da95e;font-size:150%;\">TIME WARP!</span><br>Contact support with this ID:<br><span style=\"font-size:50%;\"><%TS.request.ID()%></span></p>\r\n</body>\r\n</html>",
"type": "response_page"
},
"threat_campaigns": { … },
}
}
}
}
After you press the Update button in the portal or issue the API request, it will take 15 seconds or so for the change to take effect.
Now you can have your own attack response page and make it as direct or as creative as you want.