[CLOSED] ComboBox html encoding

[Hani]

If I have an item inside of my combo box with '&' in it, it's shown correctly.

However, once that item is selected, the combobox value displays & instead.

I could manually htmlunencode the value, but the extra encoding isn't needed, surely?

[suntoast]

Bump

Anyone have a fix for this?

[jsakalos]

I was trying to put some &'s in my combos (Ext 1.1 and also Ext svn 876) but I was not able to reproduce it.

Do you have a link where I could see it?

[suntoast]

It happens when you htmlEncode the strings on the way down (in case the user put html into the strings

I can't put up a public page, but you can reproduce it pretty easily.

If you go to:
http://extjs.com/deploy/ext/examples/form/combos.html
(or if you have a local build)
C:\apps\www\deploy\ext-2.0\examples\form\combos.html

In the states.js file in that directory, instead of

Ext.exampledata.states = [
        ['AL', 'Alabama'],
        ['AK', 'Alaska'],
        ['AZ', 'Arizona']
]

do:

Ext.exampledata.states = [
        ['AL', 'Alabama & test'],
        ['AK', 'Alaska'],
        ['AZ', 'Arizona']
]

You'll notice it looks right in the dropdown text... but not right once it's been selected.

[jsakalos]

What should then be shown for ['AL', 'Alabama & test']? & or & ?

[suntoast]

I'd expect to see Alabama & test, which is what we would post back to the server and would stick in the database.

Reason for needing to htmlEncode the strings is that a user might enter <h1>Alabama</h1> into a text field, and we'll save it to the database. When it comes out, it needs to not mess with the html of the page.

If we don't htmlEncode it, then inside the Ext combo box, that "option" will have a real H1 stuck into it, which will mess up the display.

Ideally we would have a new option for Ext.form.ComboBox that will unHtmlEncode before setting the value of the textbox. That way people expecting the current behavior won't have any problems.

unHtmlEncode() has been mixed into String in prototype.js, though I don't see a similar function in Ext.

If that method existed, could do something like:

setValue : function(v){
        var text = v;
        if(this.valueField){
            var r = this.findRecord(this.valueField, v);
            if(r){
                text = r.data[this.displayField];
            }else if(this.valueNotFoundText !== undefined){
                text = this.valueNotFoundText;
            }
        }
        this.lastSelectionText = text;

        if(this.hiddenField){
            this.hiddenField.value = v;
        }
        
         // new code here
         if (this.unEscapeValue) {
            text = text.unescapeHTML();
        }

        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
    },

If you don't think this is useful for everyone, we can roll that solution for ourselves, but htmlEncoding data that a customer might edit is a normally a "good thing".

[mystix]

values in an Ext.data.Record should always be the actual value pulled from / going into the backend database i.e. 'Alabama & test', and not the htmlEncode-ed value used for display i.e. 'Alabama &amp; test'.

once this is straightened out, all that is needed is to correctly handle html entities when displaying data. in the case of the ComboBox, all you'll need is an Ext.Template like so:
http://extjs.com/forum/showthread.php?t=11113

[pejsajan]

ComboBox component can cause XSS.

Try example from examples direcotory examples/form/combos.html and in file states.js change code to:

Ext.exampledata.states = [
  ['AL', 'Alabama <b>bold</b><img scr=xss onerror=alert("xss")>', 'The Heart of Dixie'],
  ...

Than run this example in Firefox and expand the list of ComboBox. Javascript alert with test "XSS" appears (XSS vulnerability).

Also ComboBox list and ComboBox selected value is not consistent when some evil characters are in data. How can I solve this?

[mystix]

this has been discussed many times before.

as mentioned 1 post up:
http://extjs.com/forum/showthread.php?t=11113

try that.

[edit]
and these too:
http://www.google.com/cse?cx=0116939...utf-8&oe=utf-8

[pejsajan]

thanks