WARNING: This snip describes a really ugly hack. It's sneaky, underhanded, and certainly not what the developers had in mind. They'd probably even consider it a security hole. Just so you know...OK, now that that's out of the way, let's get on with it. This snip describes how to insert arbitrary Javascript code into snips. By subverting the rendering code, we can write Javascript code for events like onload, onclick and others, and attach them to HTML tags that SnipSnap generates.
How? Damn good question. Many macros fail to sanitize user-supplied values before inserting them into HTML tags. We can exploit this by adding a close quotation mark " to the macro parameter. This effectively closes off the HTML property SnipSnap intended to write to. We can then continue to write anything we like, and it will be inserted as raw HTML!
An example is probably in order. Take the following use of the field macro.
This creates a form with an input box with name "blah" and with initial value "text". Here is the generated HTML:
<input size="18" name="blah" value="text"/>
Note that it inserts "blah" and "text" directly into the HTML tag. We can take advantage of this by appending " to the name, then adding other properties to the input tag. For example:
{field:blah" onclick="alert('boo!')|click me!|/}generates the following HTML code. (Note that we don't add a closing " to the onclick property, since SnipSnap still thinks it's part of the name, and will add the final closing ".)
<input size="18" name="blah"
onclick="alert('boo!');"
value="click me!"/>Here is what it looks like when it's rendered. Try it out!
I'm working on extending this exploit so that we can insert arbitrary HTML tags, not just arbitrary properties into existing tags. This is more difficult, since SnipSnap sanitizes all instances of the '<' and '>' characters. If you type '<' or even '\<' in a snip, SnipSnap renders it as < so that it's not interpreted as HTML. If I find a way to get around this, I'll post it here.
Happy Javascripting! (er, ECMAScripting :P)
Use this to search with Google
I just ran into this Snip. I integrated a Google Search with your help and wanted to share it with you. Maybe some people think it´s useful...
Here´s the code (Sorry for the quote tags but code is only one line and soo hard to read...):
{field:blah" onclick="javascript:void(q=prompt('Find on snipsnap.org:',''));if(q)void(location.href='http://www.google.com/search?btnG=Find&domains=snipsnap.org&sitesearch=snipsnap.org&q='+escape(q))|Click here to...|/|Find!}
This results in:
Now, if you click the text-field you can search snipsnap.org via Google Site search. I found this one much more useful than the
snipsnap-search. You can even use this one as a
snipsnap-bookmarklet integrated into your Browser.
Oh, and if someone could tell me how it is possible to display code in more than one line and keep it useable don´t hesitate to tell me…