openedx · Ali-D-Akbar · Aug 13, 2020 · Aug 12, 2020
diff --git a/cms/static/js/views/components/add_xblock.js b/cms/static/js/views/components/add_xblock.js
@@ -2,8 +2,10 @@
  * This is a simple component that renders add buttons for all available XBlock template types.
  */
 define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/components/utils/view_utils',
-    'js/views/components/add_xblock_button', 'js/views/components/add_xblock_menu'],
-    function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu) {
+    'js/views/components/add_xblock_button', 'js/views/components/add_xblock_menu',
+    'edx-ui-toolkit/js/utils/html-utils'],
+    function($, _, gettext, BaseView, ViewUtils, AddXBlockButton, AddXBlockMenu, HtmlUtils) {
+        'use strict';
         var AddXBlockComponent = BaseView.extend({
             events: {
                 'click .new-component .new-component-type .multiple-templates': 'showComponentTemplates',
@@ -19,9 +21,10 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/compo
             },
 
             render: function() {
+                var that;
                 if (!this.$el.html()) {
-                    var that = this;
-                    this.$el.html(this.template({}));
+                    that = this;
+                    this.$el.html(HtmlUtils.HTML(this.template({})).toString());
                     this.collection.each(
                         function(componentModel) {
                             var view, menu;
@@ -47,6 +50,7 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/compo
             },
 
             closeNewComponent: function(event) {
+                var type;
                 event.preventDefault();
                 event.stopPropagation();
                 type = $(event.currentTarget).data('type');

diff --git a/cms/static/js/views/components/add_xblock_button.js b/cms/static/js/views/components/add_xblock_button.js
@@ -1,16 +1,17 @@
-define(['js/views/baseview'],
-    function(BaseView) {
+define(['js/views/baseview', 'edx-ui-toolkit/js/utils/html-utils'],
+    function(BaseView, HtmlUtils) {
+        'use strict';
         return BaseView.extend({
             tagName: 'li',
             initialize: function() {
+                var attributes = {
+                    type: this.model.type,
+                    templates: this.model.templates,
+                    display_name: this.model.display_name
+                };
                 BaseView.prototype.initialize.call(this);
                 this.template = this.loadTemplate('add-xblock-component-button');
-                this.$el.html(
-                    this.template({
-                        type: this.model.type,
-                        templates: this.model.templates,
-                        display_name: this.model.display_name
-                    })
+                this.$el.html(HtmlUtils.HTML(this.template(attributes)).toString()
                 );
             }
         });

diff --git a/cms/static/js/views/course_rerun.js b/cms/static/js/views/course_rerun.js
@@ -1,5 +1,7 @@
-define(['domReady', 'jquery', 'underscore', 'js/views/utils/create_course_utils', 'common/js/components/utils/view_utils'],
-    function(domReady, $, _, CreateCourseUtilsFactory, ViewUtils) {
+define(['domReady', 'jquery', 'underscore', 'js/views/utils/create_course_utils',
+    'common/js/components/utils/view_utils', 'edx-ui-toolkit/js/utils/html-utils'],
+    function(domReady, $, _, CreateCourseUtilsFactory, ViewUtils, HtmlUtils) {
+        'use strict';
         var CreateCourseUtils = new CreateCourseUtilsFactory({
             name: '.rerun-course-name',
             org: '.rerun-course-org',
@@ -20,6 +22,7 @@ define(['domReady', 'jquery', 'underscore', 'js/views/utils/create_course_utils'
         });
 
         var saveRerunCourse = function(e) {
+            var courseInfo;
             e.preventDefault();
 
             if (CreateCourseUtils.hasInvalidRequiredFields()) {
@@ -32,26 +35,28 @@ define(['domReady', 'jquery', 'underscore', 'js/views/utils/create_course_utils'
             var number = $newCourseForm.find('.rerun-course-number').val();
             var run = $newCourseForm.find('.rerun-course-run').val();
 
-            course_info = {
+            courseInfo = {
                 source_course_key: source_course_key,
                 org: org,
                 number: number,
                 display_name: display_name,
                 run: run
             };
 
-            analytics.track('Reran a Course', course_info);
-            CreateCourseUtils.create(course_info, function(errorMessage) {
+            analytics.track('Reran a Course', courseInfo); // eslint-disable-line no-undef
+            CreateCourseUtils.create(courseInfo, function(errorMessage) {
                 $('.wrapper-error').addClass('is-shown').removeClass('is-hidden');
-                $('#course_rerun_error').html('<p>' + errorMessage + '</p>');
-                $('.rerun-course-save').addClass('is-disabled').attr('aria-disabled', true).removeClass('is-processing').html(gettext('Create Re-run'));
+                $('#course_rerun_error').html(HtmlUtils.joinHtml(HtmlUtils.HTML('<p>'), errorMessage, HtmlUtils.HTML('</p>')).toString()); // eslint-disable-line max-len
+                $('.rerun-course-save').addClass('is-disabled').attr('aria-disabled', true)
+                .removeClass('is-processing')
+                .text(gettext('Create Re-run'));
                 $('.action-cancel').removeClass('is-hidden');
             });
 
             // Go into creating re-run state
-            $('.rerun-course-save').addClass('is-disabled').attr('aria-disabled', true).addClass('is-processing').html(
-               '<span class="icon fa fa-refresh fa-spin" aria-hidden="true"></span>' + gettext('Processing Re-run Request')  // eslint-disable-line max-len
-            );
+            $('.rerun-course-save').addClass('is-disabled').attr('aria-disabled', true)
+            .addClass('is-processing')
+            .html(HtmlUtils.joinHtml(HtmlUtils.HTML('<span class="icon fa fa-refresh fa-spin" aria-hidden="true"></span>'), gettext('Processing Re-run Request')).toString()); // eslint-disable-line max-len
             $('.action-cancel').addClass('is-hidden');
         };
 

diff --git a/cms/static/js/views/instructor_info.js b/cms/static/js/views/instructor_info.js
@@ -7,9 +7,10 @@ define([
     'gettext',
     'js/utils/templates',
     'js/models/uploads',
-    'js/views/uploads'
+    'js/views/uploads',
+    'edx-ui-toolkit/js/utils/html-utils'
 ],
-    function($, _, Backbone, gettext, TemplateUtils, FileUploadModel, FileUploadDialog) {
+    function($, _, Backbone, gettext, TemplateUtils, FileUploadModel, FileUploadDialog, HtmlUtils) {
         'use strict';
         var InstructorInfoView = Backbone.View.extend({
 
@@ -31,14 +32,16 @@ define([
             },
 
             render: function() {
+                var attributes;
                 // Assemble the render view for this model.
                 $('.course-instructor-details-fields').empty();
                 var self = this;
                 $.each(this.model.get('instructor_info').instructors, function(index, data) {
-                    $(self.el).append(self.template({
+                    attributes = {
                         data: data,
                         index: index
-                    }));
+                    };
+                    $(self.el).append(HtmlUtils.HTML(self.template(attributes)).toString());
                 });
 
                 // Avoid showing broken image on mistyped/nonexistent image

diff --git a/cms/static/js/views/list_item_editor.js b/cms/static/js/views/list_item_editor.js
@@ -10,8 +10,9 @@
  *   saved by this view.  Note this may be a parent model.
  */
 define([
-    'js/views/baseview', 'common/js/components/utils/view_utils', 'underscore', 'gettext'
-], function(BaseView, ViewUtils, _, gettext) {
+    'js/views/baseview', 'common/js/components/utils/view_utils', 'underscore', 'gettext',
+    'edx-ui-toolkit/js/utils/html-utils'
+], function(BaseView, ViewUtils, _, gettext, HtmlUtils) {
     'use strict';
 
     var ListItemEditorView = BaseView.extend({
@@ -21,9 +22,11 @@ define([
         },
 
         render: function() {
-            this.$el.html(this.template(_.extend({
+            var template = this.template(_.extend({
                 error: this.model.validationError || this.getSaveableModel().validationError
-            }, this.getTemplateOptions())));
+            }, this.getTemplateOptions())
+            );
+            this.$el.html(HtmlUtils.HTML(template).toString());
         },
 
         setAndClose: function(event) {

diff --git a/cms/static/js/views/metadata.js b/cms/static/js/views/metadata.js
@@ -6,10 +6,11 @@ define(
         'js/models/license', 'js/views/license',
         'js/views/video/transcripts/utils',
         'js/views/video/transcripts/metadata_videolist',
-        'js/views/video/translations_editor'
+        'js/views/video/translations_editor',
+        'edx-ui-toolkit/js/utils/html-utils'
     ],
 function(Backbone, BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog,
-         LicenseModel, LicenseView, TranscriptUtils, VideoList, VideoTranslations) {
+         LicenseModel, LicenseView, TranscriptUtils, VideoList, VideoTranslations, HtmlUtils) {
     'use strict';
     var Metadata = {};
 
@@ -22,10 +23,11 @@ function(Backbone, BaseView, _, MetadataModel, AbstractEditor, FileUpload, Uploa
             var self = this,
                 counter = 0,
                 locator = self.$el.closest('[data-locator]').data('locator'),
-                courseKey = self.$el.closest('[data-course-key]').data('course-key');
+                courseKey = self.$el.closest('[data-course-key]').data('course-key'),
+                attributes = {numEntries: this.collection.length, locator: locator};
 
             this.template = this.loadTemplate('metadata-editor');
-            this.$el.html(this.template({numEntries: this.collection.length, locator: locator}));
+            this.$el.html(HtmlUtils.HTML(this.template(attributes)).toString());
 
             this.collection.each(
                 function(model) {
@@ -323,12 +325,16 @@ function(Backbone, BaseView, _, MetadataModel, AbstractEditor, FileUpload, Uploa
             list.empty();
             _.each(value, function(ele, index) {
                 var template = _.template(
-                    '<li class="list-settings-item">' +
-                        '<input type="text" class="input" value="<%- ele %>">' +
-                        '<a href="#" class="remove-action remove-setting" data-index="<%- index %>"><span class="icon fa fa-times-circle" aria-hidden="true"></span><span class="sr">' + gettext('Remove') + '</span></a>' +   // eslint-disable-line max-len
-                    '</li>'
+                    HtmlUtils.joinHtml(
+                        HtmlUtils.HTML('<li class="list-settings-item">'),
+                        HtmlUtils.HTML('<input type="text" class="input" value="<%- ele %>">'),
+                        HtmlUtils.HTML('<a href="#" class="remove-action remove-setting" data-index="<%- index %>"><span class="icon fa fa-times-circle" aria-hidden="true"></span><span class="sr">'), // eslint-disable-line max-len
+                        gettext('Remove'),
+                        HtmlUtils.HTML('</span></a>'),
+                        HtmlUtils.HTML('</li>')
+                    ).toString()
                 );
-                list.append($(template({ele: ele, index: index})));
+                list.append(HtmlUtils.HTML($(template({ele: ele, index: index}))).toString());
             });
         },
 
@@ -489,16 +495,19 @@ function(Backbone, BaseView, _, MetadataModel, AbstractEditor, FileUpload, Uploa
 
             _.each(value, function(value, key) {
                 var template = _.template(
-                    '<li class="list-settings-item">' +
-                        '<input type="text" class="input input-key" value="<%= key %>">' +
-                        '<input type="text" class="input input-value" value="<%= value %>">' +
-                        '<a href="#" class="remove-action remove-setting" data-value="<%= value %>"><span class="icon fa fa-times-circle" aria-hidden="true"></span><span class="sr">Remove</span></a>' +  // eslint-disable-line max-len
-                    '</li>'
+                    HtmlUtils.joinHtml(
+                        HtmlUtils.HTML('<li class="list-settings-item">'),
+                        HtmlUtils.HTML('<input type="text" class="input input-key" value="<%- key %>">'),
+                        HtmlUtils.HTML('<input type="text" class="input input-value" value="<%- value %>">'),
+                        HtmlUtils.HTML('<a href="#" class="remove-action remove-setting" data-value="<%- value %>"><span class="icon fa fa-times-circle" aria-hidden="true"></span><span class="sr">Remove</span></a>'), // eslint-disable-line max-len
+                        HtmlUtils.HTML('</li>')
+                    ).toString()
                 );
 
                 frag.appendChild($(template({key: key, value: value}))[0]);
             });
 
+            // xss-lint: disable=javascript-jquery-html
             list.html([frag]);
         },
 
@@ -564,7 +573,7 @@ function(Backbone, BaseView, _, MetadataModel, AbstractEditor, FileUpload, Uploa
             });
 
             this.$('#' + this.uniqueId).val(value);
-            this.$('.wrapper-uploader-actions').html(html);
+            this.$('.wrapper-uploader-actions').html(HtmlUtils.HTML((html)).toString());
         },
 
         upload: function(event) {

diff --git a/cms/static/js/views/video/translations_editor.js b/cms/static/js/views/video/translations_editor.js
@@ -127,17 +127,20 @@ function($, _, HtmlUtils, TranscriptUtils, AbstractEditor, ViewUtils, FileUpload
                 languageMap = TranscriptUtils.Storage.get('languageMap');
 
             _.each(values, function(value, newLang) {
-                var html = $(self.templateItem({
+                var $html = $(self.templateItem({
                     newLang: newLang,
                     originalLang: _.findKey(languageMap, function(lang) { return lang === newLang; }) || '',
                     value: value,
                     url: self.model.get('urlRoot')
-                })).prepend(dropdown.clone().val(newLang))[0];
-
-                frag.appendChild(html);
+                }));
+                HtmlUtils.append($html, dropdown.clone().val(newLang));
+                frag.appendChild($html[0]);
             });
 
-            this.$el.find('ol').html([frag]);
+            HtmlUtils.setHtml(
+                this.$el.find('ol'),
+                HtmlUtils.HTML([frag])
+            );
         },
 
         addEntry: function(event) {

diff --git a/cms/static/js/views/xblock_validation.js b/cms/static/js/views/xblock_validation.js
@@ -1,5 +1,6 @@
-define(['jquery', 'underscore', 'js/views/baseview', 'gettext'],
-    function($, _, BaseView, gettext) {
+define(['jquery', 'underscore', 'js/views/baseview', 'gettext', 'edx-ui-toolkit/js/utils/html-utils'],
+    function($, _, BaseView, gettext, HtmlUtils) {
+        'use strict';
         /**
          * View for xblock validation messages as displayed in Studio.
          */
@@ -13,12 +14,13 @@ define(['jquery', 'underscore', 'js/views/baseview', 'gettext'],
             },
 
             render: function() {
-                this.$el.html(this.template({
+                var attributes = {
                     validation: this.model,
                     additionalClasses: this.getAdditionalClasses(),
                     getIcon: this.getIcon.bind(this),
                     getDisplayName: this.getDisplayName.bind(this)
-                }));
+                };
+                this.$el.html(HtmlUtils.HTML(this.template(attributes)).toString());
                 return this;
             },