You have a website and you’ve proven it’s vulnerable to clickjacking, but what use is fooling a user into submitting a form unless you can specify some of the data that the user is submitting within those fields?

We’ve all played games online where you have to match up words to phrases or maybe things like the “impossible game” where you drag the words to the respective colours.

What about turning a harmless game such as the above into a form submission machine of awesome. Well now with HTML5 – you can!

It’s all thanks to the drag-and-drop method and in particular the ondragstart method.

1
draggable=”true” ondragstart=”event.dataTransfer.setData(‘text/plain’, ‘Rick Astley’)”

Use that on anything you want to make draggable – in my testing I opted for a simple div containing a string, and ask the players to drag and drop the string onto the correct corresponding sentence.

When they click the “answer” button, it submits the jacked site.

So.. users drag the word CSS across to Cascading Style Sheets – enters “Rick Astley” into the search field of videos.yahoo.com then users click the “answer” button – submits the video search

Now ideally if google didn’t have x- headers set that forbid the use of google in an iframe I’d have gone and “i’m feeling lucky”d it but sadly no autoplaying rick astley for me.

Still the premise is proven.

Edit:
Now with added code and a demonstration video.
[youtube=http://www.youtube.com/watch?v=u5EBlxTqj_M]
I’m no web developer and quickly ran out of patience when working on the positioning issues so feel free to take, improve and build on it. I was merely creating this just to play with some of the features of HTML5.

Code available here: http://pastebin.com/BeenqC19

Enjoy!

Leave a Reply