Templating is one of the major enhancements added to the C++ programming language, extending the capabilities of the original C programming language.  In order to best understand their power, considder the following situation:

Assume that we’re making a sorting function, using the bubblesort function.

1
2
3

bool bubbleSort(int& array){
...
}

Ignoring the implementation of the function for now, take a look at the declaration. Now this function will work perfectly if we want to only sort data of type Integer, but what if we want to say sort chars?

1
2
3
4
5
6
7

bool bubbleSort_int(int& array){
...
}
 
bool bubbleSort_char(char& array){
...
}

The problem here is excess code. Having two identical implementations of the same algorithm, with the only difference being teh data type is very redundant. A better solution would be for us to be able to supply the type we want to use at runtime. This is the power of templates.

1
2
3
4

template<typename T>
bool bubbleSort(T& array){
...
}

In the code above, we specify the variable T to be a type, that we can then define the type to use in the function call simply as follows:

1

bubbleSort<int>(foo);

Thus the problem is then fully solved.

Multiple Files

Traditionally when using C++, we keep a class definition in the .h/.hpp file and the class implementation in the .c/.cpp file. This causes a problem when using class templates. A template strictly speaking is not a class or a function, it is a design pattern. due to this, it needs to be all in one place. If you try to separate the definition and implementation, a linker error will follow.

This creates a problem , as in an application, we will have normal classes with their implementations and declarations split, then any templated classes in a single file. There are several ways around this problem.

The first is simple, provide a prototype for each templated function with each embedded type as follows:

1

template <int> void foo();

This is very cumbersome to say the least, clearly a more generic solution is needed.

Solution 1 : Export Keyword

The C++ “export” keyword was designed to solve this problem. However due to politics, it is seldom implemented by any of the main compillers, and thus is almost useless. The only compiller i could find that implements it was Comeau C++.

Although not often implemented, it provides simple usage, by simply placing the following line in the .c/c.pp implementation file as follows:

1

export template ....

Solution 2 : Preprocessor Macros

Clearly the best way to solve the problem is to use preprocessor macros. However we will also add in support for the export keyword if it is avaliable with the compiller we are using.

First in out declaration (h/.hpp file) we will place the following directives:

1
2
3
4

#ifndef COMPILER_SUPPORTS_EXPORT
#define FROM_MYCLASS_H
#include "myclass.cpp"
#endif

We will use the constant COMPILER_SUPPORTS_EXPORT to define whether the compiler currently being used supports the export keyword. By default, it is not defined, and so we use a preprocessor directoves method. However if we using a compiler that does implement it, we can simply add

1

#define COMPILER_SUPPORTS_EXPORT

somewhere in a global position.

The code (previous) does two jobs. Firstly it checks to see if export is enabled. If not it defines a constant specific to the file, called FROM_MYCLASS_H. We will use this later in the implementation (.c/.cpp file). Finally it includes the implementation file. This will remove all linker error messages.

The next problem is one of redeclaration. If we leave the code as it is, we’re likely to get compiller errors for redeclaration of methods in our class. To solve this, we can add preprocessor directoves in our implementation (.cpp / .c) file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#ifdef COMPILER_SUPPORTS_EXPORT
#define FROM_MYCLASS_H
#endif
 
#ifdef FROM_MYCLASS_H
 
template<typename T>myclass::mymethod(){
....
}
 
#undef FROM_MYCLASS_H
#endif
#ifdef COMPILER_SUPPORTS_EXPORT
export template.....
#endif

In order to understand this, lets start with line #9. This means that all of our implementation code will ONLY be visable if FROM_MYCLASS_H is defined. Now, if we have come from the include statement in the header file, this will already be defined as normal, and will work perfectly, and we are done. The only thing to add is line #15. Here we undefine our constant, so that the code will not be included for anything else including it in the future.

Now we have to examine the case whereby the compiller does support export, and thus COMPILER_SUPPORTS_EXPORT is defined. In this case, the source file will not be included by the header file, as we specified earlier. However we need the .cpp file to show its code, and thus FROM_MYCLASS_H must therefore be defined. To solve this problem, we put the code:

1
2
3

#ifdef COMPILER_SUPPORTS_EXPORT
#define FROM_MYCLASS_H
#endif

If the compmiller supports export, we define FROM_MYCLASS_H so that the compiller can see the sourcode when compilling the source (.c/.cpp file) directly, and then remove the constant afterwards as normal.

This gives us final code of:

Header (.h) file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#ifndef MYCLASS_H
#define MYCLASS_H
 
template<typename T>
class myclass{
...
};
 
#ifndef COMPILER_SUPPORTS_EXPORT
#define FROM_MYCLASS_H
#include "myclass.cpp"
#endif
 
#endif

Source (.cpp) file:

1
2
3
4
5
6
7
8
9
10
11
12
13

#ifdef COMPILER_SUPPORTS_EXPORT
#define FROM_MYCLASS_H
#endif
 
#ifdef FROM_MYCLASS_H
 
template<typename T>myclass::mymethod(){}
 
#undef FROM_MYCLASS_H
#endif
#ifdef COMPILER_SUPPORTS_EXPORT
export template...
#endif

Happy Coding

There are a lot of good open source graphics engine, that offer near commercial quality. I’ve experimented with a lot of these in the past, and the results have been mixed. I found that the best open source ones out there are currently Crystal Space (http://www.crystalspace3d.org) and Ogre (http://www.ogre3d.org/).

This is a screenshot of Decals running in CS.

Decals

In comparison, MotorM4X running in Ogre…

MotorM4X

After playing with both of them a couple of years ago, i managed to get bored with the simplicity of the coding these APIs allow to create a game, with even a complete newbie being able to create something good in a few days.

Thus, espresso was born. Its my (and adam’s) first attempt to build my own graphics engine from scratch and is definately going to be an interesting project. It not only means exposing all of the crazy vector calculus of creating a 3d computer world, but also the endless physics, algorithms and rendering techniques with OpenGL / DirectX. thanks to the good people at google, we have a subversion repository along with project management tools hosted with google code (http://code.google.com/p/espressoengine/). Its also being released under the MIT licence, so anyone is free to download it and use it as they wish.

Check back every once in a while, and i’ll add some articles of the endless fun, and psycotic moments while attempting to implement it

Introduction

Suppose we have a webpage, displaying news.

Now, for the user to switch from one news story is pretty unefficient.
The only part of the webpage that changes is the news content area, though the whole page (graphics and all) is reloaded from the webserver. Wouldnt is be great if there is some way we could only change part of the html?

this is what AJAX allows us to do.

AJAX stands for Asynchronous JavaScript and XML. The basic idea is this.

• In the case of our example, the user clicks on a link to view a different news story. This click action is picked up with javascript , rather than a normal <a href=”"> style tag pointing to a different URL.

• The javascript function then sends a HTTP request to the webserver for the information (i.e. the new news story). The webserver then sends back the news story to the web browser , generally in XML format.

• The javascript then parses this javascript, and places the text of the story into the correct places. All the time through, the whole page is not reloaded, but instead only the news content area is changed by javascript.

This allows for far more eficiency, less bandwidth consumption, and also a far quicker loading time.

Example

Now, lets create a quick basic example, showing the power of AJAX.

In order to save us alot of time, we will not write a whole set of functions in javascript to get and send information to the webserver, instead we will use a AJAX libary called Prototype (www.prototypejs.org). This simplifies the task greatly.

The first step is to explain the setup we will use for this example.

• We will start by having a HTML page, to display anews article (as above).

• This will include some javascript to handle all AJAX functions.

• Lastly we will have a PHP file to send the news articles to the client.

Step 1 : PHP File

First up is to create a PHP file to grab news files from our Mysql Database.

I’ll design a simple database table like this:

1
2
3
4
5
6
7
8
9

CREATE TABLE `news` (
`news_guid` int(255) NOT NULL AUTO_INCREMENT,
`news_title` varchar(255) NOT NULL,
`news_tagline` varchar(255) NOT NULL,
`news_body` varchar(255) NOT NULL,
`news_author` varchar(255) NOT NULL,
`news_date` varchar(255) NOT NULL,
PRIMARY KEY  (`news_guid`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

255 character strings wont normally suffice for a real application, but are set this way to keep the sample application small.

Now with that created, we create a simple PHP script, to first loadup the database, and to query the database for the correct story.

We will place the story id as apart of the GET variables.. so we can have for example:

1

ourfile.php?storyid=1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// loadup db
$hDatabase = mysql_connect('your_host', 'your_usrn','your_pass');
mysql_select_db('your_db_name');
 
// lets assume that no hacker will be trying
// to break into our site, as this is just an example
// so i will not bother checking that the data input is
// a sql injection etc (see php security mistakes article)
$news_story_id = $_GET['storyid'];
 
//query the database
$dataset = mysql_query("SELECT * FROM news WHERE news_guid = '$news_story_id'", $hDatabase);
 
//check valid story number
if(mysql_num_rows($dataset) != 1)
{
 
//just show the first story
$dataset = mysql_query("SELECT * FROM news WHERE news_guid = '1'", $hDatabase);
 
}
 
$row = mysql_fetch_assoc($dataset);

This is all pretty simple, but what we want is the data to be output in XML format, for the javascript. Again, to save time, i have created an XML class to do this. (see included zip file for sourcecode).

If you havent met XML before, i suggest reading this as some basic background first.

we will now add in this code, to initialise and include the class:

1
2
3
4

require('xmlcreator.php');
 
// create XML object (see cmlcreator.php)
$xml = new XML_CREATOR();

With this class we will create a “Main News Element”, with attributes for the content, author, date etc. so eventually it will look like this:

1
2
3
4
5
6

The tagline goes here
 
The actual story goes here
 
the author goes here
the date goes here

Now, we will create this using the class by:

• Running the begin() function
• Creating the Main News Tag
• Adding the body, author etc. attributes
• Closing the News tag
• running the end() function

1
2
3
4
5
6
7
8
9
10

//now, lets create the XML
$xml->begin();
$xml->addElement('news', '');
$xml->addAttribute('title', '',   $row['news_title'] );
$xml->addAttribute('tagline', '', $row['news_tagline']);
$xml->addAttribute('body', '',    $row['news_body']);
$xml->addAttribute('author', '',  $row['news_author']);
$xml->addAttribute('date', '',    $row['news_date']);
$xml->closeElement();
$xml->end();

Finally, we want the php page to output this xml:

1
2

//output XML
echo $xml->getXml();

Step 2 HTML & Javascript

Now its time to create our html page design.

For the way the javascript is wrote in this example.. make sure that:

1. Area where title goes is a <p> tag with id title
2. Area where taglines goes is a <p> tag with id tagline
3. Area where date goes is a <p> tag with id date
4. Area where story goes is a <p> tag with id body
5. Area where autho goes is a <p> tag with id author

With this created, lets now make the javascript

As i said before, we’ll use the prototype libary for this…
For more information about its use, and to download it, visit their website:(www.prototypejs.org).

We will first craete a file called index.js.
This will have a function called getstory whcih will simply run the code
to get the story from the php script, and then put it into the html

This will be run when the view story 1 etc. buttons are clicked

we’ll create a file index.js with the contents:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function getstory(form, id) {
 
var param = '';
 
var ParseFunc = function(t) {
 
var xmlDoc = t.responseXML.documentElement;
 
document.getElementById('author').innerHTML = xmlDoc.getElementsByTagName('author')[0].firstChild.data;
document.getElementById('date').innerHTML = xmlDoc.getElementsByTagName('date')[0].firstChild.data;
document.getElementById('title').innerHTML = xmlDoc.getElementsByTagName('title')[0].firstChild.data;
document.getElementById('tagline').innerHTML = xmlDoc.getElementsByTagName('tagline')[0].firstChild.data;
document.getElementById('body').innerHTML = xmlDoc.getElementsByTagName('body')[0].firstChild.data;
}
 
var Error = function(t) {
alert('Error 404: location "' + t.statusText + '" was not found.');
 
}
 
new Ajax.Request('getnews.php?storyid='+id,{onSuccess:ParseFunc, on404:Error, onFailure:Error});
 
}

Lets look at this in closer detail…

The getstory fiunction is defined as:

1

function getstory(form, id) {

and then several variables are defined……

1
2
3

var param = '';
var ParseFunc = function(t) {......}
var Error = function(t) {.......}

The param var is to hold any etra parameters for the AJAX function (again see prototype website for more info).

The parsefunc variable is a function, that parses the XML into our HTML page. looking at its definition:

1

var ParseFunc = function(t) {

The variable T is the XML data

The parsing ofXML and inserting into html here is created using a javascript feature called DOM please read this if you have not met it before.

The Error variable holdsa function that is run if the Ajax function does not run properly. Here, it just creates a popup menu.The finalpart of the code is the call to the AJAX function:

1

 new Ajax.Request('getnews.php?storyid='+id,{onSuccess:ParseFunc, on404:Error, onFailure:Error});

This simply gets the data from the url given to it, note that we’ve also included the story id as the variable id.

Putting it all together

The last step is to connect this javascript function to our html.

This is done by creating tags in the html , linking to other stories:

1
2
3

<a onclick="getstory(this,1);" href="#">Load Story 1</a>
<a onclick="getstory(this,2);" href="#">Load Story 2</a>
<a onclick="getstory(this,3);" href="#">Load Story 3</a>

And now were complete

Ultimately, a ‘hacker’ wants to gain access to a website for a variety of reasons. Maybe to steal users details, bank account information etc, or even just to simply deface it. Either way, as programmers, we have to be aware of the methods they use so that we can write code that is secure.
This article will cover 4 basic areas:

• Register Globals
• XSS ( Cross Site Scripting ) attacks
• Session Id Stealing
• SQL Injections

Register Globals
Register globals is perhaps the oldest vulnerability in PHP. and also the simplest for hackers to exploit.

What is Register Globals?
Register globals is a simple feature added to PHP to make data input handling easier. Say we have a form input page, with a textbox called ‘username’ box:

1
2

echo $_POST['username'];     // conventional method
echo $username;

Instead of having to get the value from the $_POST array, register globals automatically creates a variable $username, and assigns it the value from the form. This works for both vales sent by GET and POST methods.

Example
Suppose we have a members only webpage, and in order to check if the user is a valid member, we check for a cookie on the users system, that would be set when the person logged in.

1
2
3
4
5
6
7
8
9
10
11
12
13

if($_COOKIE['secret_site'])
{
$auth = 1;
}
if ($auth != 1)
{
die("You are not allowed in");
}
else
{
echo "Welcome to the secret admin area";
}
?>

This is a very basic script, but it illustrates the problem of register globals well. At a a glance, this script looks fin, and is we try to run it,
we can see that we are not allowed access.

However, now lets try loading the script, but adding a GET value to the query string.

register_globals.php?auth=1

We still dont have the cookie, but register globals means a hacker doesnt need it. Sending a variable called auth with a value 1 in the GET values, a variable $auth is craeted with the value of 1. So, even though we do not have the cookie:

1
2
3
4
5
6
7
8

if ($auth != 1)
{
die("You are not allowed in");        // register_globals sets $auth to 1 so we dont enter this if statement
}
else
{
echo "Welcome to the secret admin area";    // we enter here, without the cookie!
}

Solution

The solution to this is very simple, make sure register_globals is turned off.
This can be completed by editing the php config file (php.ini) or can also be set using code using the ini_set()function.

Note that latter versions of php have register_globals turned off as default so the sample script may not work. Remember to check your hosts configuration to protect your site.

XSS Attacks

Cross site scripting is probably the most common exploit used by hackers at the moment, so we have to be very aware of it when we are writing code. It all stems from the problem that programmers forget to validate and sanitize data that users have input.

example

Suppose we have a blog like site we have made in php, with a part at the bottom where users can leave comments.

Also suppose that the users details are stores in a cookie when they login, as many websites do dor security.

I have simulated this here by just issuing a cookie for a user “steve” with a password “secret_pass”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

 
setcookie("mysite", implode(array('username'=>'steve','password'=>'secret_pass'), '|||'));
 
if(!isset($_POST['message'] ))
{
 
echo '
<h1>Please Enter your Comment</h1>
<form style="color: #0000ff;" action="&lt;span">"./xss_hack.php"</form>method=<span style="color: #0000ff;">"post"</span>&gt;
<span style="color: #ff8000;"><textarea style="color: #0000ff;" name="&lt;span">"message"&lt;/span&gt; &gt;&lt;/span&gt;&lt;span style="color: #ff8000;" mce_style="color: #ff8000;"&gt;</textarea></span>
 
<input style="color: #0000ff;" type="&lt;span" />"submit" value=<span style="color: #0000ff;">"Submit"</span>&gt;
 
';
 
}
 
else {
 
echo '
<h1>This was Your Comment</h1>
'.stripslashes($_POST['message']).'
 
';
 
}
 
?>

Now this looks very innoscent, and its not obvious atall what is wrong with it.
But now try this, enter this as your message:

1
2
3

<script type="text/javascript"><!--
 alert(document.cookie);
// --></script>

What happens here is that we have entered some html as the message. This html is a script tag, containing soem javascript. The javascript pops up a message box with the contents of the cookie. Again, you might think, so what? but what if instead of being javascript code to popup a box, it instead sent this cookie information to the hacker?
Any user that is logged in and loads that comments page will have their username and password stolen without even knowing. This is the power of XSS.

XSS With Sessions
So the first thought is, ok, i’ll use sessions to store the users details, instead of a cookie. Bad idea.
Sessions have a unique session ID that is stored either in a cookie, or in the GET variables query string, i.e.

xss_hack.php?session_id=g4n48474g4746gdjf89495

Either way, this is easy pickings for the hacker.
If the session id is stored in a cookie, the hacker just uses the same injected html as before, and creates a cookie on his computer with teh same value, and he/she has access to your user account. Or if the session is stored in the string, the hacker simply modifies the javascript to take this, and then they simply point their browser to the same page, with your session id added on.

Solutions
Ultimately, the solution is pretty simple. Whenever inputing data from users to your website/database,
sanatize it! Make sure you strip out all html characters.

SQL Injections
The final method we will look at is SQL injections. These are a very cute and clevor way of a hacker gaining access to your website. They are called SQL injections as inadvertantly, extra data is added into the SQL query.

Example
Lets suppose we have a standard login page, with a username and password box.
We also have a database, containing the users username/password.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

 
$db_handle = mysql_connect('localhost', 'root', 'your_password');
mysql_select_db('security_tutorial');
 
if(!isset($_POST['username']) || !isset($_POST['password']))
{
 
echo '
<h1>Please Enter your username and password to proceed</h1>
<form style="color: #0000ff;" action="&lt;span">"./sql_injection.php" method=<span style="color: #0000ff;">"post"</span>&gt;
Username:
 
<input style="color: #0000ff;" type="&lt;span" />"text" name=<span style="color: #0000ff;">"username"</span> /&gt;
 
Password:
 
<input style="color: #0000ff;" type="&lt;span" />"password" name=<span style="color: #0000ff;">"password"</span> /&gt;
 
<input style="color: #0000ff;" type="&lt;span" />"submit" value=<span style="color: #0000ff;">"Submit"</span>&gt;
 
</form>';
}
 
else {
 
//entered details
$entered_username = stripslashes($_POST['username']);
$entered_password = stripslashes($_POST['password']);
 
echo "SELECT * FROM users WHERE users_username='$entered_username' AND users_password='$entered_password'";
 
//get users details
$resultset = mysql_query("SELECT * FROM users WHERE users_username='$entered_username' AND users_password='$entered_password'");
 
//if record found, grant access
if(mysql_num_rows($resultset) != 1)
{
die('Invalid Username/Password');
}
 
//else proceed
 
$sUsername = mysql_result($resultset,0,'users_username');
 
//selcome user, and exit
die("Welcome to the members only area ".$sUsername);
 
}
 
?>

Try running this on your local computer.

Try logging in, with some random details.
If i tell you the username is ’steve’, try some random passwords.
It seems to work properly, but there is a problem.
If we look at the line where the database is queried:

1
2

//get users details
$resultset = mysql_query("SELECT * FROM users WHERE users_username='$entered_username' AND users_password='$entered_password'");

The query is ran as shown, with the entered username and password spliced in.

Lets look at the query closer:

1

SELECT * FROM users WHERE users_username='$entered_username' AND users_password='$entered_password'"

Now, we know the username is steveso we can enter that. But Suppose we enter this for the password:

‘OR ‘1′ = ‘1

See what this makes the query into:

1

SELECT * FROM users WHERE users_username='steve' AND users_password=''OR '1' = '1'"

This is the SQL injection, and it is very clevor.
The WHERE clause of the query says that

1

WHERE users_username='steve' AND users_password=''OR '1' = '1'"

Now, the password will never be null, but it reads OR 1=1, which will always be true.

Therefore, a hacker will be granted access to your website without a password.

Solutions

Again, same as before, make sure that you filter out all characters and html other than the things you want. In this case it is especially importnat to remove the single and double quote characters (’ and “).

Thats it for now, hope you found this article interesting. Ill post another soon.