Upgrading to jQuery 3.0.0

[dandersonMLT]

The site we use for PCI Compliance testing is reporting that there are security vulnerabilities in jQuery version: 1.10.2 and requesting we upgrade to 3.0.0

"Two vulnerabilities were fixed in jQuery 3.0.0.
First, jQuery before 3.0.0 is vulnerable to Cross-site Scripting (XSS) attacks when a cross-domain Ajax request is performed without the dataType option, causing text/javascript responses to be executed.
Second, jQuery 3.0.0-rc.1 and before 3.0.0 is vulnerable to Denial of Service (DoS) due to removing a logic that lowercased attribute names.
Any attribute getter using a mixed-cased name for boolean attributes goes into an infinite recursion, exceeding the stack call limit."


We are currently using AbleCommerce GoldR10SR1 (build 8620)
I know that there are a few changes in 3.0.0 with some features from 1.10.2 depreciated or removed.

Has 3.0.0 been tested and are there any instructions or guides on what needs to be changed to upgrade to 3.0.0?

Thanks

[dandersonMLT]

any update?

[Katie]

Has 3.0.0 been tested and are there any instructions or guides on what needs to be changed to upgrade to 3.0.0?

This is the first I've heard of a failed scan. We have not tested or have any immediate plans to upgrade to jQuery 3.0.0.

Have you already applied the patch we released for XSS?
http://help.ablecommerce.com/index.htm# ... ailure.htm

[dandersonMLT]

Yes, I applied the XSS patch back in October, but the PCI compliance scan is still reporting jQuery version as a vulnerability

[dandersonMLT]

Information about the 2 vulnerabilities referenced can be found here:

https://nvd.nist.gov/vuln/detail/CVE-2016-10707

https://nvd.nist.gov/vuln/detail/CVE-2015-9251

[Katie]

I opened an issue report yesterday. As soon as it's possible, we'll have a developer take a closer look at each security issue and see what options are available.

Thanks
Katie

[dandersonMLT]

Thanks Katie

[Katie]

Hi there,

I wanted to give you an update. It looks like good news possibly. Our initial tests show that we can upgrade jQuery. The developer needs to do some testing, and get together the information on patching an install.

Hopefully, it will be within 2 days.

Thanks
Katie

[Katie]

Hi,

First round of testing has been completed. The developer has written some instructions for upgrading to jQuery 3.3.1.
Please let us know if this gets you through the PCI scan.

Thanks
Katie

AG Gold Update to JQuery v3.3.1:
--------------------------------
1. Download the JQuery v3.3.1 from the following URL:
https://code.jquery.com/jquery-3.3.1.min.js

and save it to following path:
~/Website/Scripts/jquery-3.3.1.min.js

2. Update the following website files where the "jquery-1.10.2.min.js" is referenced, update the src reference to point to new JQuery file:

Website\AbleCommerce.csproj
Website\Admin\Admin.Master.cs
Website\Admin\Login.aspx
Website\Admin\Logout.aspx
Website\Admin\Utility\EditHtml.aspx
Website\Layouts\Base.Master.cs
Website\Layouts\Fixed\Base.Master.cs
Website\Mobile\Members\PaymentTypes.aspx

To update the src reference search the text "Scripts/jquery-1.10.2.min" in above files and replace with "Scripts/jquery-3.3.1.min.js".

3. Save the files and recompile the website project.

4. Perform some testing of retaila and admin website pages to check if every thing working good.

5. Remove the old version jquery-1.10.2.min.js file from the scripts folder.

[jguengerich]

In the source code, the file \CommerceBuilder.WebApi\Areas\HelpPage\Views\Help\DisplayTemplates\TestClientReferences.cshtml has the following line:

Code: Select all

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js" defer="defer"></script>

Should that be changed too? It looks like reference to the newest version would be:

Code: Select all

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" defer="defer"></script>

Also, there are several other versions of jquery files:
~Website/Scripts/jquery-1.4.4.min.js: Should this be removed?
~Website/Scripts/Mobile/photoswipe/jquery-1.6.4.min.js: Should this be updated?

[jguengerich]

Does the ~Website/AbleCommerce.csproj file only exist in the WAP version?

[Naveed]

Does the ~Website/AbleCommerce.csproj file only exist in the WAP version?

Yes it only exists WAP version. So do not worry about it if you are using WSP version.

[Naveed]

In the source code, the file \CommerceBuilder.WebApi\Areas\HelpPage\Views\Help\DisplayTemplates\TestClientReferences.cshtml has the following line:

Code: Select all

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js" defer="defer"></script>

Should that be changed too? It looks like reference to the newest version would be:

Code: Select all

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" defer="defer"></script>

You can leave as it is, if you want. I think it will not trigger the PCI Compliance issues.

Also, there are several other versions of jquery files:
~Website/Scripts/jquery-1.4.4.min.js: Should this be removed?

I have not confirmed though, but I think this is not used anywhere, so if you want to delete it make sure it is not used anywhere.

~Website/Scripts/Mobile/photoswipe/jquery-1.6.4.min.js: Should this be updated?

We have not tested this change. I will not recommend updating or changing this this, as it seems it is used by some third party plugin.

[dandersonMLT]

Thank you everyone, this has resolved our issue with PCI Compliance

[Katie]

That's awesome news! Thanks for letting us know. I'll update the issue report with your confirmation.

[jmestep]

One more change to fix an error in the browser console:
In Admin.master I had to change

Code: Select all

 $(window).load(function () {
          $("#stickyActions").sticky({ topSpacing: 0, center: true, className: "stickyActions" });
        });

to

Code: Select all

$(window).on("load",function () {
          $("#stickyActions").sticky({ topSpacing: 0, center: true, className: "stickyActions" });
        });

Error was
Uncaught TypeError: a.indexOf is not a function at ..

https://forum.jquery.com/topic/chrome-e ... a-function
$(window).load was deprecated long ago. it was removed.

[jmestep]

I've been patching sites for this jQuery issue since there isn't an official AC patch. When I update the admin to use 3.3.1, the calendar on reports shows Asian font. This is on R9, R11 and R12 sites.

Asian.jpg

[jguengerich]

I'm not a javascript or jquery expert, but I did a little testing and research, and here is what I found:

The issue with the simplified Chinese font appears to be a timing issue with the localizations for the jquery datepicker widget. There is a jquery-ui-i18n.min.js file in the scripts folder that has all the regional labels, etc. for the datepicker. If you remove that file, English is always displayed.

I installed the non-minimized version of jquery-ui and the non-minimized version of just the simplified Chinese regional info of the jquery-ui-i18n file so I could do some debugging. In this configuration (even after I removed breakpoints in the browser's debugger), it also always showed English. However, I could see that when the datepicker is initialized, it goes through each language, loads the info, and sets the datepicker's defaults to that language. Then, the script registered by PickerAndCalendar.ascx.cs sets the datepicker's defaults to whatever the user's region is (English in my case).

When the minimized version of jquery-ui and jquery-ui-i18n (with all languages) are used, the simplified Chinese is sometimes shown. This leads me to believe that the simplified Chinese, which is the last language in the jquery-ui-i18n file, is sometimes getting loaded after the script in PickerAndCalendar.ascx.cs sets the default to English. As I mentioned above, as each language is loaded, the default changes to that language. So it seems that the sequence is this:

• Load language A / set default to language A
  Load language B / set default to language B
  .
  .
  Set default to English
  .
  .
  Load language Y / set default to language Y
  Load simplified Chinese / set default to simplified Chinese

Instead of this:

• Load language A / set default to language A
  Load language B / set default to language B
  .
  .
  Load language Y / set default to language Y
  Load simplified Chinese / set default to simplified Chinese
  Set default to English

However, I am unable to get the FireFox debugger to work when the minimized versions of the jquery files are being used, so I can't verify this. And I'm not sure how to solve it.

Finally, I did notice that if the simplified Chinese shows, (for example on the Sales Over Time report), clicking the Report button and then the date field causes English to be shown.

[jguengerich]

So after a little more testing, it looks like going through the jquery-ui-i18n.min.js file and removing all the calls to setDefaults fixes the issue.

Everywhere there is something like this:

Code: Select all

,e.datepicker.setDefaults(e.datepicker.regional.af)

or this:

Code: Select all

,e.datepicker.setDefaults(e.datepicker.regional["zh-TW"])

remove it (make sure you remove the leading comma).

There's no reason to set each language to the default after "loading" it. I'm guessing the code is there because someone combined code from all the individual files found here:
https://github.com/jquery/jquery-ui/tree/master/ui/i18n. These individual files were probably coded with the assumption that the programmer would only use the one they wanted, in which case they would want to set the defaults to that language. However, when combining them to simply have them all loaded so they are available, the setDefaults code should have been removed.

[jmestep]

Thanks, Jay. I had noticed that if I did Cntrl F-5 after first loading the page, it changed to English. But if I left the page and went back, it showed Chinese again. I had been able to get it to work by downloading a new jquery-ui-i18n.min.js file and new jquery ui file. I am hesitant to go that route because of other areas on the site that might be affected that I might not know about. I was hoping that AC would support their product and issue a patch. It didn't happen on an R6 site, though. Different versions of files. -Edit]It looks like R12 SR2 is OK and we have found that removing the reference to the jquery-ui-i18n.min.js file in the Admin.Master.cs file works on some sites.
(So much for "don't edit min files"!!)

[jguengerich]

I had been able to get it to work by downloading a new jquery-ui-i18n.min.js file and new jquery ui file.

Interesting, I thought I tried that and had the same problem, but maybe I never tried that combo. As mentioned, it worked fine with the un-minimized new version of jquery-ui and the un-minimized version of just the zh-TW "i18n" file.
In any case, I guess we have a couple of work-arounds now for those who are interested .

[jmestep]

I ran into another issue on 4 versions of AC, including R12 SR2. Admin, search in header- when you click search, the dropdown that allows you to select orders, products, etc. is behind other content, then disappears fast.

4-30-2018 1-08-14 PM.jpg

[jguengerich]

Did a little more digging, found a work-around for the search issue.

There was a error message in the browser console:

TypeError: r.getClientRects is not a function

against file jquery-3.3.1.min.js. Googling that error eventually led me to the following.

Download the jquery-migrate-3.0.1.min.js file from here (link is in the Download section of the Readme):
https://github.com/jquery/jquery-migrate
Save it to the /Scripts folder of the AC site.
Add two jqueryMigrate lines to Admin.Master.cs, making sure the jqueryMigrate lines are after the jquery lines:

Code: Select all

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AbleCommerce.Admin
{
    public partial class Admin : System.Web.UI.MasterPage
    {
        protected void Page_Init(object sender, EventArgs e)
        {
            // insert necessary javascripts
            string scriptTag = "<script src=\"{0}\" type=\"text/javascript\"></script>\r\n";
            string jquery = Page.ResolveUrl("~/Scripts/jquery-3.3.1.min.js");
            string jqueryMigrate = Page.ResolveUrl("~/Scripts/jquery-migrate-3.0.1.min.js"); // NEW LINE
            string jqueryUI = Page.ResolveUrl("~/Scripts/jquery-ui.min.js");
            string jqueryUIi18n = Page.ResolveUrl("~/Scripts/jquery-ui-i18n.min.js");
            string superfishUrl = Page.ResolveUrl("~/Scripts/superfish.js");
            string hoverIntentUrl = Page.ResolveUrl("~/Scripts/hoverIntent.js");
            string equalHeightsUrl = Page.ResolveUrl("~/Scripts/jquery.equalheights.js");
            string jquerySticky = Page.ResolveUrl("~/Scripts/jquery.sticky.js");
            head1.Controls.Add(new LiteralControl(string.Format(scriptTag, jquery)));
            head1.Controls.Add(new LiteralControl(string.Format(scriptTag, jqueryMigrate))); // NEW LINE
            head1.Controls.Add(new LiteralControl(string.Format(scriptTag, jqueryUI)));
            head1.Controls.Add(new LiteralControl(string.Format(scriptTag, jqueryUIi18n)));
            head1.Controls.Add(new LiteralControl(string.Format(scriptTag, superfishUrl)));
            head1.Controls.Add(new LiteralControl(string.Format(scriptTag, hoverIntentUrl)));
            head1.Controls.Add(new LiteralControl(string.Format(scriptTag, equalHeightsUrl)));
            head1.Controls.Add(new LiteralControl(string.Format(scriptTag, jquerySticky)));

            // admin pages can be cached for browser history
            Response.Cache.SetCacheability(HttpCacheability.Private);
        }
    }
}

Search now works.

There is also a development version of jquery-migrate available (link on same page as above) that has debugging messages that will show up in the browser console. I was able to see the deprecation messages with the development version, but wasn't sure how to fix them.

[jmestep]

Thanks, Jay. I had read of the jquery.migrate, but hadn't researched. I hated to add another jquery file to the sites, but I might have to. We are having issues with other jQuery libraries also, like sliders so it might fix them also.

[jguengerich]

Short version:
The Search bug can also be fixed by updating jquery-ui to the current version (1.12.1). However, I have not done systematic testing to see if that breaks anything else, and I have not tried updating all the .css files that come with jquey-ui and are located in AbleCommerce's Themes folders.

Long version:
jQuery-ui version 1.12.1 can be downloaded from here: http://jqueryui.com/. Use the "Stable" button in the top right of the main content area.

Code below is from the non-minimized jquery-ui files.

jQuery-ui version 1.10.3 (the version that came with AbleCommerce) has a getWithinInfo function that calls the jquery .offset() function in a way that is not compatible with jQuery 3.3.1. Specifically, in jQuery 3 the .offset() function can only be called on a valid element. For the Search button code, getWithinInfo ends up being called in such a way that the withinElement variable is not a valid element:

Code: Select all

	getWithinInfo: function( element ) {
		var withinElement = $( element || window ),
			isWindow = $.isWindow( withinElement[0] );
		return {
			element: withinElement,
			isWindow: isWindow,
			offset: withinElement.offset() || { left: 0, top: 0 },
			scrollLeft: withinElement.scrollLeft(),
			scrollTop: withinElement.scrollTop(),
			width: isWindow ? withinElement.width() : withinElement.outerWidth(),
			height: isWindow ? withinElement.height() : withinElement.outerHeight()
		};
	}

Note how in the seventh line, .offset() will always get called.

jQuery-ui 1.12.1 changes this function so that the .offset() function is not called unsless withinElement is a valid element:

Code: Select all

	getWithinInfo: function( element ) {
		var withinElement = $( element || window ),
			isWindow = $.isWindow( withinElement[ 0 ] ),
			isDocument = !!withinElement[ 0 ] && withinElement[ 0 ].nodeType === 9,
			hasOffset = !isWindow && !isDocument;
		return {
			element: withinElement,
			isWindow: isWindow,
			isDocument: isDocument,
			offset: hasOffset ? $( element ).offset() : { left: 0, top: 0 },
			scrollLeft: withinElement.scrollLeft(),
			scrollTop: withinElement.scrollTop(),
			width: withinElement.outerWidth(),
			height: withinElement.outerHeight()
		};
	}

Note how the ternary operator in line 10 prevents .offset() from being called in some situations.

The jquery-migrate dbugging does show some deprecations on a few pages I checked, but they apparently are things that still work even without jquery-migrate. For example, things like using .click(...) instead of .on("click", ...).