ansaurus

Question

How to retrieve an input's value without the browser interpreting html special entities?

Answer 1

A:

escape & like this: &

<input type="text" name="scrubtext" value="&amp;lt;script&amp;gt;alert('scrubbed');&amp;lt;/script&amp;gt;" id="scrubtext"/>

David Murdoch 2010-04-20 21:02:26

While that does work, it doesn't feel right to me to have to "sanitize" the text that's already been sanitized once. The value of the input is a result from server-side (php) validation:$destination['transit_time'] = trim( htmlspecialchars( stripslashes( $destination['transit_time'] ), ENT_QUOTES ));I just want it to stay sanitized as I move it around the document.

CaptainQwyx 2010-04-20 21:15:27

David Murdoch 2010-04-20 21:34:16

But that is exactly what you want. When you write (simpified) `<input value="<">` then the value of the input **is** `<`. It you want the value to be `<` then you have to escape it to `<`. That is simply how its works, and there is nothing wrong about it.

RoToRa 2010-04-20 21:34:31

@RoToRa: _ AMEN!

David Murdoch 2010-04-20 21:39:34

@RoToRa: Ok I guess that makes sense. I was thinking there was a difference between <input value="<"> and <input value="<"> and hoping there was some way for me to preserve that difference. But thank you both, and everyone else who answered.

CaptainQwyx 2010-04-20 23:24:09

Answer 2

+2 A:

{html: "Your text is: <b>["+stext+"]</b>"}

That's your problem: you're taking a plain text string and adding it into HTML markup. Naturally any < characters in the text string will become markup, and you give yourself a potential client-side cross-site-scripting vulnerability.

You can HTML-escape, but there's no built-in function to do it in JS, so you have to define it yourself, eg.:

// HTML-encode a string for use in text content or an attribute value delimited by
// double-quotes
//
function HTMLEncode(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}

...

var result = new Element('p', {html: "Your text is: <b>["+HTMLEncode(stext)+"]</b>"});

However, it is generally simpler to use DOM methods to add plain text without the bother of string hacking. I believe Moo would do it like this:

var bold= new Element('b', {text: stext});
var result= new Element('p', {text: 'Your text is: '});
bold.inject(result);

bobince 2010-04-20 21:16:48

Answer 3

A:

You can change the & characters into &amp by using

var result = new Element( 'p', {html: "Your text is: <b>["+stext.replace(/&/g,'&amp')+"]</b>"} );

Addition: I would go with bobince on the benefit of using the DOM node properties, instead of injecting arbitrary HTML.

MasterAM 2010-04-20 21:17:14

ansaurus

tags:

views:

answers:

How to retrieve an input's value without the browser interpreting html special entities?

related questions