In this post I’ll describe not only how I figured out how to make work meetings more amusing, but more importantly, how to use Google Dev Tools to figure out the inner workings of a webpage.
What is sli.do?
Sli.do is a popular audience interaction tool, commonly used for Q & A sessions where audience members can upvote their favorite questions. The questions with the top votes rise to the top of the list. Folks can easily participate by typing in an event id — no account creation necessary.
Background
A company I know uses this tool a lot. I often wondered what would happen if somebody decided to upvote a ridiculous question to the top of the list. During one particularly slow meeting, I discovered that if I deleted the authorization token that sli.do stored in Local Storage and refreshed the page, I could upvote the same question again.
Unfortunately, this process would be too tedious and slow to vote a question to the top in a room full of 500 people.
Revealing the magic
I knew that there was some sort of AJAX magic happening because the UI was smooth, responsive, and required no hard refreshes. I started by opening the Chrome dev tools network tab, selecting XHR, and refreshing the page. All requests by the Javascript on the page is captured by this tool. I saw the following:
As you can see above, there’s a lot going on, but the most important is probably that auth request. To see more information about a particular request, all we have to do is click the name. By clicking on the Headers/Preview tabs we learn that this was a POST request and the response was a JSON object containing access_token, event_user_id, and event_id.
We know the access_token must be used for something important. A common technique is to put that access token in the authorization header of subsequent requests to the API. We can click on the requests for user, activity, and questions in dev tools and learn that the access token is indeed used in this way.
Finally, we want to see what actually happens when we “upvote” a question. With the dev tools Network XHR tab still open, we upvote a random question and see that a POST request is made to endpoint events/event_id/questions/question_id/like with a payload of {score:1}. The event_id matches the one returned by that first auth request. Interestingly enough, this event_id does not correspond with the id that a user would type to join the Q & A session. Furthermore, the access_token we saw earlier is used in the authorization header of this request as well.
We now know that an HTTP request is made to auth, which returns an access token that is then used for all question upvotes. To upvote a question we need an access token, an event id, and a question id. We also know that users are restricted from voting more than once for the same question by the same access token being stored in Local Storage.
Now we have all the information we need to figure out a way of programmatically upvoting a question on sli.do.
Automating the upvote
I built a Node CLI to automate these requests as many times as you want. You can check it out at my Github repo slido-fun.