The HTML <option> elements used to initialise the multiselect control may contain special characters that must be encoded appropriately when setting the content and attributes of the multiselect control's HTML <li> elements. Problematic characters may include the double-quote, single-quote, greater-than, less-than and ampersand characters. The multiselect control uses simple string concatenation to construct the raw HTML of each <li> element without properly encoding the control's content and attribute values copied from the source element. This may lead to rendering errors, behaviour errors, and exposes the control to potential security issues. Instead, the available jQuery methods should be used to set the attribute and content values of constructed <li> elements to ensure the source <option> element settings are properly HTML encoded.
Steps to Reproduce:
- Create and input option element that contains the following valid HTML:
<option value="evil_html">Evil HTML "></option>
- When the control renders the corresponding element renders incorrectly in grid as
" data-selected-value="evil_html">Evil HTML ">
instead of the expected
Evil HTML ">
I have attached a simple HTML test page, based on the demo page content, that demonstrates the issue.
multiselect-encoding-bug.html.zip
Edit the link and style tags in the HTML header to specify the location of the multiselect CSS and JavaScript files in your test environment.
The HTML <option> elements used to initialise the multiselect control may contain special characters that must be encoded appropriately when setting the content and attributes of the multiselect control's HTML <li> elements. Problematic characters may include the double-quote, single-quote, greater-than, less-than and ampersand characters. The multiselect control uses simple string concatenation to construct the raw HTML of each <li> element without properly encoding the control's content and attribute values copied from the source element. This may lead to rendering errors, behaviour errors, and exposes the control to potential security issues. Instead, the available jQuery methods should be used to set the attribute and content values of constructed <li> elements to ensure the source <option> element settings are properly HTML encoded.
Steps to Reproduce:
<option value="evil_html">Evil HTML "></option>" data-selected-value="evil_html">Evil HTML ">instead of the expected
Evil HTML ">I have attached a simple HTML test page, based on the demo page content, that demonstrates the issue.
multiselect-encoding-bug.html.zip
Edit the link and style tags in the HTML header to specify the location of the multiselect CSS and JavaScript files in your test environment.