We use PCs, Laptops and smartphones to visit our favorite web sites. The technology is smart enough to present different layout for different devices. Many times I saw that when I enter the URL like mysite.com from my smartphone eventually I am redirected to m.mysite.com.
It is clear that something knows to identify that my device is not a desktop and redirects me to another location. But why should I hit the web server with a request that eventually does nothing but redirect? It consumes web server compute power, it consumes the traffic. It there a way to do this redirection at some early stage?
I will show you how to do it on the edge by using AWS WAF. It used for layer 7 protection, but there are specific features that can be used to achieve out goal.
First of all I will create a simple web site that can print "User-Agent" header. The simplest way to do it is by using Lambda and API gateway. The reason I choose the API Gateway is because it has an integration with AWS WAF.
My lambda code is very simple
export const handler = async(event) => {
// TODO implement
const response = {
statusCode: 200,
body: '<html><script type="text/javascript" src="https://74f7043f5910.us-east-1.sdk.awswaf.com/74f7043f5910/c3757efb1817/challenge.js" defer></script>'+JSON.stringify(event.headers["User-Agent"])+'</html>',
headers: {
"Content-Type": "text/html"
}
};
return response;
};
And if I access the API gateway URL I see the following output from my desktop:
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36"
and if I access it from my smartphone I get
"Mozilla/5.0 (Linux; Android 12; M2011K2G) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Mobile Safari/537.36"
User-Agent clearly identifies what is the source device.
I also created another Lambda. It will simulate my redirected mobile website. I will use "Lambda Function URL" since it is the fastest way to to access this lambda by URL
export const handler = async(event) => {
// TODO implement
const response = {
statusCode: 200,
body: '<html>I was redirected</html>',
headers: {
"Content-Type": "text/html"
}
};
return response;
};
The result looks like
So the flow that I expect to have is the following.
I will open my smartphone and access the API Gateway URL. I will put a WAF rule that checks if my User-Agent contains "Android" and the Host header contains the URL of the API Gateway. If this happens I will redirect to my second Lambda to simulate redirection to the mobile web site.
Lets create the WAF
Next step is to associate it with API Gateway
Create a new rule that checks the User-Agent and performs the redirection.
My WAF rule has 2 statement and one redirect action:
For redirection it is just fine.But since we are talking about WAF I also want to show an additional power of AWS WAF.
What is some bot starts to probe our web site? Bot can simulate different User-Agents, we don't want to "spend" the traffic handling redirects from bots.
We can avoid it by using AWS WAF Managed rules.
If you checked the first lambda code carefully you probably notices that my simple HTTP script also contains this javascript
<script type="text/javascript" src="https://74f7043f5910.us-east-1.sdk.awswaf.com/74f7043f5910/c3757efb1817/challenge.js" defer></script>
Why do we need this script? We need it since this is a way AWS WAF can check if connected client is a valid one or some malicious client. This script is mandatory if you want to enable bot protection and should be enabled in "Application Integration SDK"
Once we have it in out web page we can define the proper WAF rule.
Create new managed rule:
Select and edit the bot control rule:
Choose "Override to challenge" the following settings:
Save the rule and make him the first in the list of the rules
If bot detected, the WAF sets something called "label". You can read about labels
here
Now we will add an additional statement to our custom rule to perform the action only if the label was not set which proves that the request was made by a human.
We will not see any difference in the response. I am still redirected from my smartphone to the lambda that simulates my mobile web site when I access API Gateway URL, but this time I also have a bot protection in place.
The last thing I wanted to show is if you did everything correctly, by setting the challenge javascript you will see the following in the Browser network inspector.
You can see "verify" request. It is the request that is used by the WAF to verify that the connection is done by human and not bot.
You can read more about AWS WAF challenge
here.
No comments:
Post a Comment