Make verify_student templates safe

Fixes safe_template_linter errors for everything under verify_student. Includes
fixes to Jasmine tests and usage of HtmlUtils functionality.

lms/static/js/spec/main.js

@@ -364,6 +364,9 @@
                     // Set global variables that the payment code is expecting to be defined
                     window._ = require('underscore');
                     window._.str = require('underscore.string');
+                    window.edx = edx || {};
+                    window.edx.HtmlUtils = require('edx-ui-toolkit/js/utils/html-utils');
+                    window.edx.StringUtils = require('edx-ui-toolkit/js/utils/string-utils');
                 }
             },
             'js/verify_student/views/intro_step_view': {

lms/static/js/verify_student/views/step_view.js

@@ -35,7 +35,7 @@
             this.updateContext( this.templateContext() ).done(
                 function( templateContext ) {
                     // Render the template into the DOM
-                    $( this.el ).html( _.template( templateHtml)( templateContext ) );
+                    edx.HtmlUtils.setHtml( $(this.el), edx.HtmlUtils.template(templateHtml)( templateContext ) );
 
                     // Allow subclasses to install custom event handlers
                     this.postRender();

lms/templates/verify_student/error.underscore

@@ -7,7 +7,7 @@
         <%- errorTitle %>
       </h3>
       <div class="copy">
-        <p><%= errorMsg %></p>
+        <p><%- errorMsg %></p>
       </div>
     </div>
   </div>

lms/templates/verify_student/face_photo_step.underscore

@@ -16,7 +16,7 @@
   <div class="facephoto view">
     <h3 class="title"><%- gettext( "Take Your Photo" ) %></h2>
     <div class="instruction">
-      <p><%=  _.sprintf( gettext( "When your face is in position, use the camera button %(icon)s below to take your photo." ), { icon: '<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i><span class="sr">icon</span>)</span>' } ) %></p>
+      <p><%=  HtmlUtils.interpolateHtml( gettext( "When your face is in position, use the camera button {icon} below to take your photo." ), { icon: HtmlUtils.HTML('<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i><span class="sr">icon</span>)</span>') } ) %></p>
     </div>
 
     <div class="wrapper-task">
@@ -31,7 +31,7 @@
               <li class="help-item"><%- gettext( "The photo of your face matches the photo on your ID." ) %></li>
             </ul>
 
-            <p class="copy-extra"><%=  _.sprintf( gettext( "To use the current photo, select the camera button %(icon)s. To take another photo, select the retake button %(icon)s." ), { icon: '<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i><span class="sr">icon</span>)</span>' } ) %></p>
+            <p class="copy-extra"><%=  HtmlUtils.interpolateHtml( gettext( "To use the current photo, select the camera button {icon}. To take another photo, select the retake button {icon}." ), { icon: HtmlUtils.HTML('<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i><span class="sr">icon</span>)</span>') } ) %></p>
           </div>
         </div>
 

lms/templates/verify_student/id_photo_step.underscore

@@ -19,7 +19,7 @@
               <li class="help-item"><%- gettext( "Ensure that you can see your photo and read your name" ) %></li>
               <li class="help-item"><%- gettext( "Make sure your ID is well-lit" ) %></li>
               <li class="help-item">
-                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your ID" ), { icon: '<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i>)</span>' } ) %>
+                <%=  HtmlUtils.interpolateHtml( gettext( "Once in position, use the camera button {icon} to capture your ID" ), { icon: HtmlUtils.HTML('<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i>)</span>') } ) %>
               </li>
               <li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>
             </ul>

lms/templates/verify_student/incourse_reverify.html

+<%page expression_filter="h"/>
 <%!
 from django.utils.translation import ugettext as _
 %>

lms/templates/verify_student/incourse_reverify.underscore

@@ -17,7 +17,7 @@
               <li class="help-item"><%- gettext( "Make sure your face is well-lit" ) %></li>
               <li class="help-item"><%- gettext( "Be sure your entire face is inside the frame" ) %></li>
               <li class="help-item">
-                <%=  _.sprintf( gettext( "Once in position, use the camera button %(icon)s to capture your photo" ), { icon: '<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i>)</span>' } ) %>
+                <%=  HtmlUtils.interpolateHtml( gettext( "Once in position, use the camera button {icon} to capture your photo" ), { icon: HtmlUtils.HTML('<span class="example">(<i class="icon fa fa-camera" aria-hidden="true"></i>)</span>') } ) %>
               </li>
               <li class="help-item"><%- gettext( "Can we match the photo you took with the one on your ID?" ) %></li>
               <li class="help-item"><%- gettext( "Use the retake photo button if you are not pleased with your photo" ) %></li>
@@ -44,7 +44,7 @@
     </div>
 
     <div>
-      <button class="action action-primary" id="submit"><%= gettext("Submit") %></button>
+      <button class="action action-primary" id="submit"><%- gettext("Submit") %></button>
     </div>
 
   </div>

lms/templates/verify_student/intro_step.underscore

@@ -2,9 +2,13 @@
   <article class="content-main">
   <% if ( hasPaid ) { %>
      <h3 class="title">
-      <%= _.sprintf(
-          gettext( "Thanks for returning to verify your ID in: %(courseName)s"),
-          { courseName: '<span class="course-title">' + courseName + '</span>' }
+      <%= HtmlUtils.interpolateHtml(
+          gettext( "Thanks for returning to verify your ID in: {courseName}"),
+          { courseName: HtmlUtils.joinHtml(
+            HtmlUtils.HTML('<span class="course-title">'),
+            courseName,
+            HtmlUtils.HTML('</span>')
+          ) }
         ) %>
      </h3>
   <% } else { %>

lms/templates/verify_student/make_payment_step.underscore

@@ -2,17 +2,25 @@
   <div class="review view">
     <% if ( !upgrade ) { %>
       <h2 class="title center-col">
-        <%= _.sprintf(
-            gettext( "You are enrolling in: %(courseName)s"),
-            { courseName: '<span class="course-title">' + courseName + '</span>' }
-          ) %>
+        <%= HtmlUtils.interpolateHtml(
+            gettext( "You are enrolling in: {courseName}"),
+            { courseName: HtmlUtils.joinHtml(
+                HtmlUtils.HTML('<span class="course-title">'),
+                courseName,
+                HtmlUtils.HTML('</span>')
+            ) }
+        ) %>
       </h2>
     <% } else { %>
       <h2 class="title">
-        <%= _.sprintf(
-            gettext( "You are upgrading your enrollment for: %(courseName)s"),
-            { courseName: '<span class="course-title">' + courseName + '</span>' }
-          ) %>
+        <%= HtmlUtils.interpolateHtml(
+            gettext( "You are upgrading your enrollment for: {courseName}"),
+            { courseName: HtmlUtils.joinHtml(
+                HtmlUtils.HTML('<span class="course-title">'),
+                courseName,
+                HtmlUtils.HTML('</span>')
+            ) }
+        ) %>
       </h2>
       <div class="instruction">
         <%- gettext( "You can now enter your payment information and complete your enrollment." ) %>
@@ -89,9 +97,9 @@
     <div class="container register is-verified">
       <h3 class="title"><%- gettext( "You have already verified your ID!" ) %></h3>
       <p>
-        <%= _.sprintf(
-        gettext( "Your verification status is good until %(verificationGoodUntil)s." ),
-         { verificationGoodUntil: verificationGoodUntil }
+        <%- StringUtils.interpolate(
+          gettext( "Your verification status is good until {verificationGoodUntil}." ),
+          { verificationGoodUntil: verificationGoodUntil }
         ) %>
       </p>
     </div>

lms/templates/verify_student/make_payment_step_ab_testing.underscore

@@ -6,17 +6,25 @@
         </h2>
     <% } else if ( !upgrade ) { %>
       <h2 class="page-title">
-        <%= _.sprintf(
-            gettext( "You are enrolling in %(courseName)s"),
-            { courseName: '<span class="course-title">' + courseName + '</span>' }
-          ) %>
+        <%= HtmlUtils.interpolateHtml(
+            gettext( "You are enrolling in: {courseName}"),
+            { courseName: HtmlUtils.joinHtml(
+                HtmlUtils.HTML('<span class="course-title">'),
+                courseName,
+                HtmlUtils.HTML('</span>')
+            ) }
+        ) %>
       </h2>
     <% } else { %>
       <h2 class="page-title">
-        <%= _.sprintf(
-            gettext( "Upgrade to a Verified Certificate for %(courseName)s"),
-            { courseName: '<span class="course-title">' + courseName + '</span>' }
-          ) %>
+        <%= HtmlUtils.interpolateHtml(
+            gettext( "Upgrade to a Verified Certificate for {courseName}"),
+            { courseName: HtmlUtils.joinHtml(
+                HtmlUtils.HTML('<span class="course-title">'),
+                courseName,
+                HtmlUtils.HTML('</span>')
+            ) }
+        ) %>
       </h2>
     <% } %>
 
@@ -33,12 +41,12 @@
             </div>
             <p>
                 <% if ( courseModeSlug === 'no-id-professional' || courseModeSlug === 'professional') { %>
-                    <%= _.sprintf(
-                        gettext( "Professional Certificate for %(courseName)s"),{  courseName: courseName }
+                    <%- StringUtils.interpolate(
+                        gettext( "Professional Certificate for {courseName}"),{  courseName: courseName }
                      )%>
                 <% } else { %>
-                    <%= _.sprintf(
-                        gettext( "Verified Certificate for %(courseName)s"),{  courseName: courseName }
+                    <%- StringUtils.interpolate(
+                        gettext( "Verified Certificate for {courseName}"),{  courseName: courseName }
                      )%>
                 <% } %>
             </p>

lms/templates/verify_student/missed_deadline.html

+<%page expression_filter="h"/>
 <%!
 from django.utils.translation import ugettext as _
 from lms.djangoapps.verify_student.views import PayAndVerifyView

lms/templates/verify_student/pay_and_verify.html

+<%page expression_filter="h"/>
 <%!
 import json
 from django.utils.translation import ugettext as _
+
+from openedx.core.djangolib.markup import Text, HTML
 from lms.djangoapps.verify_student.views import PayAndVerifyView
 %>
 <%namespace name='static' file='../static_content.html'/>
@@ -10,13 +13,13 @@ from lms.djangoapps.verify_student.views import PayAndVerifyView
 
 <%block name="pagetitle">
   % if message_key == PayAndVerifyView.UPGRADE_MSG:
-    ${_("Upgrade Your Enrollment For {course_name}.").format(course_name=course.display_name) | h}
+    ${_("Upgrade Your Enrollment For {course_name}.").format(course_name=course.display_name)}
   % elif message_key == PayAndVerifyView.PAYMENT_CONFIRMATION_MSG:
-    ${_("Receipt For {course_name}").format(course_name=course.display_name) | h}
+    ${_("Receipt For {course_name}").format(course_name=course.display_name)}
   % elif message_key in [PayAndVerifyView.VERIFY_NOW_MSG, PayAndVerifyView.VERIFY_LATER_MSG]:
-    ${_("Verify For {course_name}").format(course_name=course.display_name) | h}
+    ${_("Verify For {course_name}").format(course_name=course.display_name)}
   % else:
-    ${_("Enroll In {course_name}").format(course_name=course.display_name) | h}
+    ${_("Enroll In {course_name}").format(course_name=course.display_name)}
   % endif
 </%block>
 
@@ -58,10 +61,10 @@ from lms.djangoapps.verify_student.views import PayAndVerifyView
     <div
       id="pay-and-verify-container"
       class="pay-and-verify"
-      data-full-name='${user_full_name | h}'
+      data-full-name='${user_full_name}'
       data-platform-name='${platform_name}'
       data-course-key='${course_key}'
-      data-course-name='${course.display_name|h}'
+      data-course-name='${course.display_name}'
       data-course-start-date='${course.start_datetime_text()}'
       data-courseware-url='${courseware_url}'
       data-course-mode-name='${course_mode.name}'
@@ -73,7 +76,7 @@ from lms.djangoapps.verify_student.views import PayAndVerifyView
       data-contribution-amount='${contribution_amount}'
       data-processors='${json.dumps(processors)}'
       data-verification-deadline='${verification_deadline}'
-      data-display-steps='${json.dumps(display_steps) | h}'
+      data-display-steps='${json.dumps(display_steps)}'
       data-current-step='${current_step}'
       data-requirements='${json.dumps(requirements)}'
       data-msg-key='${message_key}'
@@ -99,7 +102,9 @@ from lms.djangoapps.verify_student.views import PayAndVerifyView
               <li class="help-item help-item-questions">
                   <h3 class="title">${_("Have questions?")}</h3>
                   <div class="copy">
-                      <p>${_("Please read {a_start}our FAQs to view common questions about our certificates{a_end}.").format(a_start='<a rel="external" href="'+ marketing_link('WHAT_IS_VERIFIED_CERT') + '">', a_end="</a>")}</p>
+                      <p>${Text(_("Please read {a_start}our FAQs to view common questions about our certificates{a_end}.")).format(
+                              a_start=HTML('<a rel="external" href="{}">').format(marketing_link('WHAT_IS_VERIFIED_CERT')),
+                              a_end=HTML('</a>'))}</p>
                   </div>
               </li>
 
@@ -107,7 +112,11 @@ from lms.djangoapps.verify_student.views import PayAndVerifyView
               <li class="help-item help-item-technical">
                   <h3 class="title">${_("Technical Requirements")}</h3>
                   <div class="copy">
-                      <p>${_("Please make sure your browser is updated to the {a_start}most recent version possible{a_end}. Also, please make sure your <strong>webcam is plugged in, turned on, and allowed to function in your web browser (commonly adjustable in your browser settings).</strong>").format(a_start='<strong><a rel="external" href="http://browsehappy.com/">', a_end="</a></strong>")}</p>
+                      <p>${Text(_("Please make sure your browser is updated to the {strong_start}{a_start}most recent version possible{a_end}{strong_end}. Also, please make sure your {strong_start}webcam is plugged in, turned on, and allowed to function in your web browser (commonly adjustable in your browser settings).{strong_end}")).format(
+                              a_start=HTML('<a rel="external" href="http://browsehappy.com/">'),
+                              a_end=HTML('</a>'),
+                              strong_start=HTML('<strong>'),
+                              strong_end=HTML('</strong>'))}</p>
                   </div>
               </li>
               % endif

lms/templates/verify_student/payment_confirmation_step.underscore

 <div class="wrapper-content-main payment-confirmation-step">
   <article class="content-main">
     <h3 class="title">
-      <%= _.sprintf( gettext( "Thank you! We have received your payment for %(courseName)s." ), { courseName: '<span class="course-title">' + courseName + '</span>' } ) %>
+      <%= HtmlUtils.interpolateHtml(
+        gettext( "Thank you! We have received your payment for {courseName}." ),
+        { courseName: HtmlUtils.joinHtml(
+          HtmlUtils.HTML('<span class="course-title">'),
+          courseName,
+          HtmlUtils.HTML('</span>')
+        ) }
+      ) %>
     </h3>
 
     <% if ( receipt ) { %>

lms/templates/verify_student/reverify.html

+<%page expression_filter="h"/>
 <%!
 from django.utils.translation import ugettext as _
 %>

lms/templates/verify_student/reverify_not_allowed.html

+<%page expression_filter="h"/>
 <%!
     from django.utils.translation import ugettext as _
     from django.core.urlresolvers import reverse

lms/templates/verify_student/review_photos_step.underscore

@@ -37,7 +37,7 @@
 
                   <div class="copy expandable-area">
                     <p><%- gettext( "Make sure that the full name on your account matches the name on your ID." ) %></p>
-                    <input type="text" name="new-name" id="new-name" placeholder="<%= fullName %>">
+                    <input type="text" name="new-name" id="new-name" placeholder="<%- fullName %>">
                   </div>
                 </div>
               </li>

lms/templates/verify_student/test/fake_softwaresecure_response.html

+<%page expression_filter="h"/>
 <%namespace name='static' file='/static_content.html'/>
+<%! from openedx.core.djangolib.js_utils import js_escaped_string %>
 <html>
 <head><title>Fake Software Secure Form</title>
 </head>
@@ -45,7 +47,7 @@ $(document).ready(function() {
     function ajax_post(status, reason){
 
         var data = {
-            "EdX-ID": '${receipt_id}',
+            "EdX-ID": '${receipt_id | n, js_escaped_string}',
             "Result": status,
             "Reason": reason,
             "MessageType": ""
@@ -56,9 +58,9 @@ $(document).ready(function() {
 
         $.ajax({
             type: "POST",
-            url: '${results_callback}',
+            url: '${results_callback | n, js_escaped_string}',
             headers: {
-            "Authorization": "${authorization_code}"
+            "Authorization": "${authorization_code | n, js_escaped_string}"
             },
             data: JSON.stringify(data),
             contentType: "application/json;",