Adding Server Side Captcha to Flash Forms

Problem:
Flash forms are very vulnerable to attacks. Spiders may not be able to easily iterate through your Flash content but they can sure spam your form submission URL. How can you be sure your form was submitted through Flash?

Definition:
A CAPTCHA or Captcha is a type of challenge-response test used in computing to ensure that the response is not generated by a computer.

Solution:
What if we have a user drag a circle onto a box? A spider would have a pretty hard time with that, right? WRONG. While this may be a good filter at the view level it still does not solve our problem. All the hacker would need to do is submit the form correctly one time and use a program like Firebug to sniff the submission URL. They could then completely bypass your view and submit the form as many times as they want.

The only way to ensure the Flash form is being used is to pull the logic out of the view and onto the server. The Flash merely serves up content and never knows what the ‘answer’ is. In this example we will use PHP to generate the image, MySQL to store the key value pairs, and Flash to display the content. This implementation does not require any images to be stored on the server so it NEVER re-uses an existing image. The PHP generates the image on the fly and serves it directly to the Flash application.

Here is a diagram representing the high level information. Blue lines represent Captcha generation and the red lines represent the Captcha verification.

Server Side Captcha in Flash

Server Side Captcha in Flash

Let’s start with the PHP. There are already plenty of PHP scripts out there to generate Captcha. In this example I re-purposed a script called Securimage.

First we need a script that will retrieve the image:

<?php
$flash_id = $_GET['flash_id']; 
include 'securimage.php';
$img = new securimage();
$img->show($flash_id); // alternate use:  $img->show('/path/to/background.jpg');
?>

Next we will need one that verifies the user input with the image:

<?php

$flash_id = $_GET['flash_id']; 
$captcha_text = $_GET['captcha_text'];

if ($flash_id && $captcha_text){
	$con = mysql_connect('localhost', 'DB_USERNAME', 'DB_PASSWORD');
	if (!$con) {
		die('Could not connect: ' . mysql_error());
	}
	mysql_select_db("utils", $con);
	$result = mysql_query("SELECT * FROM captcha WHERE flash_id = '".$flash_id."'");
	$match = 0;
	$valid = 0;
	$answer = "false";
	while($row = mysql_fetch_array($result, MYSQL_ASSOC))
	{
		if($row['valid'] == 1)
		{
			$valid = 1;
			
			if($row['captcha_id'] == $captcha_text){
				$match = 1;
				$answer = "true";
			}
		}
		
	} 
	if($valid == 1){
		mysql_query("UPDATE captcha SET valid = '0' WHERE flash_id = '".$flash_id."'");
		
	}
	echo $answer;
	mysql_close($con);
}
?>

Now that we have the PHP in place we can create the Flash. The display logic is separated from the view so you can re-use this code with any server side script. The Captcha class requires an ID and a URL to the image to display. It has optional styling parameters to match the look and feel of your webpage.

Generating a Captcha in Flash:

// Create a Captcha object
_captcha = new Captcha( );

// Create a unique ID so the server can identify the Flash
var date:Date = new Date();
var id:String = "" + Math.floor(Math.random()*1000) + date.time; 

// Pass in the url along with the ID so the Captcha can load
_captcha.loadCaptcha("http://www.blackcj.com/utils/securimage_show.php?flash_id=" + id, id);

Verifying a Captcha in Flash:

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, formSuccess, false, 0, true);
var request:URLRequest = new URLRequest("http://www.blackcj.com/utils/check_captcha.php?flash_id=" + _captcha.id + "&captcha_text=" + _text.text);
loader.load(request);

Flash Demo and Source:

Server Side Captcha for Flash

Get Adobe Flash player

(click the image to manually refresh the captcha)

Full source code for Flash & PHP can be found here.

In the source code you will need to replace DB_USERNAME and DB_PASSWORD with your username and password. This example also requires a MySQL database with a table called captcha containing rows flash_id, captcha_id and valid. Valid is used to ensure the Captcha is only submit one time. Since we are always generating a new image there is no reason the Captcha should be allowed to be submitted twice with the same id.

Next Steps:
Additional steps could be taken to prevent robots. Failure rates and number of attempts could be stored for each IP address. No human should ever attempt to re-submit an old Captcha since each time it is randomly generated. The system could block anyone that attempted to re-submit a Captcha.

I would eventually like to make this accessible by integrating audio support. This is a feature of Securimage and would make the utility more versatile.

Build a Flash Game in Under 3KB

Here are three Flash games each built in under 3KB and in less than 4 hours. They may not be Half Life 2 but they are entertaining! Try your luck at the racing game, platform game, and a space shooter that I like to call Little Ship vs. Space.

Wait? Doesn’t everybody have loads of bandwidth? Why create a game so small? Well, because it’s fun, a good preparation for the 4KB challenge and most importantly size != entertainment. You may spend weeks designing, architecting, and developing a game only to find out it’s not fun. Evolve your game.

Build a 4KB game. If you enjoy playing it then slowly build it up into something better. Add levels, create graphics, improve the structure but AFTER you’ve come up with a cool idea.

Lets play some games! Don’t forget to vote for your favorite game in the poll bellow the games.

For all games click on the icon in the top right to re-start.

Racer Game (1.98KB):

Racing Game

Get Adobe Flash player

(Use the Left, Right, and Up arrows to move. Try and beat 20 seconds!)

Full source for the Racer game: zip (2.09KB)

Coin Collector (2.08KB):

Coin Collector

Get Adobe Flash player

(Use the Left, Right, and Up arrows to move. Try and beat 16 seconds!)

Space Shooter (2.99KB):
Notice: MAC users have reported issues with the arrow keys in the Space Shooter game. I will look into this shortly and post a new, functional, version. Looks like I need a MAC to test on 😉

Space Shooter

Get Adobe Flash player

(Use the Left, Right, and Up arrows to move. Ctrl (Command) to fire. Try to get more than 4 frags!)

[wp_surveys]

How to do it:
After rudimentary tests Flash CS3 is the best enviornment to compile with. A pure AS3 project in Flex and a project built from CS4 add 500 bytes of overhead (Anyone know why? Maybe meta data?). You also save space by using an external AS file, so create a main.as file for your code. Put all of your code in this one file! Every additional AS file adds space rather than saves. Once your game is setup if you absolutely need one or two extra AS files than make them. Type all of your functions and variables. You’d think it would be the opposite but typed vars take up less space in the compiled SWF. Don’t use MouseEvent.CLICK, use “click” to save some bytes.

Now for the game play.

All three games use the arrow keys as input. Individual key listeners / flags use way to much code! What are the values for left, right and up arrows? 37, 39, and 38. None of which are divisible by anything but themselves. So… lets add one key listener and multiply our single key value by the code value. Up = 38, Up * Left = 1406. That means that key value % expected value == 0 than our key is down. This only works for key values that don’t have common denominators, key codes 2 and 4 would not work. Both 2 and 4 mod 4 would result in true. Looking back you could also push these codes into an array and do an index check which would allow more flexibility… mod is more fun though.

package {
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.KeyboardEvent
	
	public class main extends MovieClip
	{
		private var k:int = 1; 			// Keyboard number

		public function main()
		{
			this.addEventListener("enterFrame", eF);
			stage.addEventListener("keyDown", kD);
			stage.addEventListener("keyUp", kU);
		}
		private function eF(e:Event)
		{
			if(k%37 == 0)				
				trace('rotate object left');
			if(k%39 == 0)
				trace('rotate object right');
			if(k%38 == 0){	
				trace('add velocity');
			}else {
				// remove veloicty
			}
		}
		private function kD(e:KeyboardEvent)
		{
			if(k%e.keyCode != 0)
				k *= e.keyCode;
		}
		private function kU(e:KeyboardEvent)
		{
			if(k%e.keyCode == 0)
				k /= e.keyCode;
		}
	}
}

Both the Coin Collector and the Racer game use bitmap hit detection which is very little code and very powerful. Bitmap hit detection looks a bit like this:

/* Constructor */
// Car BitmapData, built in the enter frame function
sb = new BitmapData(500, 400, true, 0x00000000);

// Track BitmapData, doesn't move / change so lets build it here
tb = new BitmapData(500, 400, true, 0x00000000);
m = new Matrix();
m.tx = t.x;
m.ty = t.y;
tb.draw(t, m);


/* Enterframe loop */
// First see if bitmap hit detection is needed.
if(s.hitTestObject(t)){
	// Clear our car bitmap data object
	sb.fillRect(new Rectangle(0,0,500, 400), 0x00000000);
	
	// Create a matrix that defines the location and rotation of the car
	m = new Matrix();
	m.rotate((Math.PI/180) *s.rotation);
	m.tx = s.x;
	m.ty = s.y;
	
	// Draw the car to our BitmapData using the matrix
	sb.draw(s, m);
	
	// Do a hit detection with the track BitmapData
	if(tb.hitTest(new Point(0,0), 0xFF, sb, new Point(0,0), 0x11)){
		v = 1.1;
	}
}

The space game deals with circles so that code uses Trigonometry for hit detection. We’ll save that for another day. I need to clean it up a bit for it to really make much sense. Stay tuned for more on games!

Full source for the Racer game: zip

Q/A:

Why 3KB?
My initial goal was 4KB. I hoarded the KBs so much that they all ended up under 3KB. I suppose that means I should add more features / levels.

Whats with the sudden interest in games?
I actually used to be big into making games back in the AS2 days about 4 years ago. I built out a six level space shooter, 8-ball, and 9-ball billiards. My game programming was shelved for four years until one of my co-workers sparked my interest by mentioning the 4KB challenge :)

Can I have the source code for the other two games?
E-mail me with specific questions and I’ll be happy to help. I built out the Coin Collector and space games using the Racer as a starting point. It wouldn’t be fun if I gave away all the answers 😉

People who inspired me to make these games:
Iain Lobb
Game Poetry
Micheal Hills

Best of Flash on the Beach ’09

Back in the U.S. and recovered from jet lag, I’ve compiled a list of the best sessions, restaurants, beer and more from FOTB09. Plenty of reasons to go back again next year!

Best Session:
Carlos Ulloa – Hello Enjoy. Carlos, the creator of PV3D, demoed three amazing projects. He even gave some insight as to how he solved challenges in those projects and provided a time line of effort between software packages.

Best Code Jam:
Joa Ebert – Live coding. All of the Jam sessions were great but Joa’s live coding was beyond words.

Joa Ebert’s java live coding at Flash on the Beach 2009 from Thomas Gabrielsen on Vimeo.

http://blog.joa-ebert.com/

Best Food:
Bill’s – Produce store by day, restaurant by night. I didn’t have any bad food in Brighton but this restaurant was the highlight of the trip. A must visit for anyone traveling to Brighton.

Map of Bill's Restaurant

Map of Bill's Restaurant


http://www.billsproducestore.co.uk/

Other notable restaurants include Pizza Express, Iguana, Bagleman’s and a Japanese restaurant.

Best Beer:
Harveys Best Bitter

Harvey's Best Bitter

Harvey's Best Bitter

http://www.harveys.org.uk/

Best Destination:
The Brighton Pier – Loads of rides, food and sights to see at the Brighton Pier. I skipped out on a couple sessions one of the afternoons to check it out. Definitely worth while to check out. Make sure to bring some coins for the arcade machines.

Brighton Pier

Brighton Pier

Best Inspiration Session:
Joel Gethin Lewis – Joel walked through his experiences with Massive Attack and contributions to open source frameworks.

Best Hotel:
Premier Inn – The staff was great, the rooms were clean and the price was reasonable. I would highly recommend the Premier Inn to anyone attending Flash on the Beach or traveling to Brighton.

Until next year!

Flash Your TV: the suspense is killing me

A look at some press releases from January 2009. Wait… wasn’t that 8 months ago? Both Intel and Broadcom both talk about releasing Flash Lite supported hardware first half of 2009. What happened?

 

Intel and Adobe to Extend Flash Platform to TVs

Jan 5, 2009

“Intel plans to ship the first CE3100 with support for an optimized implementation of Adobe Flash Lite before mid-2009.”

“Adobe and Intel are also working together to bring an optimized implementation of Adobe® AIRâ„¢ technology to Intel’s digital home platform in the future.”

 

Collaboration Extends Flash Platform Ecosystem to Digital TVs and Set-Top Boxes

Jan 06, 2009

“Broadcom DTV and STB platforms with integrated Adobe Flash support are expected to be available to manufacturers in the first half of 2009″

“With Adobe Flash Liteâ„¢ 3 software supported… TV viewers will be able to view Flash based content and applications from popular online providers and entertainment sites.”

 

Analysis

According to both of the press releases the hardware will launch with Flash Lite support. Event the latest version of Flash Lite (3.1) is still ActionScript 2.0 (Flash Lite Fact Sheet). The jump from AS2 to AS3 is very significant. The support is built into the hardware which would suggest it will not be upgradable through a software update. Here are three plausible scenarios based on the information at hand:

Scenario 1:
Hardware launches in the upcoming months with AS2 support. The hardware could all be rendered obsolete when AIR support comes out.

Scenario 2:
The eight months of silence could be due to a realization that obsolete hardware is not an ideal solution. Why not wait until AIR support is ready? This is the one I’m hoping for.

Scenario 3:
They may be taking the time to ensure the hardware can be upgraded. Keep in mind there is an actual physical chip in the hardware that would need to support both AS2 and AS3.

 

Conclusion

Are there scenerios that I haven’t outlined? Of course. The three above are my ‘best guesses.’ What can we expect from MAX 2009? Hopefully some awesome news about Flash for your TV!

Whether it launches in AS2 or AS3, Flash support for televisions will be very cool. You may want to brush up on your ActionScript 2 skills just in case 😉

*Disclaimer*
While it should be obvious, this post is entirely speculation. Adobe has remained completely silent on the topic of Flash for your TV, if anything, a bit too silent. The goal of this post is to get people thinking about the topic so they are ready when the hardware is available.

Resources
Engagethd
Broadcom – Press Release
Adobe – Press Release
Nerd Acumen
Flash Your TV on Twitter