jQuery Security Issues & Rectifying Vulnerabilities with Upgradation

Share

jQuery Security Issues

jQuery is an open source library that allows to add client-side programming to a website. It is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. jQuery is a free, software using the permissive MIT License. To implement jQuery, a web developer simply needs the reference of the jQuery JavaScript file within the HTML of a webpage. Some websites host their own local copy of jQuery, while others simply provide the reference of the library hosted by Google or the jQuery server.

<script type=”text/JavaScript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

It’s worth noting that almost all of  jQuery security issues surround functions which were so commonly misused that the jQuery team modified behavior to protect developers. Although the changes have been widely interpreted as bug fixes, it can be easily argued that vulnerabilities introduced by jQuery are nothing more than developer error.

This article aims to help the organizations to better assess the risk of common jQuery security issues.

jQuery Security Issues &Vulnerabilities

The older version of jQuery (older than 3.0.0) has a security issue which makes the system more vulnerable to hacking. The issue is, when a cross domain request is made using $get(…). Every text/JavaScript response gets executed irrespective of the datatype of the response.

Example:

When a request like $.get(‘http://sakurity.com/jQueryxss’) is made, the older versions of  jQuery does not have the capability to filter the response if it is of type “Script”, which makes the code vulnerable to execute malicious scripts.

How to Fix the jQuery Security Issues

There are two options to fix this security issue.

  • To apply a patch manually in the application, just after loading the jQuery
  • To upgrade the jQuery version to latest, which is 3.5.1

Patch Fix

The patch fix, an Ajax Prefilter, is included in each Ajax call, which checks the call that is made in a cross domain and disables the script contents of the same. This will prevent the call from executing any malicious scripts that are received as a response to the call.

Patch to add

jQuery.ajaxPrefilter( function( s ) {

if ( s.crossDomain ) {

s.contents.script = false;

}

} );

Upgrade jQuery Library to Version 3.5.1

The other option to fix the issue is to upgrade the jQuery library to its latest version which is 3.5.1. The jQuery version can be upgraded from NuGet package manager where one can type in the library that needs to be upgraded. The NuGet shows the current version of the library in the application and the latest versions to upgrade.

Upgrade jQuery Library to Version 3.5.1

Once selected and upgraded to new version, the following Js files gets added or replaced.

jQuery Js file

Impacts of jQuery Upgrade

The jQuery newer version has a bunch of depreciated features from the older versions of jQuery. And once upgraded in an application, there might be some impact in the system since the old features might not work in the newer version. Few of such issues are discussed below.

General Issues after Upgrade

Following are the few features which are depreciated in the newer version of jQuery and the fix for the same.

  1. Issue with Load Function

$(window).load(function(){..}) is depreciated. And the fix is to change the load method to “on”.

         Fix: $(window).on(‘load’, function(){..})

  1. Issue with Live Function

$(selector).live(‘event’, function(){}) is depreciated. And the alternate is to use the following format.

         Fix: $(document).on(‘event’, ’selector’, function(){..})

  1. Issue with Trim Function

         $.trim() is depreciated in in the latest version.

         Fix: String.Prototype.Trim()

4. Issue with Size Function

        size() is depreciated in jQuery 3.4.1/3.5.1. Instead length is the suggested option.

        Example: $(‘.mappings’).find(‘tr’).size()

        Fix: $(‘.mappings’).find(‘tr’).length

  1. Changes in Behavior of Appending Rows to Table: In the latest version of jQuery 3.4.1/3.5.1, when a row is appended to a table, it does not append it to <tbody></tbody> of the <table>. In the old version of jQuery, when a row is appended to a table, it appends inside <tbody></tbody>.

         Example:

         HTML: <table id=”testId”></table>

         jQuery: $(“#testId”).append(“<tr></tr>”)

        Output:

        Old Version: <table id=”testId”><tbody><tr></tr></tbody></table>

        New Version: <table id=”testId”><tr></tr></table>

How it Impacts

Due to this, the DOM gets changed. And in jQuery, if a specific <tr> tag in the table is fetched using the <tbody>, it would not give the correct value, since the <tbody> is not available.

 For e.g.: $(‘#testId tbody>tr’).length

This would give a wrong value.

The Fix: To fix this issue, whenever a <tr> tag is appended to a <table>, it is advisable to check if a <tbody> is available for the table and if not, wrap a <tbody> first and then the <tr>.

  1. Issue with Self-closing Tags and Non Self-closing Tags: In the latest version of jQuery, if a self-closing tag is not self-closed or a non-self-closing tag is self-closed, it changes the DOM and hence breaks the UI of an application.

          Example

          Self-closing tag is not self-closed

         Correct: <input id=’id’ />

         Incorrect: <input id=’id’></input>

          Non self-closing tag is self-closed

        Correct: <label></label>

        Incorrect: <label />

How it Impacts

In the latest jQuery version, when a non-self-closing tag is self-closed or self-closing tags are not self-closed, the DOM does not close the elements and it remains opened, causing the UI to break.

The Fix: As per the above example, the self-closing tags and non-self-closing tags should be closed accordingly.

Conclusion

The document speaks about the jQuery security issue that can be resolved by adding a patch or upgrading jQuery to its latest version and this can be done based on the project’s needs and requirements. The advantage of upgrading to latest version is that the patch comes as part of the library and takes care of it without any further code. And as part of the upgrade, few generic issues and its fixes are discussed as well. This concludes the document on security issue, upgrading the jQuery version to 3.5.1 and some of its impacts and respective fixes.

By,
S R Nidhin
Senior Software Engineer, RapidValue

Please Share Your Thoughts & Comments Below.

How can we help you?