Remediation of XSS: Nested Contexts (part two)

In part one of this series I covered the correct use of JavaScript encoding and how this already covers the issue of the “nested” contexts. Now, onto a better solution – don’t use HTML Event attributes! Given the vulnerable code:

<div onclick="showError('<%=request.getParameter("error")%>')">
An error occurred, click here to see the details</div>

Instead of adding encoding to a complicated location within the DOM like the onclick event attribute - hook all of your events via JavaScript (example below uses JQuery):

<div id="errorBanner">An error occurred, click here to see the details
   <div id="errorDetails" style="display:none">
      <%=Encode.forHtml(request.getParameter("error")) %>
   </div>
</div>
<script type="text/javascript">
   $('#errorBanner').click($('#errorDetails').show());
</script>

The key here is to avoid placing dynamic data into "nested contexts" such as an event handler. This makes the remediation much simpler in many cases and lowers the amount of security knowledge a developer needs to understand how to fix the vulnerability.

The additional benefit of using JS to hook your events is that you can then externalize your JavaScript and define a Content Security Policy (CSP) for you site. CSP is by no means a magic bullet – but restrictive CSP policy can limit the damage potential of an XSS exploit.