Sync with Kendo UI Professional

Author: kendo-bot

Diff for: docs/api/javascript/kendo.md

@@ -315,12 +315,20 @@ The `onChange` method will be executed when the media query is matched or not ma
 
 The `destroy` method will remove the event listeners and destroy the `MediaQueryList` instance. Note that developers should call the `destroy` method when the media query is no longer needed.
 
+You can modify the default [`media queries`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries) for the adaptive components by modifying the breakpoints defined in `kendo.defaults.breakpoints`. The default break points are defined as:
+
+`kendo.defaults.breakpoints = { small: '(max-width: 700px)', medium: '(min-width: 700.1px) and (max-width: 768px)', large: '(min-width: 768.1px)' }`
+
 #### Parameters
 
 ##### media `String`
 
 The media query that will create the [MediaQueryList instance](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList).
 
+#### Returns
+
+`Object` with the `mediaQueryList` field and the `onChange`, `onEnter`, `onLeave` and `destroy` methods.
+
 #### Example - Using a string
 
     <script>
@@ -359,10 +367,26 @@ The media query that will create the [MediaQueryList instance](https://developer
         mediaQueryListener.destroy();
     </script>
 
-#### Returns
+#### Example - Modify the default breakpoints for the the adaptive components
 
-`Object` with the `mediaQueryList` field and the `onChange`, `onEnter`, `onLeave` and `destroy` methods.
+```dojo
+    <input id="dropdownlist"/>
+    <script>
+      let defaultBreakpoints = {
+        small: '(max-width: 2000px)',
+        medium: '(min-width: 2000px) and (max-width: 2800px)',
+        large: '(min-width: 2800px)'
+      }
+
+      kendo.setDefaults('breakpoints', defaultBreakpoints);
 
+      $("#dropdownlist").kendoDropDownList({
+        adaptiveMode:"auto",
+        dataSource: ["Item1", "Item2"],
+        value: "Item1"
+      });
+    </script>
+```
 
 
 ### observableFileManagerData

Diff for: docs/intro/installation/images/azure-devops-classic-step-2.png

@@ -130,14 +130,14 @@ steps:
 bash
 ```
 
-![Azure Devops Classic Step 2](../images/azure-devops-classic-step-2.webp) 
+![Azure Devops Classic Step 2](../images/azure-devops-classic-step-2.png) 
 
 ```bash
 # Activate the license
 npx kendo-ui-license activate
 ```
 
-![Azure Devops Classic Step 3](../images/azure-devops-classic-step-3.webp) 
+![Azure Devops Classic Step 3](../images/azure-devops-classic-step-3.png) 
 
 ## See Also
 

Diff for: docs/intro/installation/images/azure-devops-classic-step-2.webp

@@ -49,7 +49,7 @@ export const __meta__ = {
 
     var templates = {
         item: template(() => `<span class="${bottomNavigationStyles.item}"></span>`),
-        anchor: template(({ url }) => `<a class="${bottomNavigationStyles.item}"  href="${kendo.htmlEncode(url)}"></a>`),
+        anchor: template(({ url }) => `<a class="${bottomNavigationStyles.item}" href="${kendo.sanitizeLink(url)}"></a>`),
         text: template(({ text }) => `<span class="${bottomNavigationStyles.text}" >${text}</span>`),
         icon: template(({ icon }) => kendo.ui.icon($(`<span class="${bottomNavigationStyles.navIcon}"></span>`), { icon: icon, size: "xlarge" }))
     };

Diff for: docs/intro/installation/images/azure-devops-classic-step-3.png

@@ -17,6 +17,7 @@ export const __meta__ = {
         ui = kendo.ui,
         keys = kendo.keys,
         encode = kendo.htmlEncode,
+        sanitizeLink = kendo.sanitizeLink,
         extend = $.extend,
 
         DOT = ".",
@@ -85,7 +86,7 @@ export const __meta__ = {
                                                         `${TEXT_TEMPLATE({ text })}` +
                                                     `</span>`;
 
-    var LINK_TEMPLATE = ({ url, imageUrl, spriteCssClass, icon, text, attributes }) => `<a href="${encode(url)}" ${attributes.target ? `target="${attributes.target}"` : ''} class="${cssClasses.item}">` +
+    var LINK_TEMPLATE = ({ url, imageUrl, spriteCssClass, icon, text, attributes }) => `<a href="${sanitizeLink(url)}" ${attributes.target ? `target="${attributes.target}"` : ''} class="${cssClasses.item}">` +
                                                     `${IMAGE_TEMPLATE({ imageUrl })}` +
                                                     `${SPRITE_TEMPLATE({ spriteCssClass })}` +
                                                     `${ICON_TEMPLATE({ icon })}` +

Diff for: docs/intro/installation/images/azure-devops-classic-step-3.webp

@@ -285,7 +285,7 @@ export const __meta__ = {
 
             items.forEach(function(item, index) {
                 var text = item.text ? item.encoded === false ? item.text : kendo.htmlEncode(item.text) : "",
-                    el = item.url ? $("<a href=" + item.url + ">") : $("<button>");
+                    el = item.url ? $("<a href=" + kendo.sanitizeLink(item.url) + ">") : $("<button>");
 
                 el.html(text);
 

Diff for: docs/intro/installation/licensing/license-key-ci-services.md

@@ -2959,6 +2959,25 @@ function pad(number, digits, end) {
         return ("" + value).replace(ampRegExp, "&").replace(ltRegExp, "<").replace(gtRegExp, ">").replace(quoteRegExp, """).replace(aposRegExp, "'");
     }
 
+    function sanitizeLink(value) {
+        const allowedProtocols = ["http:", "https:"];
+        let link = "";
+
+        try {
+            // Use the default origin in case the value is a relative URL.
+            const url = new URL(value, window.location.origin);
+            if (allowedProtocols.includes(url.protocol)) {
+                link = value;
+            } else {
+                throw new Error("Invalid protocol");
+            }
+        } catch {
+            link = "#INVALIDLINK";
+        }
+
+        return htmlEncode(link);
+    }
+
     function unescape(value) {
         var template;
 
@@ -3126,6 +3145,7 @@ function pad(number, digits, end) {
         stringify: JSON.stringify.bind(JSON),
         eventTarget: eventTarget,
         htmlEncode: htmlEncode,
+        sanitizeLink: sanitizeLink,
         unescape: unescape,
         isLocalUrl: function(url) {
             return url && !localUrlRe.test(url);

Diff for: src/kendo.bottomnavigation.js

@@ -2468,7 +2468,7 @@ export const __meta__ = {
                     var imgAttributes = fieldAccessor("imageAttr")(item);
                     var tag = url ? 'a' : 'span';
 
-                    return `<${tag} class='${rendering.textClass(item)}' role='none' ${url ? `href='${url}'` : ''} >` +
+                    return `<${tag} class='${rendering.textClass(item)}' role='none' ${url ? `href='${kendo.sanitizeLink(url)}'` : ''} >` +
                         (imageUrl ? `<img ${rendering.imageCssAttributes(imgAttributes)}  alt='' src='${imageUrl}' />` : '') +
                         this.templates.sprite(item) +
                         this.options.template(data) +

Diff for: src/kendo.button.menu.js

@@ -103,7 +103,7 @@ export const __meta__ = {
                 return result.join(" ");
             },
             textAttributes: function(item) {
-                return item.url ? " href='" + item.url + "'" : "";
+                return item.url ? " href='" + kendo.sanitizeLink(item.url) + "'" : "";
             },
             text: function(item) {
                 return item.encoded === false ? item.text : kendo.htmlEncode(item.text);

Diff for: src/kendo.buttongroup.js

@@ -846,7 +846,7 @@ export const __meta__ = {
                 options.themeColor = PRIMARY;
             }
             if (options.url) {
-                widgetElement = $("<a href='" + options.url + "'>");
+                widgetElement = $("<a href='" + kendo.sanitizeLink(options.url) + "'>");
             }
             if (options.showIcon === OVERFLOW) {
                 delete options.imageUrl;

Diff for: src/kendo.core.js

@@ -0,0 +1,20 @@
+import '@progress/kendo-ui/src/kendo.core.js';
+
+describe("sanitize link", function() {
+
+    it("allows http links", function() {
+        assert.equal(kendo.sanitizeLink("http://telerik.com/"), "http://telerik.com/");
+    });
+
+    it("allows https links", function() {
+        assert.equal(kendo.sanitizeLink("https://telerik.com/"), "https://telerik.com/");
+    });
+
+    it("allows same page links starting with #", function() {
+        assert.equal(kendo.sanitizeLink("#test"), "#test");
+    });
+
+    it("sanitizes links that start with javascript:", function() {
+        assert.equal(kendo.sanitizeLink("javascript:console.log(5)"), "#INVALIDLINK");
+    });
+});

Diff for: src/kendo.menu.js

@@ -223,14 +223,14 @@ describe("Client side rendering", function() {
                 data: [
                     {
                         text: "RootItem",
-                        URLTEST: "URLTEST"
+                        URLTEST: "https://telerik.com/"
                     }
                 ]
             })
         });
 
         menu.dataSource.view()[0].load();
-        assert.equal(menu.element.find(".k-link").attr('href'), "URLTEST");
+        assert.equal(menu.element.find(".k-link").attr('href'), "https://telerik.com/");
     });
 
     it('dataSpriteCssClassField configures the item icon class', function() {

Diff for: src/kendo.tabstrip.js

@@ -113,10 +113,10 @@ describe("tabstrip data binding", function() {
     it("dataUrlField", function() {
         let tabstrip = new kendo.ui.TabStrip(dom, {
             dataUrlField: "foo",
-            dataSource: [{ foo: "http://example.com" }]
+            dataSource: [{ foo: "http://example.com/" }]
         });
 
-        assert.equal(tabstrip.tabGroup.find("a").attr("href"), "http://example.com");
+        assert.equal(tabstrip.tabGroup.find("a").attr("href"), "http://example.com/");
     });
 
     it("dataSpriteCssClass", function() {

Diff for: src/kendo.toolbar.js

@@ -174,13 +174,13 @@ describe("Toolbar rendering:", function() {
     it("url sets a href to the button element if it is an anchor", function() {
         container.kendoToolBar({
             items: [
-                { type: "button", id: "foo", url: "http://www.kendoui.com" }
+                { type: "button", id: "foo", url: "http://www.kendoui.com/" }
             ]
         });
 
         let button = container.find("#foo");
 
-        assert.isOk(button.attr("href") == "http://www.kendoui.com");
+        assert.isOk(button.attr("href") == "http://www.kendoui.com/");
     });
 
     it("align sets a class to the button element to define its alignment", function() {