Merge branch 'fix-xss-vulnerability' into 'master'

Remove v-html

## What does this MR do?
Uses string interpolation instead of `v-html` to prevent xss attacks.

## Does this MR meet the acceptance criteria?

- [ ] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

See merge request !7616

app/assets/javascripts/environments/components/environment.js.es6

@@ -157,17 +157,17 @@
             <li v-bind:class="{ 'active': scope === undefined }">
               <a :href="projectEnvironmentsPath">
                 Available
-                <span
-                  class="badge js-available-environments-count"
-                  v-html="state.availableCounter"></span>
+                <span class="badge js-available-environments-count">
+                  {{state.availableCounter}}
+                </span>
               </a>
             </li>
             <li v-bind:class="{ 'active' : scope === 'stopped' }">
               <a :href="projectStoppedEnvironmentsPath">
                 Stopped
-                <span
-                  class="badge js-stopped-environments-count"
-                  v-html="state.stoppedCounter"></span>
+                <span class="badge js-stopped-environments-count">
+                  {{state.stoppedCounter}}
+                </span>
               </a>
             </li>
           </ul>
@@ -183,8 +183,7 @@
             <i class="fa fa-spinner spin"></i>
           </div>
 
-          <div
-            class="blank-state blank-state-no-icon"
+          <div class="blank-state blank-state-no-icon"
             v-if="!isLoading && state.environments.length === 0">
             <h2 class="blank-state-title">
               You don't have any environments right now.
@@ -205,8 +204,7 @@
             </a>
           </div>
 
-          <div
-            class="table-holder"
+          <div class="table-holder"
             v-if="!isLoading && state.environments.length > 0">
             <table class="table ci-table environments">
               <thead>

app/assets/javascripts/environments/components/environment_actions.js.es6

@@ -43,8 +43,7 @@
       <div class="inline">
         <div class="dropdown">
           <a class="dropdown-new btn btn-default" data-toggle="dropdown">
-            <span class="dropdown-play-icon-container">
-            </span>
+            <span class="dropdown-play-icon-container"></span>
             <i class="fa fa-caret-down"></i>
           </a>
 
@@ -54,9 +53,10 @@
                 data-method="post"
                 rel="nofollow"
                 class="js-manual-action-link">
-                <span class="action-play-icon-container">
+                <span class="action-play-icon-container"></span>
+                <span>
+                  {{action.name}}
                 </span>
-                <span v-html="action.name"></span>
               </a>
             </li>
           </ul>

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -389,11 +389,10 @@
     template: `
       <tr>
         <td v-bind:class="{ 'children-row': isChildren}">
-          <a
-            v-if="!isFolder"
+          <a v-if="!isFolder"
             class="environment-name"
-            :href="model.environment_path"
-            v-html="model.name">
+            :href="model.environment_path">
+            {{model.name}}
           </a>
           <span v-else v-on:click="toggleRow(model)" class="folder-name">
             <span class="folder-icon">
@@ -401,16 +400,19 @@
               <i v-show="!model.isOpen" class="fa fa-caret-right"></i>
             </span>
 
-            <span v-html="model.name"></span>
+            <span>
+              {{model.name}}
+            </span>
 
-            <span class="badge" v-html="childrenCounter"></span>
+            <span class="badge">
+              {{childrenCounter}}
+            </span>
           </span>
         </td>
 
         <td class="deployment-column">
-          <span
-            v-if="shouldRenderDeploymentID"
-            v-html="deploymentInternalId">
+          <span v-if="shouldRenderDeploymentID">
+            {{deploymentInternalId}}
           </span>
 
           <span v-if="!isFolder && deploymentHasUser">
@@ -427,8 +429,8 @@
         <td>
           <a v-if="shouldRenderBuildName"
             class="build-link"
-            :href="model.last_deployment.deployable.build_path"
-            v-html="buildName">
+            :href="model.last_deployment.deployable.build_path">
+            {{buildName}}
           </a>
         </td>
 
@@ -451,8 +453,8 @@
         <td>
           <span
             v-if="!isFolder && model.last_deployment"
-            class="environment-created-date-timeago"
-            v-html="createdDate">
+            class="environment-created-date-timeago">
+            {{createdDate}}
           </span>
         </td>
 

app/assets/javascripts/environments/components/environment_stop.js.es6

@@ -14,8 +14,7 @@
     },
 
     template: `
-      <a
-        class="btn stop-env-link"
+      <a class="btn stop-env-link"
         :href="stop_url"
         data-confirm="Are you sure you want to stop this environment?"
         data-method="post"

app/assets/javascripts/vue_common_component/commit.js.es6

@@ -138,16 +138,15 @@
 
         <a v-if="hasRef"
           class="monospace branch-name"
-          :href="ref.ref_url"
-          v-html="ref.name">
+          :href="ref.ref_url">
+          {{ref.name}}
         </a>
 
-        <div class="icon-container commit-icon commit-icon-container">
-        </div>
+        <div class="icon-container commit-icon commit-icon-container"></div>
 
         <a class="commit-id monospace"
-          :href="commit_url"
-          v-html="short_sha">
+          :href="commit_url">
+          {{short_sha}}
         </a>
 
         <p class="commit-title">
@@ -156,14 +155,15 @@
               class="avatar-image-container"
               :href="author.web_url">
               <img
-              class="avatar has-tooltip s20"
+                class="avatar has-tooltip s20"
                 :src="author.avatar_url"
                 :alt="userImageAltDescription"
                 :title="author.username" />
             </a>
 
             <a class="commit-row-message"
-              :href="commit_url" v-html="title">
+              :href="commit_url">
+              {{title}}
             </a>
           </span>
           <span v-else>

spec/javascripts/environments/environment_item_spec.js.es6

@@ -135,7 +135,7 @@ describe('Environment item', () => {
     });
 
     it('should render environment name', () => {
-      expect(component.$el.querySelector('.environment-name').textContent).toEqual(environment.name);
+      expect(component.$el.querySelector('.environment-name').textContent).toContain(environment.name);
     });
 
     describe('With deployment', () => {