JQuery magicpreview plug-in | Hacker News Reader

JQuery magicpreview plug-in

rikrikrik.com

17 pointsbdfh4211 comments

Open articleView on HN

Plugin, plugin, huge word for some code that can be accomplished by this

using the plugin: $('form.example input:text').magicpreview('mp_');

without: $('form.example input:text').change(function() { $("mp_"+this).html(this.val()); });

or something like that =)

True, but rather less work when there are a good few form fields.

I thought it was worth posting for the idea - building up a finished view alongside data entry. Could have some utility.

Or without any library

formelement.onchange=function() {previewelement.nodeValue=this.value}

True there are caveats, some elements don't fire change until they loose focus... in which case formelement.onkeyup = formelement.onchange etc etc.

Hi, I'm the author of the plug-in, I actually hang around here quite often actually but I didn't realise my plug-in had been submitted until now.

The reason I made this plug-in was because I was doing what you were doing in your without-plugin example, but the form got more complex and suddenly the original code wasn't working as well. So I decided to make the plug-in to not only help me out but I figured that other people might be having the same problem too. However, if I was doing something quick and simple, I would do something akin to your without-plugin example.

This plugin is vulnerable to XSS -- try entering <script>alert('boom');</script> in the input field of the example.

You can use the options to set the output as text() rather than html(), e.g. $('div').magicpreview('mp_', { 'change': 'text' });

But yes, I should really add a flag to strip out any script elements :)

XSS detection is not just as simple as that. For example, in IE, entering the following produces a pop-up:

   <table style="background-image:url(javascript:alert(1))"><tr><td>Hi</td></tr></table>

However, read debt's comment below. XSS is irrelevant here since "XSS" means cross-site scripting, i.e., ,managing to embed Javascript into pages someone ELSE sees. Only the client sees this, it doesn't get reproduced for anyone else.

This is only on the front end. If the backend filters html tags then XSS won't be a problem.

Filtering tags is notoriously difficult, though, because of the variety of encodings possible. Maybe you meant "properly encodes output"? That's the typical solution.

Awesome. I'm doing a redesign/rebuild right now and I was about to write this myself to create this effect for the Contact form (I first saw it on ALA years back in the discussion area).

see also chain.js: http://github.com/raid-ox/chain.js/wikis

Reply on news.ycombinator.com