Get Free Gatorade Water Bottles by Knowing your Tools
Just an hour ago I came across this sweet deal on Slickdeals for a customized Gatorade Water bottle for free.99!
So I went on the (super buggy) site, customized my water bottle, filled out the info, and clicked the giant submit button to cash in on my water bottle. I was stoked. There's nothing I love more than free shit. Earlier for dinner today, I even cashed in my free burger at the Habit. So two free things in one day?!?! I pretty much won the lottery.
Unfortunately, after submitting the form, the site kept throwing me an error. Damnit! I knew it was too good to be true!
Finding the root of the problem
At first, I thought that the server may be down or it may be overloaded with all the requests - cause let's be honest, I'm not the only person that loves free stuff. I was very adamant on getting this free water bottle. I would not be bested by this! That's when I thought to myself, Wait a second, I build web apps for a living....
So I pulled up the Chrome developer tools (Windows: [ctrl+shift+i] Mac: [cmd+opt+i]) and tried to reverse engineer what was going on! I was ready to stay up trying to figure this out! Well as it turns out, I actually didn't have to do much investigating because they pretty much handed it to me on a silver spoon.
As you can see from the developer console, the site is trying to make an XHR request to an endpoint but it keeps failing because the construction of that request got messed up. What I also discovered is that they console log the exact Javascript Object that they were going to use to build the request. If you expand the object, you can find all the metadata needed to make the request (Object > config > data).
Okay, enough explaining, give me the answer!
Well, given that this is a plain'ol AJAX request to a server, and the Javascript object gave me all the info I needed, all I had to do was reconstruct the request. What's the easiest way to do this? Let's bring in one of my favorite tools: Postman.
Using Postman, I simply recreated the request by passing in the same JSON payload that was specified in the object. I also made sure to go through the form again and resubmit the request to refresh the recaptchaResponse, just in case there was some additional server-side validation. After creating the request and submitting it, I was rewarded with the following response.
Woot! That must a good thing right? But how do I know I got the bottle? Well, I honestly have no idea, but a minute later, I received the following email, which was the same email that some of my peers received when they were able to successfully submit the form through the website.
Too lazy to construct this request yourself? Well here's a link that will automatically import this request to your Postman app. I'm giving this to you also for free.99! So get it now or else it's going to disappear like hotcakes!
You can watch this quick video (which I also already timestamped for you) on how to import the collection.
That wasn't very extraordinary...
It wasn't! Any front-end engineer or any web developer could have done the same! So why write a post about it? Well, I want to convey how productive you can be if you are aware of and know how to take advantage of the tools and system you're working in. I have worked with many software engineers (at varying levels from entry/senior/staff) who are still not knowledge experts in the space or even aware of the tools available.
A happy and productive engineer is an engineer who will make the biggest impact and succeed. So the moral of the story is to know your tools to enable you to work the most effectively. Another lesson...is to not log in the console when you go to production. It also helps not to ship broken code... but then I wouldn't have this blog post!
