Cannot load external jquery in SpellCheckControl

[kalyan]

Hello,

We have been using Telerik.Web.UI(v4.0.30319)  SpellCheck control. This control loads old version jquery(v1.11.0). We are updating jQuery reference in our project to 1.12.2 but SpellCheck control is still loading 1.11.0 jquery. I followed a post in Telerik Forums but I cannot get external jQuery loaded using that post. 

 

SpellCheckCtrl.asx

<form id="form1" runat="server">

    <script src="../../../../Scripts/jquery-1.12.2.js"></script>
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" EnableEmbeddedjQuery="false">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" Path="~/Scripts/jquery-1.12.2.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
    </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadSpell ID="spell1"
        runat="server"
        IsClientID="true"
        HandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"
        DictionaryPath="~/SpellCheck/"
AllowAddCustom="false"
        SpellCheckProvider="EditDistanceProvider"
        EditDistance="2"
        ButtonType="None"></telerik:RadSpell>
    <script language="c#" runat="Server">
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            if (this.spell1 != null)
            {
                var userSettings = QM.Live.ServiceClients.ServiceLocator.Get<QM.Live.Utilities.Client.UserSettings>();
                this.spell1.Language = userSettings.GetCulture();
                var spellCheckCulture = userSettings.SpellCheckCulture;
                if (spellCheckCulture == null) spellCheckCulture =
                    QM.Live.Utilities.Client.Constants.DefaultCulture;
                this.spell1.DictionaryLanguage = QM.Live.Utilities.Client.SpellChecker.GetDictionary(spellCheckCulture);
            }
        }
    </script>
</form>

<script>
    var spellCheckerClientId = '<%=spell1.ClientID %>';
</script>

Web config:

<add key="Telerik.ScriptManager.EnableEmbeddedjQuery" value="false" />

 

If I don't add web config key, this control always loads embedded jquery. If I add web config key, I see that jQuery is undefined. Please help to get it resolved. Thanks.

[kalyan]

Can anyone please help here?

[Rumen]

Hi Kalyan,

If you are using an old Telerik version, there is not guarantee that it will work properly with the newer versions of jQuery.

That's why my recommendation is to download the latest and greatest Telerik ASP.NET AJAX version 2019.3.1023, which comes built-in with jQuery 1.12.4, which is the most secure one among the 1.12.x versions of jQuery. You can find more information at jQuery Version History in Telerik UI Controls.

Best Regards,
Rumen
Progress Telerik

[kalyan]

Thanks for your reply Ruben. We qre trying to use extrnal jQuery instead of using embedded jQuery so i followed the post but it is not loading external jQuery. Am i missing anything? We want to use 1.12.2 jquery. Is it possible?

[kalyan]

jQuery 1.12.4 has XSS vulnerabilities which is a concern so we want to go with 1.12.2. Can you please guide us on this?

[kalyan]

Hello Rumen,

We are able to disable embedded jquery and load a different version jQuery but we get below error. Any help will be appreciated.

ScriptResource.axd?d=A22-SyJgKhJ5FWUJePaPlNsA6YvteATTpBdNH4IPHwO9DyZNELfpIDjFNWUnwGId_gfet9PdOVAdSDozWEEV94_QVszbO48milkrvAvIBH9kQJgEpVGdU2kUxI_cuEzmsR7FGoUCW4QMGKUQ6lQq8Q2&t=742c8c8:679 Uncaught TypeError: p.onEvent is not a function
    at a.ResizeExtender._configureHandle (ScriptResource.axd?d=A22-SyJgKhJ5FWUJePaPlNsA6YvteATTpBdNH4IPHwO9DyZNELfpIDjFNWUnwGId_gfet9PdOVAdSDozWEEV94_QVszbO48milkrvAvIBH9kQJgEpVGdU2kUxI_cuEzmsR7FGoUCW4QMGKUQ6lQq8Q2&t=742c8c8:679)
    at a.ResizeExtender._configureHandleElements (ScriptResource.axd?d=A22-SyJgKhJ5FWUJePaPlNsA6YvteATTpBdNH4IPHwO9DyZNELfpIDjFNWUnwGId_gfet9PdOVAdSDozWEEV94_QVszbO48milkrvAvIBH9kQJgEpVGdU2kUxI_cuEzmsR7FGoUCW4QMGKUQ6lQq8Q2&t=742c8c8:673)
    at a.ResizeExtender.initialize (ScriptResource.axd?d=A22-SyJgKhJ5FWUJePaPlNsA6YvteATTpBdNH4IPHwO9DyZNELfpIDjFNWUnwGId_gfet9PdOVAdSDozWEEV94_QVszbO48milkrvAvIBH9kQJgEpVGdU2kUxI_cuEzmsR7FGoUCW4QMGKUQ6lQq8Q2&t=742c8c8:473)
    at new a.ResizeExtender (ScriptResource.axd?d=A22-SyJgKhJ5FWUJePaPlNsA6YvteATTpBdNH4IPHwO9DyZNELfpIDjFNWUnwGId_gfet9PdOVAdSDozWEEV94_QVszbO48milkrvAvIBH9kQJgEpVGdU2kUxI_cuEzmsR7FGoUCW4QMGKUQ6lQq8Q2&t=742c8c8:453)
    at b.ClassicView.enableMoveResize (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:1662)
    at b.RadWindow._enableMoveResize (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:226)
    at b.RadWindow.set_behaviors (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:1123)
    at b.ClassicRenderer.createUI (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:1387)
    at b.RadWindow._createUI (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:792)
    at b.RadWindow.setUrl (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q07tE-Sp5RGF_Ue0raODaJUlf64zfwf9mIMoAzstFJ1T-x3I7shoCCOYceL_XKfx9CFr18R8S8AWRs8-eZNaGn6Qky4rw-S6SquE1DSIpSvwg2Uoqp0YAjGco81BNltSzg2&t=742c8c8:980)

[Rumen]

We have solved the vulnerability in jQuery 1.12.4 by patching it with the fix provided by jQuery team

Telerik® UI for ASP.NET AJAX R1 2019 - present are using jQuery version 1.12.4, modified to backport their fix for a potential CORS XSS vulnerability. Static code scans may still show this vulnerability, but it will be a false positive.

This information is available at jQuery Version History in Telerik UI Controls.

All you have to do is to upgrade to R1 2019 or later version of Telerik.Web.UI. After that you will not need to change the jQuery version.

 

Regards,
Rumen
Progress Telerik

[kalyan]

Thanks a lot, Ruben. Tried with latest trial version Telerik package but I still get same error (p.onEvent is not a function). We are okay to use latest version package but in future, if we want to use other version jQuery, it looks like, we will still face same error. Is there any way to use our own version jQuery?

[Rumen]

Hi Kalyan,

I followed the instructions in the following article Including external jQuery and was able to configure the spellchecker to use an external jQuery. For your convenience I have recorded my test and also attached my test page.

Regards,
Rumen
Progress Telerik

[kalyan]

Hello,

While trying to Peek into the DialogHandler class we noticed that there are below properties which can help us

private string _scriptManagerProperties;
private RadScriptManager _scriptManager;
Also, another property UseRSM 

We feel if we can find a way to set these properties with any attributes -  we can set our defined jQuery on the DialogHandler we are using. Can you please guide us a way.

Regards,

Kalyan

 

[Rumen]

Hi Kalyan,

Please let me wrap up the long thread:

• The latest version of RadSpell (Telerik.Web.UI.dll) comes with a patched version of jQuery 1.12.4 where the XSS security vulnerability is fixed. With regards to this you do not need to downgrade the jQuery version used by the control.
• If you still want to change the jQuery version in RadSpell dialog follow the steps below:
  
  web.config    

  <add key="Telerik.ScriptManager.EnableEmbeddedjQuery" value="false" />

  
  
  Default.aspx - apply the provided Telerik.Web.UI.RadDialogOpener.prototype.open override to be able to import the jQuery from the main page into the iframe based dialog of RadSpell:
  
  

  <%@ Page Language="C#" AutoEventWireup="true" %>
    
  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title></title>
      <script src="jquery-3.4.1.min.js"></script>
  </head>
  
  <body>
      <form id="form1" runat="server">
          <telerik:RadScriptManager ID="ScriptManager" runat="server">
              <Scripts>
                  <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                  <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />
                  <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
              </Scripts>
          </telerik:RadScriptManager>
  
          <asp:TextBox runat="server" ID="TextBox1" Text="behaviour" />
          <telerik:RadSpell ID="spell1" runat="server" ControlToCheck="TextBox1" />
          <script>
              var $ = $telerik.$;
              var $T = Telerik.Web.UI;
              var browser = Telerik.Web.Browser;
  
  
              Telerik.Web.UI.RadDialogOpener.prototype.open = function (dialogName, clientParameters, callbackFunction) {
                  if (!this._handlerChecked) {
                      this._checkDialogHandler(this.get_handlerUrl());
                  }
  
                  //Definition
                  dialogName = this._getExistingPrefixedDialogName(dialogName);
                  var definition = this._getDialogDefinition(dialogName);
                  //ClientParameters
                  //Set the ClientParameters BEFORE calling _applyParameters - because if dialog is cached it wll call the initializer right away
                  var openEventArgs = new $T.DialogOpenEventArgs(dialogName, clientParameters);
                  this.raiseEvent("open", openEventArgs);
                  this._hasOpenedDialog = true;
  
                  clientParameters = openEventArgs.get_parameters();
                  //Callback function
                  if (!callbackFunction) callbackFunction = definition.ClientCallbackFunction;
  
                  //NEW: Add support for classic windows
                  var container;
                  if (this.get_useClassicDialogs()) {
                      //Set a global variable and a global method
                      container = $create($T.ClassicDialog, { dialogOpener: this });
                      container.ClientParameters = clientParameters;
                      this._applyParameters(dialogName, container);
                      if (callbackFunction) container.set_clientCallBackFunction(callbackFunction);
  
                      window.__getCurrentRadEditorRadWindowReference = function () {
                          return container;
                      };
  
                      var wnd = this._openBrowserWindow(container, definition, dialogName);
                      //Needed for the first loading of the window - before the postback
                      wnd.radWindow = container;
                      return wnd;
                  }
                  else {
  
                      container = this._getDialogContainer(dialogName);
                      container.add_beforeShow(function (radWnd) {
                          radWnd.GetContentFrame().contentWindow.jQuery = window.jQuery;
                      });
  
                      var height = definition["Height"] || 0;
                      //Set the height once here and then again after showing
                      if (!container.get_popupElement()) {
                          container.set_height(height);
                          container.set_width(definition["Width"] || 0);
                          container.set_behaviors(definition["Behaviors"]);
                          container.set_modal(definition["Modal"]);
                          container.set_visibleStatusbar(definition["VisibleStatusbar"]);
                          container.set_visibleTitlebar(definition["VisibleTitlebar"]);
                          container.set_keepInScreenBounds(true);
                      }
  
                      if (definition["ReloadOnShow"] != null) {
                          container.set_reloadOnShow(definition["ReloadOnShow"]);
                      }
  
                      container.ClientParameters = clientParameters;
  
                      this._applyParameters(dialogName, container);
  
                      if (dialogName != "SpellCheckDialog") { //RadSpell dialog is not working correctly with autoSize
                          this._sizeCenterCellDelegate = Function.createDelegate(this, this._sizeCenterCellWindowLoadHandler);
                          this._autoSizeDialogDelegate = Function.createDelegate(this, this._autoSizeDialogWindowLoadHandler);
  
                          container.add_pageLoad(this._sizeCenterCellDelegate);
                          container.add_pageLoad(this._autoSizeDialogDelegate);
                      }
  
                      //Optimize code for setting callback function
                      if (callbackFunction) container.set_clientCallBackFunction(callbackFunction);
  
                      //Show dialog
                      this._showDialogContainer(container);
                      if (!container.get_popupElement()) {
                          //Set the height a second time to make sure it is set correctly in IE if the window was not visible
                          container.set_height(height);
                      }
  
                      //Allow  a small timeout and set window active.
                      window.setTimeout(function () {
                          if (container.isVisible()) {
                              container.center();
                              container.setActive(true);
                          }
                      }, browser.iemobile ? 700 : 100);
                  }
              }
          </script>
      </form>
  </body>
  </html>
  

Best Regards,
Rumen
Progress Telerik