Replace update_username and mr_widget_header ocurrencesjivl-poc-dompurify

3 files changed, 8 insertions, 8 deletions

diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index ef484ddfd61..7997f63b863 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -1,5 +1,5 @@
 <script>
-import _ from 'underscore';
+import dompurify from 'dompurify';
 import axios from '~/lib/utils/axios_utils';
 import GlModal from '~/vue_shared/components/gl_modal.vue';
 import { s__, sprintf } from '~/locale';
@@ -43,10 +43,10 @@ You are going to change the username %{currentUsernameBold} to %{newUsernameBold
 Profile and projects will be redirected to the %{newUsername} namespace but this redirect will expire once the %{currentUsername} namespace is registered by another user or group.
 Please update your Git repository remotes as soon as possible.`),
         {
-          currentUsernameBold: `<strong>${_.escape(this.username)}</strong>`,
-          newUsernameBold: `<strong>${_.escape(this.newUsername)}</strong>`,
-          currentUsername: _.escape(this.username),
-          newUsername: _.escape(this.newUsername),
+          currentUsernameBold: `<strong>${dompurify.sanitize(this.username)}</strong>`,
+          newUsernameBold: `<strong>${dompurify.sanitize(this.newUsername)}</strong>`,
+          currentUsername: dompurify.sanitize(this.username),
+          newUsername: dompurify.sanitize(this.newUsername),
         },
         false,
       );
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index acfdab3a015..f334dbad05c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -1,5 +1,6 @@
 <script>
 import _ from 'underscore';
+import dompurify from 'dompurify';
 import { n__, s__, sprintf } from '~/locale';
 import { mergeUrlParams, webIDEUrl } from '~/lib/utils/url_utility';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -33,7 +34,7 @@ export default {
           'mrWidget|The source branch is %{commitsBehindLinkStart}%{commitsBehind}%{commitsBehindLinkEnd} the target branch',
         ),
         {
-          commitsBehindLinkStart: `<a href="${_.escape(this.mr.targetBranchPath)}">`,
+          commitsBehindLinkStart: `<a href="${dompurify.sanitize(this.mr.targetBranchPath)}">`,
           commitsBehind: n__('%d commit behind', '%d commits behind', this.mr.divergedCommitsCount),
           commitsBehindLinkEnd: '</a>',
         },
diff --git a/spec/javascripts/profile/account/components/update_username_spec.js b/spec/javascripts/profile/account/components/update_username_spec.js
index cc07a5f6e43..afbb9e881c3 100644
--- a/spec/javascripts/profile/account/components/update_username_spec.js
+++ b/spec/javascripts/profile/account/components/update_username_spec.js
@@ -90,12 +90,11 @@ describe('UpdateUsername component', () => {
   it('confirmation modal should escape usernames properly', done => {
     const { modalBody } = findElements();
 
-    vm.username = '<i>Italic</i>';
+    vm.username = `<script>alert('hello')</script>`;
     vm.newUsername = vm.username;
 
     Vue.nextTick()
       .then(() => {
-        expect(modalBody.innerHTML).toContain('&lt;i&gt;Italic&lt;/i&gt;');
         expect(modalBody.innerHTML).not.toContain(vm.username);
       })
       .then(done)