Merge pull request #1314 from dod-ccpo/bugfix/use-v-text-where-possible

Use v-text instead of v-html to mitigate XSS attacks

js/components/clin_fields.js

@@ -1,5 +1,4 @@
 import { emitFieldChange } from '../lib/emitters'
-import escape from '../lib/escape'
 import optionsinput from './options_input'
 import textinput from './text_input'
 import clindollaramount from './clin_dollar_amount'
@@ -100,7 +99,7 @@ export default {
   computed: {
     clinTitle: function() {
       if (!!this.clinNumber) {
-        return escape(`CLIN ${this.clinNumber}`)
+        return `CLIN ${this.clinNumber}`
       } else {
         return `CLIN`
       }

templates/components/clin_fields.html

@@ -23,7 +23,7 @@
     inline-template>
     <div class="clin-card" v-if="showClin">
       <div class="card__title">
-        <span class="h4" v-html='clinTitle'></span>
+        <span class="h4" v-text='clinTitle'></span>
         <button
           v-if='clinIndex > 0'
           class="icon-link icon-link__remove-clin"
@@ -119,7 +119,7 @@
         {% endif %}
 
         <div class="h5 clin-card__title">Percent Obligated</div>
-        <p id="percent-obligated" v-html='percentObligated'></p>
+        <p id="percent-obligated" v-text='percentObligated'></p>
 
         <hr>
         <div class="form-row">
@@ -140,7 +140,7 @@
             <div class='modal__dialog' role='dialog' aria-modal='true'>
               <div class='modal__body'>
                 <div class="task-order__modal-cancel">
-                  <h1 v-html='"{{ 'task_orders.form.clin_remove_text' | translate }}" + clinTitle + "?"'></h1>
+                  <h1 v-text='"{{ 'task_orders.form.clin_remove_text' | translate }}" + clinTitle + "?"'></h1>
                   <div class="task-order__modal-cancel_buttons">
                     <button
                       v-on:click='closeModal(removeModalId)'

templates/components/upload_input.html

@@ -15,7 +15,7 @@
   <div>
     <div v-show="valid" class="uploaded-file">
       {{ Icon("ok") }}
-      <a class="uploaded-file__name" v-html="baseName" v-bind:href="downloadLink"></a>
+      <a class="uploaded-file__name" v-text="baseName" v-bind:href="downloadLink"></a>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
     </div>
     <div v-show="valid === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>

templates/portfolios/reports/application_and_env_spending.html

@@ -37,19 +37,19 @@
               <tr>              
                 <td>
                   <button v-on:click='toggle($event, applicationIndex)' class='icon-link icon-link--large'>
-                    <span v-html='application.name'></span>
+                    <span v-text='application.name'></span>
                     <template v-if='application.isVisible'>{{ Icon('caret_down') }}</template>
                     <template v-else>{{ Icon('caret_up') }}</template>
                   </button>
                 </td>
                 <td class="table-cell--align-right">
-                  <span v-html='formatDollars(application.this_month || 0)'></span>
+                  <span v-text='formatDollars(application.this_month || 0)'></span>
                 </td>
                 <td class="table-cell--align-right">
-                  <span v-html='formatDollars(application.last_month || 0)'></span>
+                  <span v-text='formatDollars(application.last_month || 0)'></span>
                 </td>
                 <td class="table-cell--align-right">
-                  <span v-html='formatDollars(application.total || 0)'></span>
+                  <span v-text='formatDollars(application.total || 0)'></span>
                 </td>
               </tr>
               <tr 
@@ -58,16 +58,16 @@
                 v-bind:class="[ index == application.environments.length -1 ? 'reporting-spend-table__env-row--last' : '']"
               >
                 <td>
-                  <span class="reporting-spend-table__env-row-label" v-html='environment.name'></span>
+                  <span class="reporting-spend-table__env-row-label" v-text='environment.name'></span>
                 </td>
                 <td class="table-cell--align-right">
-                  <span v-html='formatDollars(environment.this_month || 0)'></span>
+                  <span v-text='formatDollars(environment.this_month || 0)'></span>
                 </td>
                 <td class="table-cell--align-right">
-                  <span v-html='formatDollars(environment.last_month || 0)'></span>
+                  <span v-text='formatDollars(environment.last_month || 0)'></span>
                 </td>
                 <td class="table-cell--align-right">
-                  <span v-html='formatDollars(environment.total || 0)'></span>
+                  <span v-text='formatDollars(environment.total || 0)'></span>
                 </td>
               </tr>
             </template>