BB-2941 Latest batch of XSS fixes

cms/static/js/views/baseview.js

@@ -44,6 +44,7 @@ define(['jquery', 'underscore', 'backbone', 'gettext', 'js/utils/handle_iframe_b
                 this.options = options;
 
                 var _this = this;
+                // xss-lint: disable=javascript-jquery-insertion
                 this.render = _.wrap(this.render, function(render, options) {
                     _this.beforeRender();
                     render(options);

cms/static/js/views/license.js

@@ -82,7 +82,7 @@ define([
         },
 
         render: function() {
-            this.$el.html(_.template(licenseSelectorTemplate)({
+            edx.HtmlUtils.setHtml(this.$el, edx.HtmlUtils.template(licenseSelectorTemplate)({
                 model: this.model.attributes,
                 licenseString: this.model.toString() || '',
                 licenseInfo: this.licenseInfo,

cms/static/js/views/list.js

@@ -38,15 +38,16 @@ define([
         },
 
         render: function(model) {
-            this.$el.html(this.template({
+            var template = this.template({
                 itemCategoryDisplayName: this.itemCategoryDisplayName,
                 newItemMessage: this.newItemMessage,
                 emptyMessage: this.emptyMessage,
                 length: this.collection.length,
                 isEditing: model && model.get('editing'),
                 canCreateNewItem: this.canCreateItem(this.collection),
                 restrictEditing: this.restrictEditing
-            }));
+            });
+            edx.HtmlUtils.setHtml(this.$el, edx.HtmlUtils.HTML(template));
 
             this.collection.each(function(model) {
                 this.$(this.listContainerCss).append(

cms/static/js/views/manage_users_and_roles.js

@@ -1,9 +1,9 @@
 /*
  Code for editing users and assigning roles within a course or library team context.
  */
-define(['jquery', 'underscore', 'gettext', 'js/views/baseview',
-    'common/js/components/views/feedback_prompt', 'common/js/components/utils/view_utils'],
-    function($, _, gettext, BaseView, PromptView, ViewUtils) {
+define(['jquery', 'underscore', 'gettext', 'js/views/baseview', 'common/js/components/views/feedback_prompt',
+    'common/js/components/utils/view_utils', 'edx-ui-toolkit/js/utils/html-utils'],
+    function($, _, gettext, BaseView, PromptView, ViewUtils, HtmlUtils) {
         'use strict';
         var default_messages = {
             defaults: {
@@ -157,7 +157,7 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview',
                         viewHelpers: viewHelpers
                     };
 
-                    this.$userList.append(templateFn(template_data));
+                    this.$userList.append(HtmlUtils.HTML(templateFn(template_data)).toString());
                 }
             },
 

cms/static/js/views/uploads.js

@@ -1,5 +1,7 @@
-define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'jquery.form'],
-    function($, _, gettext, BaseModal) {
+define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'edx-ui-toolkit/js/utils/html-utils',
+    'jquery.form'],
+    function($, _, gettext, BaseModal, HtmlUtils) {
+        'use strict';
         var UploadDialog = BaseModal.extend({
             events: _.extend({}, BaseModal.prototype.events, {
                 'change input[type=file]': 'selectFile',
@@ -42,7 +44,7 @@ define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'jquery
                 // a blank input to prompt the user to upload a different (valid) file.
                 if (selectedFile && isValid) {
                     $(oldInput).removeClass('error');
-                    this.$('input[type=file]').replaceWith(oldInput);
+                    this.$('input[type=file]').replaceWith(HtmlUtils.ensureHtml(oldInput).toString());
                     this.$('.action-upload').removeClass('disabled');
                 } else {
                     this.$('.action-upload').addClass('disabled');
@@ -53,7 +55,7 @@ define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'jquery
             getContentHtml: function() {
                 return this.template({
                     url: this.options.url || CMS.URL.UPLOAD_ASSET,
-                    message: this.model.escape('message'),
+                    message: this.model.get('message'),
                     selectedFile: this.model.get('selectedFile'),
                     uploading: this.model.get('uploading'),
                     uploadedBytes: this.model.get('uploadedBytes'),

cms/static/js/views/video/transcripts/message_manager.js

@@ -74,16 +74,15 @@ function($, Backbone, _, Utils, FileUploader, gettext) {
                 return this;
             }
 
-            template = _.template(tplHtml);
+            template = edx.HtmlUtils.template(tplHtml);
 
-            this.$el.find('.transcripts-status')
-                .removeClass('is-invisible')
-                .find(this.elClass).html(template({
-                    component_locator: encodeURIComponent(this.component_locator),
-                    html5_list: html5List,
-                    grouped_list: groupedList,
-                    subs_id: (params) ? params.subs : ''
-                }));
+            edx.HtmlUtils.setHtml(
+            this.$el.find('.transcripts-status').removeClass('is-invisible').find(this.elClass), template({
+                component_locator: encodeURIComponent(this.component_locator),
+                html5_list: html5List,
+                grouped_list: groupedList,
+                subs_id: (params) ? params.subs : ''
+            }));
 
             this.fileUploader.render();
 
@@ -106,11 +105,7 @@ function($, Backbone, _, Utils, FileUploader, gettext) {
             if (err) {
                 // Hide any other error messages.
                 this.hideError();
-
-                $error
-                    .html(gettext(err))
-                    .removeClass(this.invisibleClass);
-
+                edx.HtmlUtils.setHtml($error, gettext(err)).removeClass(this.invisibleClass);
                 if (hideButtons) {
                     this.$el.find('.wrapper-transcripts-buttons')
                         .addClass(this.invisibleClass);

cms/static/js/views/xblock_string_field_editor.js

@@ -5,8 +5,9 @@
  * XBlock field's value if it has been changed. If the user presses Escape, then any changes will
  * be removed and the input hidden again.
  */
-define(['js/views/baseview', 'js/views/utils/xblock_utils'],
-    function(BaseView, XBlockViewUtils) {
+define(['js/views/baseview', 'js/views/utils/xblock_utils', 'edx-ui-toolkit/js/utils/html-utils'],
+    function(BaseView, XBlockViewUtils, HtmlUtils) {
+        'use strict';
         var XBlockStringFieldEditor = BaseView.extend({
             events: {
                 'click .xblock-field-value-edit': 'showInput',
@@ -29,11 +30,13 @@ define(['js/views/baseview', 'js/views/utils/xblock_utils'],
             },
 
             render: function() {
-                this.$el.append(this.template({
+                var attributes = {
+                    // xss-lint: disable=javascript-escape
                     value: this.model.escape(this.fieldName),
                     fieldName: this.fieldName,
                     fieldDisplayName: this.fieldDisplayName
-                }));
+                };
+                this.$el.append(HtmlUtils.HTML(this.template(attributes)).toString());
                 return this;
             },
 

cms/templates/js/course_info_handouts.underscore

@@ -1,22 +1,22 @@
-<a href="#" class="edit-button"><span class="edit-icon"></span><%= gettext("Edit") %></a>
+<a href="#" class="edit-button"><span class="edit-icon"></span><%- gettext("Edit") %></a>
 
-<h2 class="title"><%= gettext("Course Handouts") %></h2>
+<h2 class="title"><%- gettext("Course Handouts") %></h2>
 <%if (model.get('data') != null) { %>
   <div class="handouts-content">
 
   </div>
 <% } else {%>
-  <p><%= gettext("You have no handouts defined") %></p>
+  <p><%- gettext("You have no handouts defined") %></p>
 <% } %>
 <form class="edit-handouts-form" style="display: block;">
   <div class="message message-status error" name="handout_html_error" id="handout_error">
-    <%= gettext("There is invalid code in your content. Please check to make sure it is valid HTML.") %>
+    <%- gettext("There is invalid code in your content. Please check to make sure it is valid HTML.") %>
   </div>
   <div class="row">
     <textarea class="handouts-content-editor text-editor"></textarea>
   </div>
   <div class="row">
-    <a href="#" class="save-button"><%= gettext("Save") %></a>
-    <a href="#" class="cancel-button"><%= gettext("Cancel") %></a>
+    <a href="#" class="save-button"><%- gettext("Save") %></a>
+    <a href="#" class="cancel-button"><%- gettext("Cancel") %></a>
   </div>
 </form>

cms/templates/js/grading-editor.underscore

@@ -1,12 +1,12 @@
-<h3 class="modal-section-title"><%= gettext('Grading') %></h3>
+<h3 class="modal-section-title"><%- gettext('Grading') %></h3>
 <div class="modal-section-content grading-type">
     <ul class="list-fields list-input">
         <li class="field field-grading-type field-select">
-            <label for="grading_type" class="label"><%= gettext('Grade as:') %></label>
+            <label for="grading_type" class="label"><%- gettext('Grade as:') %></label>
             <select class="input" id="grading_type">
-                <option value="notgraded"><%= gettext('Not Graded') %></option>
+                <option value="notgraded"><%- gettext('Not Graded') %></option>
                 <% _.each(graderTypes, function(grader) { %>
-                  <option value="<%= grader %>"><%= grader %></option>
+                  <option value="<%- grader %>"><%- grader %></option>
                 <% }); %>
             </select>
         </li>

cms/templates/js/metadata-string-entry.underscore

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

cms/templates/js/section-name-edit.underscore

@@ -1,5 +1,5 @@
 <form class="section-name-edit">
-    <input type="text" value="<%= name %>" autocomplete="off"/>
-    <input type="submit" class="save-button" value="<%= gettext("Save") %>" />
-    <input type="button" class="cancel-button" value="<%= gettext("Cancel") %>" />
+    <input type="text" value="<%- name %>" autocomplete="off"/>
+    <input type="submit" class="save-button" value="<%- gettext("Save") %>" />
+    <input type="button" class="cancel-button" value="<%- gettext("Cancel") %>" />
 </form>

cms/templates/js/signatory-actions.underscore

@@ -1,6 +1,6 @@
 <div class="collection-edit">
     <div class="actions custom-signatory-action">
-            <button class="signatory-panel-save action action-primary" type="submit"><%= gettext("Save") %></button>
-            <button class="signatory-panel-close action action-secondary action-cancel"><%= gettext("Cancel") %></button>
+            <button class="signatory-panel-save action action-primary" type="submit"><%- gettext("Save") %></button>
+            <button class="signatory-panel-close action action-secondary action-cancel"><%- gettext("Cancel") %></button>
     </div>
 </div>

cms/templates/js/team-member.underscore

@@ -1,23 +1,23 @@
-<li class="user-item" data-email="<%= user.email %>">
+<li class="user-item" data-email="<%- user.email %>">
     <span class="wrapper-ui-badge">
-    <span class="flag flag-role flag-role-<%= user.role %> is-hanging">
-      <span class="label sr"><%= gettext("Current Role:") %></span>
+    <span class="flag flag-role flag-role-<%- user.role %> is-hanging">
+      <span class="label sr"><%- gettext("Current Role:") %></span>
       <span class="value">
-        <%= roles[user.role] %>
+        <%- roles[user.role] %>
         <% if (is_current_user) { %>
-            <span class="msg-you"><%= gettext("You!") %></span>
+            <span class="msg-you"><%- gettext("You!") %></span>
         <% } %>
       </span>
     </span>
     </span>
 
     <div class="item-metadata">
     <h3 class="user-name">
-      <span class="user-username"><%= user.username %></span>
+      <span class="user-username"><%- user.username %></span>
       <span class="user-email">
-        <a class="action action-email" href="mailto:<%= user.email %>"
-                title="<%= viewHelpers.format(gettext("send an email message to {email}"), {email: user.email})%>">
-            <%= user.email %>
+        <a class="action action-email" href="mailto:<%- user.email %>"
+                title="<%- viewHelpers.format(gettext("send an email message to {email}"), {email: user.email})%>">
+            <%- user.email %>
         </a>
       </span>
     </h3>
@@ -29,19 +29,19 @@
         <% for (var i=0; i < actions.length; i++) { %>
             <% var action = actions[i]; %>
                 <% if (action.notoggle) { %>
-                    <span class="admin-role notoggleforyou"><%= gettext("Promote another member to Admin to remove your admin rights") %></span>
+                    <span class="admin-role notoggleforyou"><%- gettext("Promote another member to Admin to remove your admin rights") %></span>
                 <% } else { %>
-                    <a href="#" class="make-<%= action.to_role %> admin-role <%= action.direction %>-admin-role">
+                    <a href="#" class="make-<%- action.to_role %> admin-role <%- action.direction %>-admin-role">
                         <% var template = (action.direction === 'add') ? gettext("Add {role} Access") : gettext("Remove {role} Access"); %>
-                        <%= viewHelpers.format(template, {role: action.label}) %></span>
+                        <%- viewHelpers.format(template, {role: action.label}) %></span>
                     </a>
                 <% } %>
         <% } %>
         </li>
-        <li class="action action-delete <%=!allow_delete ? "is-disabled" : "" %> aria-disabled="<%=!allow_delete%>">
-            <a href="#" class="delete remove-user action-icon" data-id="<%= user.email %>">
+        <li class="action action-delete <%-!allow_delete ? "is-disabled" : "" %> aria-disabled="<%-!allow_delete%>">
+            <a href="#" class="delete remove-user action-icon" data-id="<%- user.email %>">
                 <span class="icon fa fa-trash-o" aria-hidden="true"></span>
-                <span class="sr"><%= viewHelpers.format(gettext("Delete the user, {username}"), {username:user.username}) %></span>
+                <span class="sr"><%- viewHelpers.format(gettext("Delete the user, {username}"), {username:user.username}) %></span>
             </a>
         </li>
     </ul>

cms/templates/js/video/transcripts/messages/transcripts-import.underscore

@@ -1,16 +1,16 @@
-<div class="transcripts-message-status status-error"><span class="icon fa fa-remove" aria-hidden="true"></span><%= gettext("No EdX Timed Transcript") %></div>
+<div class="transcripts-message-status status-error"><span class="icon fa fa-remove" aria-hidden="true"></span><%- gettext("No EdX Timed Transcript") %></div>
 <p class="transcripts-message">
-<%= gettext("EdX doesn't have a timed transcript for this video in Studio, but we found a transcript on YouTube. You can import the YouTube transcript or upload your own .srt transcript file.") %>
+<%- gettext("EdX doesn't have a timed transcript for this video in Studio, but we found a transcript on YouTube. You can import the YouTube transcript or upload your own .srt transcript file.") %>
 </p>
 <div class="transcripts-file-uploader"></div>
 <p class="transcripts-error-message is-invisible">
-<%= gettext("Error.") %>
+<%- gettext("Error.") %>
 </p>
 <div class="wrapper-transcripts-buttons">
-    <button class="action setting-import" type="button" name="setting-import" value="<%= gettext("Import YouTube Transcript") %>" data-tooltip="<%= gettext("Import YouTube Transcript") %>">
-        <span><%= gettext("Import YouTube Transcript") %></span>
+    <button class="action setting-import" type="button" name="setting-import" value="<%- gettext("Import YouTube Transcript") %>" data-tooltip="<%- gettext("Import YouTube Transcript") %>">
+        <span><%- gettext("Import YouTube Transcript") %></span>
     </button>
-    <button class="action setting-upload" type="button" name="setting-upload" value="<%= gettext("Upload New Transcript") %>" data-tooltip="<%= gettext("Upload New .srt Transcript") %>">
-        <span><%= gettext("Upload New Transcript") %></span>
+    <button class="action setting-upload" type="button" name="setting-upload" value="<%- gettext("Upload New Transcript") %>" data-tooltip="<%- gettext("Upload New .srt Transcript") %>">
+        <span><%- gettext("Upload New Transcript") %></span>
     </button>
 </div>

cms/templates/js/video/transcripts/messages/transcripts-not-found.underscore

@@ -1,16 +1,16 @@
-<div class="transcripts-message-status status-error"><span class="icon fa fa-remove" aria-hidden="true"></span><%= gettext("No Timed Transcript") %></div>
+<div class="transcripts-message-status status-error"><span class="icon fa fa-remove" aria-hidden="true"></span><%- gettext("No Timed Transcript") %></div>
 <p class="transcripts-message">
-<%= gettext("EdX doesn\'t have a timed transcript for this video. Please upload an .srt file.") %>
+<%- gettext("EdX doesn\'t have a timed transcript for this video. Please upload an .srt file.") %>
 </p>
 <div class="transcripts-file-uploader"></div>
 <p class="transcripts-error-message is-invisible">
-<%= gettext("Error.") %>
+<%- gettext("Error.") %>
 </p>
 <div class="wrapper-transcripts-buttons">
-    <button class="action setting-upload" type="button" name="setting-upload" value="<%= gettext("Upload New Transcript") %>" data-tooltip="<%= gettext("Upload New Transcript") %>">
-        <%= gettext("Upload New Transcript") %>
+    <button class="action setting-upload" type="button" name="setting-upload" value="<%- gettext("Upload New Transcript") %>" data-tooltip="<%- gettext("Upload New Transcript") %>">
+        <%- gettext("Upload New Transcript") %>
     </button>
-    <a class="action setting-download is-disabled" aria-disabled="true" href="javascropt: void(0);" data-tooltip="<%= gettext("Download Transcript for Editing") %>">
-        <%= gettext("Download Transcript for Editing") %>
+    <a class="action setting-download is-disabled" aria-disabled="true" href="javascropt: void(0);" data-tooltip="<%- gettext("Download Transcript for Editing") %>">
+        <%- gettext("Download Transcript for Editing") %>
     </a>
 </div>