Def/security fixes

cms/templates/js/group-configuration-details.underscore

@@ -31,9 +31,9 @@
 
     <% if(showGroups) { %>
       <% allocation = Math.floor(100 / groups.length) %>
-      <ol class="collection-items groups groups-<%= index %>">
+      <ol class="collection-items groups groups-<%- index %>">
         <% groups.each(function(group, groupIndex) { %>
-          <li class="item group group-<%= groupIndex %>">
+          <li class="item group group-<%- groupIndex %>">
             <span class="name group-name"><%- group.get('name') %></span>
             <span class="meta group-allocation"><%- allocation %>%</span>
           </li>

cms/templates/js/maintenance/force-published-course-response.underscore

@@ -3,7 +3,7 @@
         <%- gettext('You have done a dry run of force publishing the course. Nothing has changed. Had you run it, the following course versions would have been change.') %>
     </div>
     <div class="main-output">
-        <%= StringUtils.interpolate(
+        <%- StringUtils.interpolate(
             gettext('The published branch version, {published}, was reset to the draft branch version, {draft}.'),
             {
                 published: current_versions['published-branch'],

cms/templates/js/mock/mock-xmodule-editor.underscore

@@ -16,13 +16,13 @@
 
         <script id="metadata-string-entry" type="text/template">
             <div class="wrapper-comp-setting">
-                \t<label class="label setting-label" for="<%= uniqueId %>"><%= model.get('display_name') %></label>
-                \t<input class="input setting-input" type="text" id="<%= uniqueId %>" value='<%= model.get("value") %>'/>
+                \t<label class="label setting-label" for="<%- uniqueId %>"><%- model.get('display_name') %></label>
+                \t<input class="input setting-input" type="text" id="<%- uniqueId %>" value='<%- model.get("value") %>'/>
                 \t<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
                 <span class="icon fa fa-undo" aria-hidden="true"></span><span class="sr">"Clear Value"</span>
                 </button>
             </div>
-            <span class="tip setting-help"><%= model.get('help') %></span>
+            <span class="tip setting-help"><%- model.get('help') %></span>
 
         </script>
 

cms/templates/js/publish-editor.underscore

@@ -6,13 +6,13 @@
             <% _.each(xblockInfo.get('child_info').children, function(subsection) { %>
               <% if (subsection.isPublishable())  { %>
                 <li class="outline-item outline-subsection">
-                    <h4 class="subsection-title item-title"><%= subsection.get('display_name') %></h4>
+                    <h4 class="subsection-title item-title"><%- subsection.get('display_name') %></h4>
                     <div class="subsection-content">
                         <ol class="list-units">
                           <% _.each(subsection.get('child_info').children, function(unit) { %>
                             <% if (unit.isPublishable())  { %>
                               <li class="outline-item outline-unit">
-                                  <span class="unit-title item-title"><%= unit.get('display_name') %></span>
+                                  <span class="unit-title item-title"><%- unit.get('display_name') %></span>
                               </li>
                             <% } %>
                           <% }); %>
@@ -27,7 +27,7 @@
             <% _.each(xblockInfo.get('child_info').children, function(unit) { %>
               <% if (unit.isPublishable())  { %>
                 <li class="outline-item outline-unit">
-                    <span class="unit-title item-title"><%= unit.get('display_name') %></span>
+                    <span class="unit-title item-title"><%- unit.get('display_name') %></span>
                 </li>
               <% } %>
             <% }); %>

cms/templates/js/unit-outline.underscore

@@ -1,23 +1,23 @@
 <% if (parentInfo) { %>
-    <li class="outline-item outline-<%= xblockType %> <%= visibilityClass %> <%= xblockInfo.get('id') === currentUnitId ? 'is-current' : '' %>"
-        data-parent="<%= parentInfo.get('id') %>" data-locator="<%= xblockInfo.get('id') %>">
-        <div class="<%= xblockType %>-header">
-            <h3 class="<%= xblockType %>-header-details">
-                <span class="<%= xblockType %>-title item-title">
-                    <a href="<%= xblockInfo.get('studio_url') %>"><%- xblockInfo.get('display_name') %></a>
+    <li class="outline-item outline-<%- xblockType %> <%- visibilityClass %> <%- xblockInfo.get('id') === currentUnitId ? 'is-current' : '' %>"
+        data-parent="<%- parentInfo.get('id') %>" data-locator="<%- xblockInfo.get('id') %>">
+        <div class="<%- xblockType %>-header">
+            <h3 class="<%- xblockType %>-header-details">
+                <span class="<%- xblockType %>-title item-title">
+                    <a href="<%- xblockInfo.get('studio_url') %>"><%- xblockInfo.get('display_name') %></a>
                 </span>
             </h3>
         </div>
 <% } %>
 
-        <div class="<%= xblockType %>-content outline-content">
-            <ol class="<%= typeListClass %>">
+        <div class="<%- xblockType %>-content outline-content">
+            <ol class="<%- typeListClass %>">
             </ol>
             <% if (childType) { %>
-                <div class="add-<%= childType %> add-item">
-                    <a href="#" class="button button-new" data-category="<%= childCategory %>"
-                       data-parent="<%= xblockInfo.get('id') %>" data-default-name="<%= defaultNewChildName %>">
-                        <span class="icon fa fa-plus" aria-hidden="true"></span><%= addChildLabel %>
+                <div class="add-<%- childType %> add-item">
+                    <a href="#" class="button button-new" data-category="<%- childCategory %>"
+                       data-parent="<%- xblockInfo.get('id') %>" data-default-name="<%- defaultNewChildName %>">
+                        <span class="icon fa fa-plus" aria-hidden="true"></span><%- addChildLabel %>
                     </a>
                 </div>
             <% } %>

cms/templates/js/video/transcripts/file-upload.underscore

@@ -4,6 +4,6 @@
 <form class="file-chooser" action="/transcripts/upload"
                           method="post" enctype="multipart/form-data">
   <input type="file" class="file-input" name="transcript-file"
-    accept="<%= _.map(ext, function(val){ return '.' + val; }).join(', ') %>">
-  <input type="hidden" name="locator" value="<%= component_locator %>">
+    accept="<%- _.map(ext, function(val){ return '.' + val; }).join(', ') %>">
+  <input type="hidden" name="locator" value="<%- component_locator %>">
 </form>

cms/templates/js/xblock-validation-messages.underscore

@@ -3,7 +3,7 @@ var summaryMessage = validation.get("summary");
 var aggregateMessageType = summaryMessage.type;
 var aggregateValidationClass = aggregateMessageType === "error"? "has-errors" : "has-warnings";
 %>
-    <div class="xblock-message validation <%= aggregateValidationClass %> <%= additionalClasses %>">
+    <div class="xblock-message validation <%- aggregateValidationClass %> <%- additionalClasses %>">
         <p class="<%- aggregateMessageType %>"><span class="icon fa <%- getIcon(aggregateMessageType) %>" aria-hidden="true"></span>
         <%- summaryMessage.text %>
         <% if (summaryMessage.action_class) { %>
@@ -25,7 +25,7 @@ var aggregateValidationClass = aggregateMessageType === "error"? "has-errors" :
                 var messageType = message.type
                 var messageTypeDisplayName = getDisplayName(messageType)
                 %>
-                <li class="xblock-message-item <%= messageType %>">
+                <li class="xblock-message-item <%- messageType %>">
                     <span class="message-text">
                         <% if (messageTypeDisplayName) { %>
                             <span class="sr"><%- messageTypeDisplayName %>:</span>

lms/djangoapps/support/static/support/js/views/certificates.js

@@ -7,8 +7,9 @@
         'gettext',
         'support/js/collections/certificate',
         'text!support/templates/certificates.underscore',
-        'text!support/templates/certificates_results.underscore'
-    ], function(Backbone, _, gettext, CertCollection, certificatesTpl, resultsTpl) {
+        'text!support/templates/certificates_results.underscore',
+        'edx-ui-toolkit/js/utils/html-utils'
+    ], function(Backbone, _, gettext, CertCollection, certificatesTpl, resultsTpl, HtmlUtils) {
         return Backbone.View.extend({
             events: {
                 'submit .certificates-form': 'search',
@@ -24,7 +25,7 @@
             },
 
             render: function() {
-                this.$el.html(_.template(certificatesTpl));
+                this.$el.html(HtmlUtils.HTML(_.template(certificatesTpl)).toString());
 
                 // If there is an initial filter, then immediately trigger a search.
                 // This is useful because it allows users to share search results:
@@ -44,12 +45,12 @@
                     certificates: this.certificates
                 };
 
-                this.setResults(_.template(resultsTpl)(context));
+                this.setResults(HtmlUtils.template(resultsTpl)(context));
             },
 
             renderError: function(error) {
                 var errorMsg = error || gettext('An unexpected error occurred.  Please try again.');
-                this.setResults(errorMsg);
+                this.setResults(HtmlUtils.Text(errorMsg));
             },
 
             search: function(event) {
@@ -170,7 +171,10 @@
             },
 
             setResults: function(html) {
-                $('.certificates-results', this.$el).html(html);
+                HtmlUtils.setHtml(
+                    $('.certificates-results', this.$el),
+                    html
+                );
             },
 
             disableButtons: function() {

lms/static/js/certificates/views/certificate_whitelist.js

@@ -8,10 +8,11 @@
         'jquery',
         'underscore',
         'gettext',
-        'backbone'
+        'backbone',
+        'edx-ui-toolkit/js/utils/html-utils'
     ],
 
-        function($, _, gettext, Backbone) {
+        function($, _, gettext, Backbone, HtmlUtils) {
             return Backbone.View.extend({
                 el: '#white-listed-students',
                 message_div: 'div.white-listed-students > div.message',
@@ -32,7 +33,7 @@
 
                 render: function() {
                     var template = this.loadTemplate('certificate-white-list');
-                    this.$el.html(template({certificates: this.collection.models}));
+                    this.$el.html(HtmlUtils.HTML(template({certificates: this.collection.models})).toString());
                     if (!this.active_certificate || this.collection.isEmpty()) {
                         this.$('#generate-exception-certificates').attr('disabled', 'disabled');
                     } else {
@@ -79,7 +80,13 @@
 
                 escapeAndShowMessage: function(message) {
                     $(this.message_div + '>p').remove();
-                    $(this.message_div).removeClass('hidden').append('<p>' + _.escape(message) + '</p>').focus();
+                    // xss-lint: disable=javascript-jquery-append
+                    $(this.message_div).removeClass('hidden').append(HtmlUtils.joinHtml(
+                        HtmlUtils.HTML('<p>'),
+                        _.escape(message),
+                        HtmlUtils.HTML('</p>')
+                    ))
+                    .focus();
                     $(this.message_div).fadeOut(6000, 'linear');
                 },
 

lms/static/js/courseware/certificates_api.js

@@ -13,7 +13,7 @@ $(document).ready(function() {
                 location.reload();
             },
             error: function(jqXHR, textStatus, errorThrown) {
-                $('#errors-info').html(jqXHR.responseText);
+                $('#errors-info').text(jqXHR.responseText);
                 $('.generate_certs').attr('disabled', false).removeClass('is-disabled').attr('aria-disabled', false);
             }
         });

lms/static/js/discovery/views/course_card.js

@@ -4,8 +4,9 @@
         'underscore',
         'backbone',
         'gettext',
-        'edx-ui-toolkit/js/utils/date-utils'
-    ], function($, _, Backbone, gettext, DateUtils) {
+        'edx-ui-toolkit/js/utils/date-utils',
+        'edx-ui-toolkit/js/utils/html-utils'
+    ], function($, _, Backbone, gettext, DateUtils, HtmlUtils) {
         'use strict';
 
         function formatDate(date, userLanguage, userTimezone) {
@@ -26,7 +27,7 @@
             className: 'courses-listing-item',
 
             initialize: function() {
-                this.tpl = _.template($(this.templateId).html());
+                this.tpl = HtmlUtils.template($(this.templateId).html());
             },
 
             render: function() {
@@ -51,7 +52,10 @@
                     userLanguage,
                     userTimezone
                 );
-                this.$el.html(this.tpl(data));
+                HtmlUtils.setHtml(
+                    this.$el,
+                    this.tpl(data)
+                );
                 return this;
             }
 

lms/static/js/discovery/views/facet.js

@@ -3,8 +3,9 @@
         'jquery',
         'underscore',
         'backbone',
-        'gettext'
-    ], function($, _, Backbone, gettext) {
+        'gettext',
+        'edx-ui-toolkit/js/utils/html-utils'
+    ], function($, _, Backbone, gettext, HtmlUtils) {
         'use strict';
 
         return Backbone.View.extend({
@@ -14,11 +15,14 @@
             className: '',
 
             initialize: function() {
-                this.tpl = _.template($(this.templateId).html());
+                this.tpl = HtmlUtils.template($(this.templateId).html());
             },
 
             render: function(type, name, term, count) {
-                this.$el.html(this.tpl({name: name, term: term, count: count}));
+                HtmlUtils.setHtml(
+                    this.$el,
+                    this.tpl({name: name, term: term, count: count})
+                );
                 this.$el.attr('data-facet', type);
                 return this;
             },

lms/static/js/edxnotes/views/note_group.js

@@ -1,8 +1,8 @@
 (function(define, undefined) {
     'use strict';
     define([
-        'gettext', 'underscore', 'backbone'
-    ], function(gettext, _, Backbone) {
+        'gettext', 'underscore', 'backbone', 'edx-ui-toolkit/js/utils/html-utils'
+    ], function(gettext, _, Backbone, HtmlUtils) {
         var GroupView, ChapterView;
 
         GroupView = Backbone.View.extend({
@@ -13,20 +13,20 @@
 
             initialize: function(options) {
                 this.options = _.extend({}, options);
-                this.template = _.template(this.options.template);
+                this.template = HtmlUtils.template(this.options.template);
                 this.className = this.options.className;
             },
 
             render: function() {
-                this.$el.prepend(this.template({
+                HtmlUtils.prepend(this.$el, this.template({
                     displayName: this.options.displayName
                 }));
 
                 return this;
             },
 
             addChild: function(child) {
-                this.$el.append(child);
+                this.$el.append(HtmlUtils.HTML(child).toString());
             }
         });
 
@@ -36,7 +36,7 @@
             id: function() {
                 return 'note-group-' + _.uniqueId();
             },
-            template: _.template('<h3 class="course-title"><%- chapterName %></h3>'),
+            template: HtmlUtils.template('<h3 class="course-title"><%- chapterName %></h3>'),
 
             initialize: function(options) {
                 this.children = [];
@@ -45,13 +45,11 @@
 
             render: function() {
                 var container = document.createDocumentFragment();
-                this.$el.html(this.template({
-                    chapterName: this.options.chapter.display_name || ''
-                }));
+                HtmlUtils.setHtml(this.$el, this.template({chapterName: this.options.chapter.display_name || ''}));
                 _.each(this.children, function(section) {
                     container.appendChild(section.render().el);
                 });
-                this.$el.append(container);
+                this.$el.append(HtmlUtils.HTML(container).toString());
 
                 return this;
             },

lms/static/js/edxnotes/views/note_item.js

@@ -2,8 +2,8 @@
     'use strict';
     define([
         'jquery', 'underscore', 'backbone', 'js/edxnotes/utils/template',
-        'js/edxnotes/utils/logger'
-    ], function($, _, Backbone, templateUtils, NotesLogger) {
+        'js/edxnotes/utils/logger', 'edx-ui-toolkit/js/utils/html-utils'
+    ], function($, _, Backbone, templateUtils, NotesLogger, HtmlUtils) {
         var NoteItemView = Backbone.View.extend({
             tagName: 'article',
             className: 'note',
@@ -25,8 +25,7 @@
 
             render: function() {
                 var context = this.getContext();
-                this.$el.html(this.template(context));
-
+                this.$el.html(HtmlUtils.HTML(this.template(context)).toString());
                 return this;
             },
 

lms/static/js/edxnotes/views/tabs/course_structure.js

@@ -2,8 +2,8 @@
     'use strict';
     define([
         'gettext', 'underscore', 'js/edxnotes/views/note_group', 'js/edxnotes/views/tab_panel',
-        'js/edxnotes/views/tab_view'
-    ], function(gettext, _, NoteGroupView, TabPanelView, TabView) {
+        'js/edxnotes/views/tab_view', 'edx-ui-toolkit/js/utils/html-utils'
+    ], function(gettext, _, NoteGroupView, TabPanelView, TabView, HtmlUtils) {
         var view = 'Location in Course';
         var CourseStructureView = TabView.extend({
             PanelConstructor: TabPanelView.extend({
@@ -31,7 +31,7 @@
                         }, this);
                         container.appendChild(chapterView.render().el);
                     }, this);
-                    this.$el.append(container);
+                    this.$el.append(HtmlUtils.HTML(container).toString());
                     return this;
                 },