loader
Introduction to Hacking Websites with JavaScript

Introduction to Hacking Websites with JavaScript December 31, 2016

In this introductory article, I’m going to show you how to use JavaScript to hack some custom functionality into Google’s search results pages.

JavaScript is a huge, ginormous topic, so instead of concentrating on teaching JavaScript fundamentals, I’m going to give you a scenario, show you my solution, explain some things along the way, and ultimately send you off with a handful of excellent resources.

Last of note, I’ll be using Google Chrome as my browser of choice throughout the examples below, so if you don’t use Chrome, I highly encourage downloading and installing it to follow along.

To the Google Machine

Alright, to set up our scenario, let’s say you’re an online investigative journalist and your task is to dig up some juicy, confidential documents on Microsoft. You start by going to Google and doing a search for this query: Microsoft Confidential | NDA 2017 filetype:pptx | filetype:docx | filetype:pdf

google-serps-01

For the curious, that query says this to Google: “Hey, Google. It’d be great if you showed me results containing only documents with the file types .pptx (PowerPoint), .docx (Microsoft Word), or .pdf (Adobe Acrobat) — any of which containing the words “Microsoft” and “Confidental” or “NDA,” and the number 2017. kthxbai.”

With results on-screen, you hover over a link and look in the bottom left-hand corner to confirm it leads straight to a document. It does, so you right-click on the link, choose save-as and — uh oh — you find that Google doesn’t let you do that as this is the file it asks if you’d like to save:

nope-lol

You cancel the save, then hover over the same link again, look in the bottom left-hand corner, and see that the URL is all obfuscated now. “What the deuce, Google?” you think to yourself as your inner hacker begins to grow restless…

JavaScript, FTW!

What we’re going to do now is make it such that when we right-click and save-as on any link in Google’s search results, instead of url.htm, we’re offered to save the file we expect — and JavaScript is how we’re going to make that happen!

With that goal in mind, we begin by taking a look at the source code of that page of search results to see if we can start figuring out what’s going on. It could be something REEEEALLY complicated standing in our way (what with this being the massively complex Google and all), but spoiler alert: unlike those really awkward relationships we all had as teenagers, it’s not complicated! w00t!

The first thing to do is right-click on the page of search results, then choose to view source. We’re immediately inundated with a page full of this:

wat

Welp, since we’re not going to get anywhere fast with that, we now press the F12 key (Cmd+Opt+I on Mac) to bring up Google Chrome’s wondrous tool, Inspector. In this place, you will do many things — one of those things being 1337 h4x, so prepare to spend a ton of time in Inspector on your journey through hacking sites. Also, do yourself a large and watch this video later to become an absolute pro with Inspector.

Anyway, in Inspector, you can hover over various elements of a page and glean how it’s structured. We’re interested in the search results links, so let’s press Ctrl+Shift+C (Cmd+Shift+C on Mac) to enable the “inspect element” mode, then hover the mouse pointer over one of the links and click.

First we hover.

After clicking on that link, we now see the following in Inspector:

inspector-elements

Alright, two interesting things we see are a URL to the document we want, and an onmousedown event attribute which appears to return the result of a ton of arguments (one of which is the URL we’re interested in) being passed through a function called rwt.

Bearing that in mind, we inspect another link on the page and find the same thing. Huzzah! This means we have a repetitive pattern we can follow with each element.

Taking a look at Mozilla’s JavaScript Developer Reference for onmousedown, we see the following description under the Notes section:

The mousedown event is raised when the user presses the mouse button.

Putting two and two together, we now have a pretty good understanding of what’s going on with Google’s link/URL behavior. When hovering over a link before clicking on it, the URL we see is the actual URL to the document; however, once we click on a link, that onmousedown event fires and permanently modifies the link. That’s why the URL ended up looking all funky after we tried to right-click, save-as the first time.

Now wouldn’t it be great if we could just…get rid of that whole onmousedown thing altogether for every link on the page? LET’S DO IT!

Down in Inspector, you’ll see a tab titled Console. Click that. Now click to the right of the > that appears and here’s where we’ll type some JavaScript to make stuffs happen™.

console

The first thing we want to type into the console is the following (hit Enter afterward):

var linkArray = document.getElementsByTagName(‘a’);

What that essentially does is dig through the entire page looking for every a element (those are the elements used in HTML to create links), then stores the results. What we get is an array (which is just a list of stuff) of all the a elements on the page, stored in one handy location for us to reference: a variable (var) that we’ve created and named linkArray.

To make that loosely analogous to something, imagine you have a room full of people sitting at tables. You then carry a piece of paper around and write down each person’s name, attributes (hair color, eye color, age, etc.), and where they’re sitting. You now have this convenient list to quickly reference whoever you want right where they are and change their attributes — even everyone at the same time, if you so choose.

That’s what we’ve done with each link on the page of search results! So if we want to remove the onmousedown event attribute from all a elements, we have our list made that will allow us to complete the task. The variable linkArray is like the piece of paper containing our list, and document.getElementsByTagName(‘a’); is like the process of walking around with the specific task of taking note of each person’s name, attributes, and location.

Next up, we type the following in the console (again, hit Enter afterward):

var linkStrip = function () { for (var i = 0; i < linkArray.length; i++) { linkArray[i].removeAttribute('onmousedown'); } };

The way-too-wordy, technical explanation of what we’re doing there is declaring a variable called linkStrip, then assigning it an anonymous function which, when called (or “invoked”), will iterate through a for loop that acts on every item the index of the array we created, linkArray, by removing the onmousedown event attribute.

Instead of explaining all of that in depth, I’ll let you build your understanding of it by investing some time into researching these keyword terms in Google (tip: the highest-ranking result isn’t always the one that will provide the most clarity, if any at all):

By entering everything we have into the console thus far, we’ve essentially created a JavaScript bomb of sorts that’s going to blow up all the onmousedown crap we don’t want mucking up our search results, so all that’s left is to detonate that bad boy!

To proceed with said detonation, simply type the following into the console and then hit Enter:

linkStrip()

Your console should now look something like this after doing all of the aforementioned (don’t worry about what “undefined” means, but if you must know, there’s an omniscient, fancy-pants Google machine awaiting your consultation):

console-final

Now if you click the Elements tab at the top of Inspector, check out how our links look throughout that page of search results:

inspector-elements-onmousedown-removal

Success! We’re now able to directly save all the documents straight from that page of search results. This is amazing…right up until we head to page two of the search results and realize we have to do this process all over again.

While you can certainly just copy/paste everything to lessen the burden, a better solution is to create your own Chrome extension, or just use an already existing one that will automatically inject custom JavaScript into any page you want.

Conclusion

As you can see, JavaScript allows us to do some really cool stuff; however, digging back into my bag of analogies, all I’ve really done with this article is something akin to teaching someone a sentence in a foreign language that, when spoken, yields a particular result. There’s still the rest of the entire language to learn, including all of its grammatical nuances, contextual subjectivity in practice, etc.

To that end, this is by no means meant to be a comprehensive exposĂ© on JavaScript (or hacking, for that matter). In subsequent articles, I’ll dive into more exciting, “hacker-worthy” examples with the expectation that readers at least know the fundamentals of JavaScript.

In the meantime, for those who need it, below is a short list of resources to get you up and running.

Finally, there are approximately eight bajillion ways to solve any given problem with JavaScript, so I highly encourage you to take the problem in this article and make it your own.

Feel free to share your own solutions or thoughts via a comment below or by sending me an email to dsasmblr@gmail.com. Thanks for reading and happy hacking!

-Stephen

Stephen Chapman

@Chapman on Twitter | webcrawler on LinkedIn | dsasmblr via Gmail.

Hi! I'm Stephen and I'm a professional hacker (the news said so, so it must be true)! I love reverse engineering games and software protection schemes, and teaching others how to do the same via YouTube. I've presented at hacker and Internet marketing conferences, been rewarded in bug bounty programs, unearthed more PII via advanced search engine queries than you can shake a stick at, and a whole lot more. Feel free to say hi sometime via any of the avenues above!

2

  1. Chris Fayte • December 31, 2016

    Awesome stuff pal, really makes me want to research into this as well. I appreciate the work put in to this to share with others. Reply


  2. Jason Blount • January 1, 2017

    Excellent little tutorial, i never thought about using JavaScript in this way.I'm looking forward to more instalments.
    Great work Stephen. Reply


  3. Rake • January 1, 2017

    Great tutorial! I've been playing with the Chrome debugger a lot lately as I learn more web dev stuff. Userscripts are fun too. If you don't like part of a website, just change it :P Reply


Leave a Reply

DSASMBLR | 2016