Category: Articles

Although I covered the details of Hacking using SQL Insertion attacks the other day, but I these videos popped up in my youtube suggestions today, both from Computerphile (always worth watching if you’ve any interest in computing), but one of them by the always watchable John Scott (if you don’t watch his videos already, then have a look, there’s some amazing and fascinating stuff in there, and you can quickly lose an hour or two).

But have a watch, they both probably explain things a load better than I managed (even if they both call it SQL Injection, where I’ve always called it SQL Insertion).

 

Okay, I’m not really going to teach you how to be a hacker, but I am going to share one of the most common hacking techniques used.

In my last blog entry What is PHP and what is MySQL?, I described how PHP and MySQL could be used to get information from a Database, by using

SELECT {data} FROM {database} WHERE {something};

Well, one of the most common uses for this is to get your username and password from the database. So when you typed in your {username} and {password}, then PHP would take that, and build a query to the databse, something like.

SELECT `usernumber` FROM `userdatabase` WHERE `username` ='{username}' AND `password`='{password}';

Which looks pretty straightforwards, it takes what the user has entered as {username} and {password} and puts them into the query, and brings back the usernumber. If there’s a usernumber returned, then you know that the {username} and {password} matched.

So if for example the userdatabase looks like.

usernumber       username          password
1                bob               ice cream
2                jeff              hatstand
3                hughbert          qwerty

And the user enters their name to be “bob”, and their password to be “ice cream”, then PHP takes their entered data and makes a query which looks like

SELECT `usernumber` FROM `userdatabase` WHERE `username` ='bob' AND `password`='ice cream';

Which returns usernumber 1, because that is the record that matches both the username and password.

If the user enters their name as “jeff” and their password as “qwerty”, then PHP takes that and makes a query

SELECT `usernumber` FROM `userdatabase` WHERE `username` ='jeff' AND `password`='qwerty';

Which will return “null” which is similar to zero, but different in computing terms, but similar enough that we don’t want to have a record 0 in the database to avoid confusion. It returns “null”, as while both “jeff” and “qwerty” are in the database, there is no single record which has both in it.

And that’s the way many websites check whether you are a valid user, by checking that there is a record for both your username and password.

However, what happens if you enter your username as “bob”, and your password as “‘ OR1=1;”. PHP takes that, and makes a query that looks like

SELECT `usernumber` FROM `userdatabase` WHERE `username` ='bob' AND `password`='' OR 1=1;';

So the database returns the usernumber as 1. Because it’s looking for the record where the username is bob, and the password equals ” (which is blank) or 1=1. Well, bob’s password doesn’t equal ” (blank), but 1 always equals 1, so the database has found a match. The database treats a semicolon as the end of the query, so ignores the trailing ‘;

So that lets a hacker access a system if they know a username to match up to, which shouldn’t be too hard, but even that seems like a lot of work, there must be an easier way.

So if that works, what happens if you enter your username as “‘or 1=1;” and your password as “‘or 1=1;”, then PHP makes a query that looks like

SELECT `usernumber` FROM `userdatabase` WHERE `username` ='' or 1=1;' AND `password`=''or 1=1;';

The database returns usernumber 3 (or maybe 1 depending on the method used, but usually 3).

Why?

Because it’s ignoring everything after the first semi colon, so it only looking for the username to be equals to “” (blank) or 1 equalling 1. Which means every single record in the database is valid, and the database returns record after record until it reaches the last one (in this case 3).

So you get logged in as usernumber 3, and you are now an elite hacker (just kidding, but you do now know one of their key tricks to gain access to a website).

This is called a SQL Insertion Attack, and obviously there are ways to avoid this, and every serious website has now put in place protection against this. The most obvious way is to cleanse your inputs, looking at the data that the user has entered into the username and password fields, and not trusting it. Going through it and removing characters such a quotes and other odd symbols, which have other meanings to computers, which is why many websites tell you that your username and password can only consist of a-z and 1-0, so there can be no confusion between a user who has put in a username of “; delete database;” and the command to delete the database.

Other ways consist of changing every character from it’s normal typed version, into the character codes that the computer uses, so that there can be no confusion about what is user entered data, and what is database instruction.

One final trick I like adding to the above, is to count how many results are returned from the database, as there should never be more than 1 person with each username/password combination, so if the database returns multiple records, then this is probably a sign that something like the above attack has returned all the user records from the database, so should probably be blocked as an attempted breach of the system by a hacker.

But despite this attack being well known, and there being a variety of solutions which are equally well known, it’s still remarkably common in websites, I encountered it in a national stores website fairly recently (I of course notified them immediately)

It must also be noted, that cleansing inputs should be done for all user side data, whether it’s entered in a password box, a search box, from a cookie stored on the users computer, or data passed from page to page. As all of these can be altered by a hacker, and be used to insert commands into the database. An old website of mine encountered this problem recently, when the only input on the entire site which wasn’t be cleansed was the result from a user selecting which letter of the alphabet they wanted to see results from. This was enough for hackers to insert commands to the database, and see the full list of usernames and be able to log in.

While PHP and MySQL are powerful tools, which allow construction of websites easily and quickly, the devil is as they say in the details, and securing your website, and your users details against a rogue hacker is important and time consuming, but well worth doing.

So in previous posts I’ve covered the “Front-End” technologies, which present information to a user, but the real powerhouse behind the web, are the “Back-End” technologies, amongst the most popular of which are PHP and MySQL. I’m putting these both in one post, as they go closely hand in hand, working together closely.

PHP, originally stood for Personal Home Page, but now it is just a name in itself. And it is a scripting language that runs on web servers putting together the web pages, before they are sent to the user.

A scripting language differs from other programming languages, in that it generally runs through from the beginning to the end like a script, rather than running until you quit it, like other computer programs. Due to this, PHP scripts will generally have a execution time, so that they abort if they’re running too long, as users won’t want to wait forever to see the web page they’ve asked for.

So, in the post about HTML, I went through how a web page is made from text formatted using HTML, in a very similar fashion to a text document. However, if you’ve used the web for any amount of time, you’ll have noticed that certain web pages appear different to different people, and different whenever you view them. So when you log into facebook, you get all your friends posts and cat videos, but everyone else gets their own friends posts and cat videos.

This is done on the server, where the web page you see is only the result of code that puts it together from bits. The code reads your log in information, detecting who you are, and then looks to see your facebook friends, then goes through their posts adding them to the page that is served to you. It reads all this information from a database.

PHP is the code that runs on the server, running from the beginning of it’s script to the end, sometimes loading other PHP files to add functionality as it is required.

Now while PHP is the language used to build the pages, a lot of the hard work comes from the database, which is commonly MySQL

MySQL (Structured Query Language) is a database system used to store, organise and retrieve information quickly, and much of the data on the internet will be stored in a database. SQL is a language which allows you to retrieve data from the database, usually by using the command SELECT.

Selecting data is generally in the format of

SELECT {data} FROM {database} WHERE {something}.

So, in the above example for Facebook, when the site is building the page with your friends posts, it will first ask the database for a list of your friends, using something along the lines of

SELECT "friends" FROM "friendsdatabase" WHERE "friend"="currentuser";

So it would look for all the friends connected with you.

It would then do something like

SELECT "posts" FROM "postsdatabase" WHERE "user"="friends";

So get all the posts by users in your friends list.

Obviously I’m skipping over the exact details here, but hopefully that gives you a basic idea of how data is recovered from a database.

MySQL also has tools for manipulating the data within the database, and updating it and changing it.

By using MySQL to retrieve the data from a database, then PHP to format that data and build the custom page for each user, is how most of the pages on the internet are built, and pages such as Google, Webmail, Facebook, etc are constructed from thousands of database entries, and presented to you with just the information you need to see.

Continuing my series of the past week, working my way through the terms and technologies of websites and web design, next I’m on to CSS, Cascading Style Sheets. These as the name suggests, control the style of each web page, and were created in an effort to separate the presentation of a page, from the content of the page.

The idea is, that the style information could be put into a seperate file, which would contain all of the presentation information, what fonts to use, what colours, how pictures are to be displayed, everything inside 1 file. Then every page within the website, could just simply load that file, and they would all look alike. And if it came time to change the site, just edit the style sheet, change what you want to change, and the entire site reflects those changes without having to edit every single page to make those changes.

So that explains the Style and Sheet parts of the CSS name, but what about the Cascading? Well, Style sheets work using a thing called the DOM, the Document Object Model. This is the structure of how a web page is made up.

So for example, if you have a really simple web page, consisting of a paragraph, which has a single link in it. The paragraph is part of the page, and the link is part of the paragraph. So any change made to the page (for example, deciding all text on the page should be bright pink) will cascade down to elements within it. So while you can over-rule that by making all paragraphs a different colour, by default, all settings cascade down the hierarchy to elements within that structure.

The DOM also has uses within Javascript, and is how Javascript can control individual elements on the web page. So through the DOM, Javascript can make changes to the all of the page, or can effect all elements on a page, or can effect singular elements, either by selecting them by their position within the DOM (so the first link on the page, or a link within a certain paragraph), or by labelling it (eg <p id=”bernard”> tags that particular paragraph as labelled bernard, allowing it to receive it’s own individual CSS, and that CSS to be changed through the DOM).

So, we’ve covered why CSS is Cascading Style Sheets, we’ve mentioned on how that interacts with Javascript, making up the backbone of HTML5, but we haven’t really touched on how CSS differs from the controls already available through HTML.

For example in HTML, you can use the <font> tag to change the font, the size and the colour of text within a paragraph, well CSS allows you to do all of those, plus you can change the depth of the text (so it appears in front of other elements like pictures and other text, and you can display the text anywhere you want. So CSS can drop text boxes over the top of the rest of the page, centred on the screen (I’m sure you’ve seen a similar effect a million times).

With Javascript and CSS combined, through the DOM you can get Javascript to change the location of elements, so can have text sliding onto the screen, by changing the size of images, you can have them zoom into place, and many other effects that you’ve no doubt seen.

Now, we’ve covered most of the technologies involved on the user side of things, how HTML forms the basis for a web page, how CSS provides the presentation of the web page, and how Javascript allows the web page to become something more than just a static object and respond and change to the users input. These technologies are referred to as Front-End technologies, as they are all operating on the user side of things, and in many ways are just the shiny chrome on the outside, rather than the engine which actually runs it.

So next time I’m going to go into the backbones behind the web pages, the technologies which really power the web (I am by training a “back-end” web developer, so naturally I would feel that way).

So, continuing from my last post “What is HTML?”, I mentioned that from pure HTML, you can display and format text and images, and you can link pages together, but it doesn’t account for a lot of the whizzy exciting things that web pages can do. Well, the next step is Javascript.

Javascript is not anything to do with the Programming language Java, which is used in Android Mobile phones, and countless other devices, although is becoming somewhat rarer when used in Web Pages. Javascript is a programming language, which gets embedded into web pages adding functionality, and allowing the pages to be modified on the fly without having to be reloaded from the web server. This is what does the brunt of the work for web pages these days, and it’s use and prevalence is what has led to it being the most commonly used programming language in the world at this point.

While going into the details of how Javascript works is far beyond the scope for a brief blog posting, what makes it most interesting and useful is what is called Event Handlers. Quite simply the handlers are connected to things the user does, and it runs Javascript code on occurrences of these Events.

So, the main Event Handlers are onclick, onmouseover, onmouseout, onkeydown, onload and onunload.

onload, runs code when the page is loaded, so anything you want to happen as soon as the page is seen by the user.

onmouseover, runs code when the user moves their mouse pointer over and element on the screen, so making an image larger when they are about to click on it, changing the colour of a word when the user moves their pointer over it, etc.

onclick, runs code when the user clicks on an element, so for example anything on the screen can be made into a link, or adding up prices to give a total when the user click subtotal on a shopping screen,etc.

on mouseout, runs code only when the user moves their pointer off an element on the screen, so changing the element back to it’s original format after onmouseover has changed it.

I’ll leave you to work out what onkeydown does (this programming thing is easy really isn’t it).

A really interesting one is onunload, which is run when you move away from a page or close it, used for “Are you sure?” type messages.

As a programming language, Javascript operates in mainly the same way as all languages to, a simple if – then sequence. If something happens or some equation equals a result, then do something. So in a game, if the player gets hit by a bullet, then they lose some health, if their health equals zero, then they die.

This basic concept is the ground work for all computer program, and is the core of computer decision making, breaking larger problems down into small if then statements, even typing on a page, if the user hits the q key, then display a letter q.

There are some modifications to this, for example the else statement, so again in a game, if the user tries to shoot, if they have bullets left, then let them shoot and reduce their number of bullets, else make a clicking noise to let them know they’re out of bullets. But while this saves time, it is just a variation on a theme (for example, in the above the same effect could be reached by an if statement saying if bullets equals zero, then play clicking noise). But the core of every program is the basic if then decision process.

Now, Javascript gains a lot of its power from interaction with something called CSS, which defines the exact layout of a page, but from the event handlers listed above, and knowing how computers make decisions, I’m sure you’ll see how Javascript is used on some of the web pages you visit, and can begin to see interesting ways it can be used to really interesting things with web pages.

So, you’re on the internet, and maybe you’re not sure what all this jargon means, so over a few posts I’m going to share a little knowledge, and hopefully help you out a little. So, to start with the basics, or at least start with possibly the most well known of the Jargon terms.

HTML, Hyper Text Markup Language. Was developed by Sir Tim Berners Lee in around 1991, as a method of linking pages together across the internet. Hyper Text is the type of text you see on the Internet, with images embedded into it, and Hyper Text Links embedded into the page, allowing you to click and move to related documents and information. Hypertext documents have existed since the 1960’s, but HTML linked documents on different servers together, allowing the creation of the World Wide Web, where you could start reading on one site, and end up clicking through pages and losing half your day (or is that just me).

HTML files are really just fancy text files, but obviously saved out .htm instead of .txt, and can be edited with a text editor such as notepad. To work properly, they need to be uploaded to a server, but if you’re working on them, just double clicking the file should open it in the browser of your choice, and allow you to see the results of your work.

The Markup Language part of the name, refers to the fact that HTML isn’t a programming language, it’s a language designed to present text to users in readable fashion. HTML uses a series of commands for the formatting of text, these codes are seperated from the rest of the text by use of anglebrackets.

Anglebrackets are simply enough just < >. This signifies the beginning of a portion of text to be effected by the command, the end of the portion of text is signified by a </ > anglebracket.

So for example, if you wanted to make a section of text bold then you’d use the b tag,

<b>This text should be bold</b>

Which would display as

This text should be bold

(Obviously, I’m using WordPress which does a lot of the work for me, and is displaying my anglebrackets when I type them in, when normally they’d be hidden).

Italics work exactly the same way, using the i tag.

<i>Text should be italicised</i>

Text should be italicised

And you can make lists

Orderered Lists, which uses the ol tag to mark out the entire list, and then the li tag for each list item

1. This
2. should
3. be
4. a
5. numbered
6. list

And unordered lists, same as above, but uses ul

• This
• should
• be
• a
• un-numbered
• list

The paragraph tag, p, blocks out your text into paragraphs. But if you just want to drop in a line break, then you use the br tag.

There are also fun things to do with tables, but they’re a little more involved, but a whole load more powerful (and often abused for page layout). And there are more levels of header than I’ve ever found use for (h1 through to h7).

Fonts can be changed using the font tag, so if you want to use Times New Roman for one paragraph, then you can surround that paragraph with a <font face=”Times New Roman”> paragraph</font>, or change the size <font size=4> etc.

Within the tags you can include modifiers to alter the way the tag is presented, the most commonly used is align.

If you want text left aligned, then you’d use <p align=left>align left</p>, for aligned to the centre use <p align=center>align centre</p> (yes, american spelling), and for aligned right, <p align=right>align right</p>.

align left

align centre

align right

Now, I’ve skipped over one of the most common tags, as it’s a little bit of an anomaly, the image tag. To put in a an image, you need to link the document to the image, so it either needs to exist already on the internet, or you need to put it there by uploading it to a server. This also brings us to the matter of absolute and relative links.

We’ll deal with absolute links first. So, you’ve found an image on the internet you want to link to, such as a picture of a dug.

You’d use the img tag, but you have to define the source of the image to be displayed. So the full tag is <img src=”http://www.scruffydug.com/wp-content/uploads/2016/04/8bitdug_big.jpg”>, and obviously you can align the image left right or centre using the align tags, <img align=left src=”http://www.scruffydug.com/wp-content/uploads/2016/04/8bitdug_big.jpg”>

And the image is displayed thusly.

But you notice there is no closing anglebracket for the image tag, after the picture there’s no need to go </img>, that’s a holdover to keep compatibility with older versions of HTML, in reality, you really should use the closing tag, but very few do.

This backward and forward compatibility has all sorts of weird effects, such as using tags which don’t exist. So, I want to add text which is curved, there might be a tag that does that, so I try <curve>test</curve>. And load up the page, and just see the word “test”, not curved, not anything special, so what’s happening?

Well, your browser is looking at the curve tag and not recognising it, so just ignoring it, but it does recognise that it’s a tag, just one it doesn’t know, so it still hides the markup.

Now, I hope that I’ve helped explain a little, this is obviously just scratching the surface, and if you want to know more there’s loads of better sources than me. And obviously this doesn’t explain how things like Youtube or Facebook work, which use fancier things like Javascript, HTML5, Cascading Style Sheets (CSS) and PHP, which I will endeavour to explain in the future.

Like most people of my generation, I grew up fascinated by the future. The future as it was seen in movies, comics and tv, a future of supersonic planes, space settlements, computers and monorails, all seen in clean white plastic and harsh concrete edges, a future of straight lines and the triumph of human construction over nature. Of course, design has gone away from those concepts, and now we’ve abandoned supersonic travel and monorails, in favour of slower but more economical travel methods. Computers have become common, but in ways that even the most fantastical science fiction authors couldn’t have imagined. And while clean white plastic went out of fashion, came back in fashion when Apple made the iPod, and is now back out of fashion again, concrete has aged badly and is now a symbol of poor planning and urban decay, rather than the monument to the greatness of man over nature that it once was.

So while working on a couple of projects lately focusing on the history of our home town (Irvine, Ayrshire), I was amazed to find these images, and many more like them (credit to Bollops for uploading them to flickr originally).

   

These are images during the redevelopment of Irvine back in the 1960’s and 70’s, and yes in the second image, that is a monorail.

Now I find it amazing that these plans existed, that for the small town I live in there existed plans to take it into the future.

  

Plans to have a roller coaster and ferris wheel permanently sited here, to have everything so plainly labelled (okay maybe not that one, but their futuristic font labelling the Supermarket and Pub in the second picture does evoke 2001: A Space Odyssey, which of course was being made at roughly the same time.)

Now these plans all came to nothing. With only phase one being constructed, which is basically just the Rivergate Centre (known at the time of construction as the Irvine Centre) a large shopping centre which dominates the centre of the town.

Phase Two of the development would have built onto the shopping centre, connecting it with the train station, and consisting of the entirety of the car park which currently exists between the Rivergate centre and the train station. The area of the Riverway retail park and Cunningham House council offices would have been blocks of flats, connected to the Irvine centre by sky bridges.

Phase three, took the centre down to the harbourside and beyond into what is now the beach park, and would have involved demolishing that entire area to build new housing estates, which would be served by a monorail. So that the commuters disembarking on the train from Glasgow, could step onto a monorail and be whisked over the heads of the traffic below to stops in their own particular housing estate. The plans also included various entertainment areas, such as the before mentioned amusement parks, a theatre, ski slope, and optimistically enough a sun bathing area.

Now, this would have doomed Irvine’s historic harbour area, and the construction that was completed ripped the heart out of the town. It’s quite remarkable in the development of a town for a redevelopment on the scale that occurred to happen. Usually when old buildings are demolished, the streets remain, and new buildings are build on the land occupied by the old. In most towns, several old buildings will get demolished, and a new one built in their place. However, in the creation of Irvine New Town, not only did the buildings go, but they demolished the road bridge which was the main way of crossing the river (it’s site is now right in the middle of the shopping centre), and they cleared the land completely. So roads that had existed for centuries were wiped from the maps, and photographs exist of roads cutting across what is now a supermarket or car park, the evidence of its existence forever gone.

While this loss of history is regrettable, and the concrete brutalist designs of the era have aged badly and with the benefit of hindsight were pretty darn ugly to start off with. I personally find the optimism of that era to be quite contagious, but maybe that’s just the little boy in me that grew up watching Space Shuttle Launches, Concorde flights, and way to many episodes of Stingray, who dreamed of living somewhere high-tech and futuristic, probably somewhere with a monorail.

 

We’ve been quiet the past couple of weeks as we’ve been pushing out our map of Irvine. We’ve met loads of great people, and found out some astounding things about our home town that we had absolutely no idea (such as the plans for the Irvine Monorail, and the Loch that used to exist in the middle of the town), it’s been fun.

Well, here’s what the map looks like, my hall is blocked by boxes of them awaiting them being collected, but we’ve been out and about handing them out too. Many thanks to everyone we’ve met, and we’ll be back to our regular schedule real soon.

   

Over the past couple of years the list of Top Level Domains (TLD’s) has been expanding. A TLD is the bit after the dot in a domain name, so .com, .net, .org, and so on.

While the Domain Name System (DNS) has existed for only a couple of decades now, getting good domain names has become almost impossible, with most reasonable names long gone. The surge in weirdly named web sites, Flickr, Tumblr, etc was a reaction to this, as they made up names since the dictionary has long since been plundered for every conceivable variation on sensible names.

So the addition of new TLD’s was supposed to open up the variety of names again, so that similarly named companies, in different sectors could have their real names, but still be distinctly different. So .bar, .voting, .systems, .sexy and many, many others were created. And have flopped hard, with very few taking advantage of this.

The flaw in the plan has been twofold. Firstly any company of any status wants to cover as many domains as humanly possible, so their “brand” cannot be harmed by someone masquerading as them. So large companies will register the TLD for their particular sector, So for example, Microsoft.website links to the Microsoft search engine Bing. This means that any other companies which just happen to be called the same name (I think Microsoft might actually be fine on this one, as I can’t think of a non-computing sector company with might plausibly have the same name) are still forced to register some strange variation of it to get the website online.

Secondly, the exact problem that companies are worried about, that people pretending to be them might register their name in one of these new TLD’s, is exactly what is happening.

The .xyz top level domain in particular I’ve heard described as a wasteland. While there may be legitimate users of this TLD, the vast majority of it is used for spreading malware, luring the unsuspecting user to open the sites and download spyware and worse onto their device. While I’ve been looking into this subject for a couple of days in preparation for writing this post, my youngest son brought me his kindle just a couple of hours ago, which was displaying a official looking website with the Google branding on it, claiming his device was infected and he needed to click to download software to fix it. Although I was skeptical from the outset, as soon as I spotted the .xyz domain name I knew with 100% certainty that it was not a legitimate google site, and explained to my son exactly why he shouldn’t click on links when he didn’t know where they led to (in this case the link was in the description of a youtube video he’d been watching).

So, from a user point of view, these TLD’s should be considered a danger sign, and something to avoid. And from a web site owners point of view, they should be considered toxic, and something to avoid or be tarred with the same brush. For now at least, everyone should stick with the good old reliable .com’s, .net’s and .org’s, and obviously your own country TLD’s.

Hopefully in a couple of years, things will change, but for the moment, all I can recommend is steer clear both as a user, and a site owner is to avoid these TLD’s.