From e65d93efdf5efafb4738fea72b356fffaf359254 Mon Sep 17 00:00:00 2001
From: ansuz <git@ansuz.xyz>
Date: Thu, 10 Feb 2022 12:02:17 +0530
Subject: [PATCH] simplify dropdown content sanitization

---
 www/common/common-ui-elements.js       | 88 ++++++++++++++++++--------
 www/common/drive-ui.js                 | 55 ++++++++++++----
 www/common/sframe-app-framework.js     |  2 +-
 www/common/sframe-common-codemirror.js |  4 +-
 4 files changed, 104 insertions(+), 45 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 5e05e23f4..4b39b6aa2 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1420,9 +1420,20 @@ define([
         }
 
         // Button
-        var $button = $('<button>', {
-            'class': config.buttonCls || ''
-        }).append($('<span>', {'class': 'cp-dropdown-button-title'}).html(config.text || ""));
+        var $button;
+
+        if (config.buttonContent) {
+            $button = $(h('button', {
+                class: config.buttonCls || '',
+            }, [
+                h('span.cp-dropdown-button-title', config.buttonContent),
+            ]));
+        } else {
+            $button = $('<button>', {
+                'class': config.buttonCls || ''
+            }).append($('<span>', {'class': 'cp-dropdown-button-title'}).text(config.text || ""));
+        }
+
         if (config.caretDown) {
             $('<span>', {
                 'class': 'fa fa-caret-down',
@@ -1445,8 +1456,24 @@ define([
         var setOptions = function (options) {
             options.forEach(function (o) {
                 if (!isValidOption(o)) { return; }
-                if (isElement(o)) { return $innerblock.append($(o)); }
-                var $el = $('<' + o.tag + '>', o.attributes || {}).html(o.content || '');
+                if (isElement(o)) { return $innerblock.append(o); }
+                var $el = $('<' + o.tag + '>', o.attributes || {});
+
+                if (typeof(o.content) === 'string' || (o.content instanceof Element)) {
+                    o.content = [o.content];
+                }
+                if (Array.isArray(o.content)) {
+                    o.content.forEach(function (item) {
+                        if (item instanceof Element) {
+                            return void $el.append(item);
+                        }
+                        if (typeof(item) === 'string') {
+                            $el[0].appendChild(document.createTextNode(item));
+                        }
+                    });
+                    // array of elements or text nodes
+                }
+
                 $el.appendTo($innerblock);
                 if (typeof(o.action) === 'function') {
                     $el.click(function (e) {
@@ -1533,8 +1560,8 @@ define([
             $container.on('click', 'a', function () {
                 value = $(this).data('value');
                 var $val = $(this);
-                var textValue = $val.html() || value;
-                $button.find('.cp-dropdown-button-title').html(textValue);
+                var textValue = $val.text() || value;
+                $button.find('.cp-dropdown-button-title').text(textValue);
                 $container.onChange.fire(textValue, value);
             });
             $container.keydown(function (e) {
@@ -1594,14 +1621,13 @@ define([
             $container.setValue = function (val, name, sync) {
                 value = val;
                 var $val = $innerblock.find('[data-value="'+val+'"]');
-                var textValue = name || $val.html() || val;
-                if (sync) {
-                    $button.find('.cp-dropdown-button-title').html(textValue);
-                    return;
-                }
-                setTimeout(function () {
-                    $button.find('.cp-dropdown-button-title').html(textValue);
-                });
+                var textValue = name || $val.text() || val;
+                var f = function () {
+                    $button.find('.cp-dropdown-button-title').text(textValue);
+                };
+
+                if (sync) { return void f(); }
+                setTimeout(f);
             };
             $container.getValue = function () {
                 return typeof(value) === "undefined" ? '' : value;
@@ -1676,33 +1702,37 @@ define([
         var metadataMgr = Common.getMetadataMgr();
 
         var displayNameCls = config.displayNameCls || 'cp-toolbar-user-name';
-        var $displayedName = $('<span>', {'class': displayNameCls});
 
         var priv = metadataMgr.getPrivateData();
         var accountName = Util.fixHTML(priv.accountName);
         var origin = priv.origin;
         var padType = metadataMgr.getMetadata().type;
 
-        var $userName = $('<span>');
         var options = [];
         if (config.displayNameCls) {
-            var $userAdminContent = $('<p>');
+            var userAdminContent = [];
             if (accountName) {
-                var $userAccount = $('<span>').append(Messages.user_accountName + ': ');
-
-                $userAdminContent.append($userAccount).append(accountName);
-                $userAdminContent.append($('<br>'));
+                userAdminContent.push(h('span', [
+                    Messages.user_accountName,
+                    ': ',
+                    h('span', accountName),
+                ]));
+                userAdminContent.push(h('br'));
             }
             if (config.displayName && !AppConfig.disableProfile) {
                 // Hide "Display name:" in read only mode
-                $userName.append(Messages.user_displayName + ': ');
-                $userName.append($displayedName);
+                userAdminContent.push(h('span', [
+                    Messages.user_displayName,
+                    ': ',
+                    h('span', {
+                        class: displayNameCls,
+                    }),
+                ]));
             }
-            $userAdminContent.append($userName);
             options.push({
                 tag: 'p',
                 attributes: {'class': 'cp-toolbar-account'},
-                content: $userAdminContent.html()
+                content: userAdminContent,
             });
         }
 
@@ -1964,7 +1994,7 @@ define([
             $userbig.append($('<span>', {'class': 'account-name'}).text(accountName));
         }*/
         var dropdownConfigUser = {
-            text: $userButton.html(), // Button initial text
+            buttonContent: $userButton[0],
             options: options, // Entries displayed in the menu
             left: true, // Open to the left of the button
             container: config.$initBlock, // optional
@@ -2066,7 +2096,9 @@ define([
                     'data-value': l,
                     'href': '#',
                 },
-                content: languages[l] // Pretty name of the language value
+                content: [ // supplying content as an array ensures it's a text node, not parsed HTML
+                    languages[l] // Pretty name of the language value
+                ],
             });
         });
         var dropdownConfig = {
diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js
index 311669c9e..33966140a 100644
--- a/www/common/drive-ui.js
+++ b/www/common/drive-ui.js
@@ -2935,34 +2935,49 @@ define([
             if (isInRoot) {
                 options.push({
                     tag: 'a',
-                    attributes: {'class': 'cp-app-drive-new-folder'},
-                    content: $('<div>').append($folderIcon.clone()).html() + Messages.fm_folder
+                    attributes: {'class': 'cp-app-drive-new-folder pewpew'},
+                    content: [
+                        $folderIcon.clone()[0],
+                        Messages.fm_folder,
+                    ],
                 });
                 if (!APP.disableSF && !manager.isInSharedFolder(currentPath)) {
                     options.push({
                         tag: 'a',
                         attributes: {'class': 'cp-app-drive-new-shared-folder'},
-                        content: $('<div>').append($sharedFolderIcon.clone()).html() + Messages.fm_sharedFolder
+                        content: [
+                            $sharedFolderIcon.clone()[0],
+                            Messages.fm_sharedFolder,
+                        ],
                     });
                 }
                 options.push({tag: 'hr'});
                 options.push({
                     tag: 'a',
                     attributes: {'class': 'cp-app-drive-new-fileupload'},
-                    content: $('<div>').append(getIcon('fileupload')).html() + Messages.uploadButton
+                    content: [
+                        getIcon('fileupload')[0],
+                        Messages.uploadButton,
+                    ],
                 });
                 if (APP.allowFolderUpload) {
                     options.push({
                         tag: 'a',
                         attributes: {'class': 'cp-app-drive-new-folderupload'},
-                        content: $('<div>').append(getIcon('folderupload')).html() + Messages.uploadFolderButton
+                        content: [
+                            getIcon('folderupload')[0],
+                            Messages.uploadFolderButton,
+                        ],
                     });
                 }
                 options.push({tag: 'hr'});
                 options.push({
                     tag: 'a',
                     attributes: {'class': 'cp-app-drive-new-link'},
-                    content: $('<div>').append(getIcon('link')).html() + Messages.fm_link_new
+                    content: [
+                        getIcon('link')[0],
+                        Messages.fm_link_new,
+                    ],
                 });
                 options.push({tag: 'hr'});
             }
@@ -2983,14 +2998,17 @@ define([
                 options.push({
                     tag: 'a',
                     attributes: attributes,
-                    content: $('<div>').append(getIcon(type)).html() + Messages.type[type]
+                    content: [
+                        getIcon(type)[0],
+                        Messages.type[type],
+                    ],
                 });
             });
-            var $plusIcon = $('<div>').append($('<span>', {'class': 'fa fa-plus'}));
-
-
             var dropdownConfig = {
-                text: $plusIcon.html() + '<span>'+Messages.fm_newButton+'</span>',
+                buttonContent: [
+                    h('span.fa.fa-plus'),
+                    h('span', Messages.fm_newButton),
+                ],
                 options: options,
                 feedback: 'DRIVE_NEWPAD_LOCALFOLDER',
                 common: common
@@ -3071,15 +3089,24 @@ define([
             var options = [{
                 tag: 'a',
                 attributes: {'class': 'cp-app-drive-element-type'},
-                content: '<i class="fa fa-minus"></i>' + Messages.fm_type
+                content: [
+                    h('i.fa.fa-minus'),
+                    Messages.fm_type,
+                ],
             },{
                 tag: 'a',
                 attributes: {'class': 'cp-app-drive-element-atime'},
-                content: '<i class="fa fa-minus"></i>' + Messages.fm_lastAccess
+                content: [
+                    h('i.fa.fa-minus'),
+                    Messages.fm_lastAccess,
+                ],
             },{
                 tag: 'a',
                 attributes: {'class': 'cp-app-drive-element-ctime'},
-                content: '<i class="fa fa-minus"></i>' + Messages.fm_creation
+                content: [
+                    h('i.fa.fa-minus'),
+                    Messages.fm_creation,
+                ],
             }];
             var dropdownConfig = {
                 text: '', // Button initial text
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index 1ba7ba2ef..e0962daf7 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -663,7 +663,7 @@ define([
                         'data-value': '',
                         'href': '#'
                     },
-                    content: '&nbsp;'
+                    content: ' ',
                 });
                 var dropdownConfig = {
                     text: ext, // Button initial text
diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js
index 58475bbed..691c7c2dc 100644
--- a/www/common/sframe-common-codemirror.js
+++ b/www/common/sframe-common-codemirror.js
@@ -343,7 +343,7 @@ define([
                         'data-value': l.mode,
                         'href': '#',
                     },
-                    content: l.language // Pretty name of the language value
+                    content: [l.language] // Pretty name of the language value
                 });
             });
             var dropdownConfig = {
@@ -395,7 +395,7 @@ define([
                             'data-value': l.name,
                             'href': '#',
                         },
-                        content: l.name // Pretty name of the language value
+                        content: [l.name] // Pretty name of the language value
                     });
                 });
                 var dropdownConfig = {