Escape special chars in Sentry error header

app/assets/javascripts/error_tracking/components/error_details.vue

@@ -110,16 +110,6 @@ export default {
       'errorStatus',
     ]),
     ...mapGetters('details', ['stacktrace']),
-    reported() {
-      return sprintf(
-        __('Reported %{timeAgo} by %{reportedBy}'),
-        {
-          reportedBy: `<strong class="error-details-meta-culprit">${this.error.culprit}</strong>`,
-          timeAgo: this.timeFormatted(this.stacktraceData.date_received),
-        },
-        false,
-      );
-    },
     firstReleaseLink() {
       return `${this.error.externalBaseUrl}/releases/${this.error.firstReleaseShortVersion}`;
     },
@@ -229,8 +219,19 @@ export default {
       </gl-alert>
 
       <div class="error-details-header d-flex py-2 justify-content-between">
-        <div class="error-details-meta my-auto">
-          <span v-if="!loadingStacktrace && stacktrace" v-html="reported"></span>
+        <div
+          v-if="!loadingStacktrace && stacktrace"
+          class="error-details-meta my-auto"
+          data-qa-selector="reported_text"
+        >
+          <gl-sprintf :message="__('Reported %{timeAgo} by %{reportedBy}')">
+            <template #reportedBy>
+              <strong class="error-details-meta-culprit">{{ error.culprit }}</strong>
+            </template>
+            <template #timeAgo>
+              {{ timeFormatted(stacktraceData.date_received) }}
+            </template>
+          </gl-sprintf>
         </div>
         <div class="error-details-actions">
           <div class="d-inline-flex bv-d-sm-down-none">

changelogs/unreleased/security-safe-sentry-error-culprit.yml

+---
+title: Escape special chars in Sentry error header
+merge_request:
+author:
+type: security

spec/frontend/error_tracking/components/error_details_spec.js

@@ -130,6 +130,28 @@ describe('ErrorDetails', () => {
       expect(wrapper.findAll('button').length).toBe(3);
     });
 
+    describe('unsafe chars for culprit field', () => {
+      const findReportedText = () => wrapper.find('[data-qa-selector="reported_text"]');
+      const culprit = '<script>console.log("surprise!")</script>';
+      beforeEach(() => {
+        store.state.details.loadingStacktrace = false;
+        wrapper.setData({
+          error: {
+            culprit,
+          },
+        });
+      });
+
+      it('should not convert interpolated text to html entities', () => {
+        expect(findReportedText().findAll('script').length).toEqual(0);
+        expect(findReportedText().findAll('strong').length).toEqual(1);
+      });
+
+      it('should render text instead of converting to html entities', () => {
+        expect(findReportedText().text()).toContain(culprit);
+      });
+    });
+
     describe('Badges', () => {
       it('should show language and error level badges', () => {
         wrapper.setData({