Toy Box Explorer

8th Wall, WebAR
Role: Lead Developer
Agency: Hoopla Digital
Client: Very

Sweet Tooth were approached to develop an online competition for Very’s Toy Box promotion called the Toy Box Explorer. They wanted to run a competition to give users the chance to win £200 worth of toys. 

To be able to enter the competition, the user was required to submit their name and email address. This would be collected if the user completes the experience by finding as many hidden animals as possible in 45 seconds. The user is presented with an animal to find at the top of the screen, once they have found the animal, they are required to find another until the time runs out. Once the time has run out the user is then presented with the option to enter the competition. 

As this is an online competition there was a need to create a secure transfer of personal information from the client to the server so that the data could be stored in a database. The database would then need to be accessed by the client at the end of the competition so that they could randomly select a winner. 

As the experience is built using JavaScript, the simplest method for securing the users data was to encrypt communications using the Transport Layer Security (TLS) protocol through HTTPS. Encryption methods were investigated to further secure the data being stored; however, a “key” would need to be used to encrypt the data and this would be accessible by viewing the JavaScript source code. 

The data is collected by a HTML form which uses validation checks and limits the length of data inputted before it is processed by JavaScript and submitted to a PHP endpoint on the server. The PHP handler is then able to decompile the data and check the parameters for any malicious code. If everything is correct and no errors occur, then the data is then stored into a MySQL database and a success code is returned to the client. To further improve security to the database, measures were taken to reduce user access, remap port mappings and restrict remote access.

The API to allow the client to communicate with the server was created using the PHP micro framework Slim (http://www.slimframework.com). It is a simple but powerful framework that can be used to quickly and easily create an application API. In this case we only required one endpoint to store the user’s name, email address and answers for age, terms and conditions and privacy policy.