Escapes job name used in tooltips in vue components

Use sanitize to strip src attributes
Changes sidebar back to use sanitize

4 files changed, 10 insertions, 5 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index c32dc83da8e..14518f86dc7 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -1,5 +1,6 @@
 <script>
 import $ from 'jquery';
+import _ from 'underscore';
 import JobNameComponent from './job_name_component.vue';
 import JobComponent from './job_component.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
@@ -46,7 +47,7 @@ export default {
 
   computed: {
     tooltipText() {
-      return `${this.job.name} - ${this.job.status.label}`;
+      return _.escape(`${this.job.name} - ${this.job.status.label}`);
     },
   },
 
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 4ec67f6c01b..1952dd453f4 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,4 +1,5 @@
 <script>
+import _ from 'underscore';
 import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import StageColumnComponent from './stage_column_component.vue';
 
@@ -26,7 +27,8 @@ export default {
 
   methods: {
     capitalizeStageName(name) {
-      return name.charAt(0).toUpperCase() + name.slice(1);
+      const escapedName = _.escape(name);
+      return escapedName.charAt(0).toUpperCase() + escapedName.slice(1);
     },
 
     isFirstColumn(index) {
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index 8af984ef91a..84a3d58b770 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -1,4 +1,5 @@
 <script>
+import _ from 'underscore';
 import ActionComponent from './action_component.vue';
 import JobNameComponent from './job_name_component.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
@@ -61,7 +62,7 @@ export default {
       const textBuilder = [];
 
       if (this.job.name) {
-        textBuilder.push(this.job.name);
+        textBuilder.push(_.escape(this.job.name));
       }
 
       if (this.job.name && this.status.tooltip) {
@@ -69,7 +70,7 @@ export default {
       }
 
       if (this.status.tooltip) {
-        textBuilder.push(`${this.job.status.tooltip}`);
+        textBuilder.push(this.job.status.tooltip);
       }
 
       return textBuilder.join(' ');
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index 2c728582b7c..e7b2de52f76 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -1,4 +1,5 @@
 <script>
+import _ from 'underscore';
 import JobComponent from './job_component.vue';
 import DropdownJobComponent from './dropdown_job_component.vue';
 
@@ -37,7 +38,7 @@ export default {
     },
 
     jobId(job) {
-      return `ci-badge-${job.name}`;
+      return `ci-badge-${_.escape(job.name)}`;
     },
 
     buildConnnectorClass(index) {