From ffd3dd2d9df875a9a9ef976b2fee39ddd60a2502 Mon Sep 17 00:00:00 2001
From: graham-dds <graham.beckley-ctr@friends.dds.mil>
Date: Tue, 14 Jan 2020 15:16:21 -0500
Subject: [PATCH] use v-text instead of v-html

v-html interprets the string passed to it as raw html, without escaping.
We should use v-text wherever possible.
---
 js/components/clin_fields.js                     |  3 +--
 templates/components/clin_fields.html            |  6 +++---
 templates/components/upload_input.html           |  2 +-
 .../reports/application_and_env_spending.html    | 16 ++++++++--------
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js
index 59d6c8c9..327bedf0 100644
--- a/js/components/clin_fields.js
+++ b/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`
       }
diff --git a/templates/components/clin_fields.html b/templates/components/clin_fields.html
index 1117b89c..a0724db5 100644
--- a/templates/components/clin_fields.html
+++ b/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)'
diff --git a/templates/components/upload_input.html b/templates/components/upload_input.html
index f1cd05f0..e9183f9c 100644
--- a/templates/components/upload_input.html
+++ b/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 }'>
diff --git a/templates/portfolios/reports/application_and_env_spending.html b/templates/portfolios/reports/application_and_env_spending.html
index 66e4338f..783b29ac 100644
--- a/templates/portfolios/reports/application_and_env_spending.html
+++ b/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>