Use sanitized user status message for user popover

3 files changed, 12 insertions, 7 deletions

diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
index d24fe1b547e..f9773622001 100644
--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
@@ -28,10 +28,10 @@ export default {
   },
   computed: {
     statusHtml() {
-      if (this.user.status.emoji && this.user.status.message) {
-        return `${glEmojiTag(this.user.status.emoji)} ${this.user.status.message}`;
-      } else if (this.user.status.message) {
-        return this.user.status.message;
+      if (this.user.status.emoji && this.user.status.message_html) {
+        return `${glEmojiTag(this.user.status.emoji)} ${this.user.status.message_html}`;
+      } else if (this.user.status.message_html) {
+        return this.user.status.message_html;
       }
       return '';
     },
diff --git a/changelogs/unreleased/security-55320-stored-xss-in-user-status.yml b/changelogs/unreleased/security-55320-stored-xss-in-user-status.yml
new file mode 100644
index 00000000000..8ea9ae0ccdf
--- /dev/null
+++ b/changelogs/unreleased/security-55320-stored-xss-in-user-status.yml
@@ -0,0 +1,5 @@
+---
+title: Use sanitized user status message for user popover
+merge_request:
+author:
+type: security
diff --git a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
index de3e0c149de..e8b41e8eeff 100644
--- a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
@@ -122,7 +122,7 @@ describe('User Popover Component', () => {
   describe('status data', () => {
     it('should show only message', () => {
       const testProps = Object.assign({}, DEFAULT_PROPS);
-      testProps.user.status = { message: 'Hello World' };
+      testProps.user.status = { message_html: 'Hello World' };
 
       vm = mountComponent(UserPopover, {
         ...DEFAULT_PROPS,
@@ -134,12 +134,12 @@ describe('User Popover Component', () => {
 
     it('should show message and emoji', () => {
       const testProps = Object.assign({}, DEFAULT_PROPS);
-      testProps.user.status = { emoji: 'basketball_player', message: 'Hello World' };
+      testProps.user.status = { emoji: 'basketball_player', message_html: 'Hello World' };
 
       vm = mountComponent(UserPopover, {
         ...DEFAULT_PROPS,
         target: document.querySelector('.js-user-link'),
-        status: { emoji: 'basketball_player', message: 'Hello World' },
+        status: { emoji: 'basketball_player', message_html: 'Hello World' },
       });
 
       expect(vm.$el.textContent).toContain('Hello World');