U4-11253 - New Chrome 66 trimStart function is overriding the Umbraco Core trimStart polyfill

Created by Janae Cram 19 Apr 2018, 17:20:18 Updated by Dennis Foster 12 Jul 2018, 08:26:09

Is duplicated by: U4-11257

Relates to: U4-11248

Today, I upgraded DocType Grid Editor for a client and discovered that there are a ton of 404 errors being returned. I posted [https://github.com/umco/umbraco-doc-type-grid-editor/issues/97 an issue] on Umco's DTGE GitHub project, and we discovered through our problem-solving that the issue has to do with the Chrome 66 release and the addition of the trimStart function, which doesn't actually trim the start of a string, and is overriding Umbraco's js trimStart polyfill extension [https://github.com/umbraco/Umbraco-CMS/blob/release-7.10.3/src/Umbraco.Web.UI.Client/lib/umbraco/Extensions.js#L90-L95 here].

To sum up, all of DTGE's API calls contained the tilde in the URL. The call that's stripping that out is here:

var url = umbRequestHelper.convertVirtualToAbsolutePath("~/umbraco/backoffice/DocTypeGridEditorApi/DocTypeGridEditorApi/GetContentTypes");

That is using the trimStart function being called [https://github.com/umbraco/Umbraco-CMS/blob/release-7.10.3/src/Umbraco.Web.UI.Client/src/common/services/umbrequesthelper.service.js#L30 here].

Some Chrome debug testing shows that using trimStart in the developer tools is doing absolutely nothing, as you can see in my attached image.

I already linked it, but for our thorough conversation, please check the DTGE issue: https://github.com/umco/umbraco-doc-type-grid-editor/issues/97 There was also a forum discussion with other people talking about how it was not just DTGE (which is part of how we hunted it down) that you can read through here: https://our.umbraco.org/projects/backoffice-extensions/doc-type-grid-editor/doc-type-grid-editor-feedback/91647-404-on-getcontenttypeicon-and-4931dtgepreview-1

trimStart is being used in a few places in Core ([https://github.com/umbraco/Umbraco-CMS/search?l=JavaScript&q=trimStart apparently 7]) that could have unexpected results, so I wanted to raise this as quickly as possible since it's likely to cause a lot of problems for Chrome users :)

=Manual patching / workaround= A workaround for all affected sites is to update the file ~/Umbraco/lib/umbraco/Extensions.js. The changes that need to be made are in the following two functions:

if (!String.prototype.trimStart) {

    /** trims the start of the string*/
    String.prototype.trimStart = function (str) {
        if (this.startsWith(str)) {
            return this.substring(str.length);
        }
        return this;
    };
}

if (!String.prototype.trimEnd) {

    /** trims the end of the string*/
    String.prototype.trimEnd = function (str) {
        if (this.endsWith(str)) {
            return this.substring(0, this.length - str.length);
        }
        return this;
    };
}

In order to make Umbraco work properly again, you need to remove the checks if (!String.prototype.trimStart) and if (!String.prototype.trimEnd). The result should look like this:

/** trims the start of the string*/ String.prototype.trimStart = function (str) { if (this.startsWith(str)) { return this.substring(str.length); } return this; };

    /** trims the end of the string*/
    String.prototype.trimEnd = function (str) {
        if (this.endsWith(str)) {
            return this.substring(0, this.length - str.length);
        }
        return this;
    };

After changing this file, you will also need to update ~/Config/ClientDependency.config, increase the version number in there by one. This will recycle the site and clear browser cache. After that plugins that were broken (like Doc Type Grid Editor) should work again.

1 Attachments

Comments

    /** trims the start of the string*/
    String.prototype.trimStart = function (str) {
        if (this.startsWith(str)) {
            return this.substring(str.length);
        }
        return this;
    };
}

if (!String.prototype.trimEnd) {

    /** trims the end of the string*/
    String.prototype.trimEnd = function (str) {
        if (this.endsWith(str)) {
            return this.substring(0, this.length - str.length);
        }
        return this;
    };
}

    /** trims the end of the string*/
    String.prototype.trimEnd = function (str) {
        if (this.endsWith(str)) {
            return this.substring(0, this.length - str.length);
        }
        return this;
    };