Salesforce Security Review Error - Possible XSS / escape='false'

Question

Salesforce Security Review Error - Possible XSS / escape='false' : How to solve this issue for the below set of line

$calEvent.find(".wc-time").html(calEvent.status+"<br/>
<div style='font-size:12px;'>"+calEvent.name+ " " +calEvent.lname+ "</div>");      

Answer 1

This code has a cross site scripting vulnerability: if calEvent.name, calEvent.status, or calEvent.lname contain html code, then this code will be rendered.

This is because you are using the unsafe .html() function which must never be used with external data unless that data is properly output encoded.

One option is to html-encode the parameters:

$calEvent.find(".wc-time").html(htmlEncode(calEvent.status) + "<br/>
<div style='font-size:12px;'>" + htmlEncode(calEvent.name) + " "
+ htmlEncode(calEvent.lname)+ "</div>");

Here htmlEncode should be a trusted (and not homespun) html encoding function -- we recommend the secureFilters library:

https://github.com/SalesforceEng/secure-filters

...in which case htmlEncode = secureFilters.html

Another option is to not use jQuery here at all, but build up the element directly with DOM accessors.

//assuming calEvent is your root DOM element
var elem = calEvent.getElementByClassName('wc-time')[0];
var child = document.createElement('div');
elem.textContent = calEvent.status;
child.style = 'font-size:12px;';
child.textContent = calEvent.name + " " + calEvent.lname;
elem.appendChild(child); //<br> is redundant here

Another approach if you have structured elements like this is to use an html template, with proper escaping (e.g. <%- -%>) in erb style templates.

There are other options as well. The point is that great care must be taken when using rendering functions such as .html() or .append().