Introduction
Hey everyone and welcome to this article on understanding source code. First, let me start by explaining that this article will not teach you to hack anything specifically, but it will give you the understanding you need to start to learn to hack.
Okay, first let me tell you a little about what source code is. Source code is the code behind every webpage. It is all the HTML and CSS and various other types of code that make up a website. A little knowledge of HTML would be helpful in understanding source code, but it is not entirely necessarry.
The next thing you will need to know is how to access the source code. With most web browsers it is as simple as a right click->View source code. If your browser does not have this option I suggest googling how to access source code on (your browser). There are also different shortcuts for accessing the source code quickly for example in Google Chrome the shortcut is “CTRL + U”
Now there are numerous add-ons to your browser that allow more advanced access to the source code such as “firebug” but for now I will just be teaching you the basics.
Okay so now we know how to access the source code go ahead and do it. I will wait here while you scratch your head trying to figure out what all this code means…. Back yet? Good! Ok now I know this looks very confusing but trust me, once you have got your head around it, it will all become much clearer!
First lets open up another tab and go to the [hackthis.co.uk] home page and access the source code. It should look something like this:
The first thing we see is a piece of code like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xml:lang="en" lang="en">
This small piece of code is just defining the document type and some protocols and doesn’t really yield much information that is relevent at this moment in time.
Next is the head section of the source code. You can tell this by what is known as the ‘Head tag’. In html every section is tagged with an open and closed tag.
<head> is the opening tag and is the beginning of the head section.
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-128839302-1');
ga('set', 'anonymizeIp', true);
if (typeof _gaqPageView != "undefined"){
ga('send', 'pageview', _gaqPageView);
} else {
ga('send', 'pageview');
}
</script>
</head> is the close tag and signifies the closing of the head section.
Anything in between these two tags is considered the head section. The head section is usually where the data is brought to the page. You dont normally actually see much of what is in the head section on the webpage. It is usually stuff like links that bring the CSS files to the page (style information), meta data (used for search engine stuff) and javascript (a type of code that helps make the page more interactive with stuff like pop-ups and making stuff on the page more dynamic). The head section can give you some useful information but for now we shall just move onto the next part.
Next comes some code that helps the webpage work better with different versions of internet explorer (this is necersary as internet explorer sucks and isn’t compatible with some code. If you are using internet explorer then I suggest you upgrade to firefox or google chrome).
Now I can’t sit here all day and explain what every part of this source code means but I will briefly explain what the most important parts mean.
Divs
Divs are what makes a webpage modular. Each div, like most other tags in the source code is opened by
of “div’s”.
The titles “hackthis” will be in one div, then the navigation bar will be in another div etc etc. Divs run like a book, left to right, so if there are 2 two different “parts” next to each ther the one on the left will usually come first in the source code. Divs are usually defined by either “class=” or “id=” after the word div like this:
<div class="title">Divs</div>
This would show that the div you are looking at would be the title div.
Comments
A very important thing to look for in the source code is a chunk called a “comment” these look this in HTML:
<!--any comment can by typed here-->
In other languages they can look different, for example in JavaScript:
/* this is a
multi-line comment */
// And this a single line comment
When you put anything in the source code in these tags, it will be ignored by the browser. Web developers use this to remind them about things in the code or to leave bits of information on the webpage without actually displaying them. Keep your eye out for these as sometimes they contain information that the coder didn’t mean for you to see!
Links
The last bit of code I shall mention in called “href”. This is simply a link. So if you see:
<a href="http://www.google.com">Google</a>
it will display a link on the page that says “Google” and when you click it, it would go to http://www.google.com
Recap
Ok, so thats about all that I will be saying about the coding of the source code.
So to recap:
To open the source code, right click anywhere on the website and click view source. The head section contains information such and style sheets(CSS) and meta info. Divs are what makes the webpage modular and easier to understand in the source code. Comments are used for information that is not meant to be seen by the end user href’s are used to make hyperlinks to other websites or another part of the website.
So now that you know what source code is, go out there and start looking at other websites source code! Like I said, there usually is much to hack within the source code but it may point you in the right direction. Now having read this, you should have enough knowledge to complete the first few main level challenges. So what are you waiting for?! Get in there and HACK!
