From affee39ad5ae924e49fa782d9bdd020abdfe05e0 Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:20:35 +0200
Subject: [PATCH 01/14] ref(csp): Render effective-directive help as JSX

The CSP effective-directive help strings embedded literal <code> tags and
escaped angle brackets, then rendered them with dangerouslySetInnerHTML.
Translators had to carry markup, and a missing slash in the worker-src
entry (<code>Worker<code>) produced nested unbalanced tags.

Use tctCode() with [code:...] groups so the markup is real JSX and the
translated strings hold only text. No visual change.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../csp/help/effectiveDirectives.tsx          | 134 +++++++++---------
 .../events/interfaces/csp/help/index.tsx      |   6 +-
 2 files changed, 68 insertions(+), 72 deletions(-)

diff --git a/static/app/components/events/interfaces/csp/help/effectiveDirectives.tsx b/static/app/components/events/interfaces/csp/help/effectiveDirectives.tsx
index 74fbfd69b32e..2e84243e90d0 100644
--- a/static/app/components/events/interfaces/csp/help/effectiveDirectives.tsx
+++ b/static/app/components/events/interfaces/csp/help/effectiveDirectives.tsx
@@ -1,106 +1,106 @@
-import {t} from 'sentry/locale';
+import {tctCode} from 'sentry/locale';
 
 export const effectiveDirectives = {
-  'base-uri': t(
-    `The <code>base-uri</code> directive defines the URIs that a user agent
+  'base-uri': tctCode(
+    `The [code:base-uri] directive defines the URIs that a user agent
   may use as the document base URL. If this value is absent, then any URI
   is allowed. If this directive is absent, the user agent will use the
-  value in the <code>&lt;base&gt;</code> element.`
+  value in the [code:<base>] element.`
   ),
-  'child-src': t(
-    `The <code>child-src</code> directive defines the valid sources for
+  'child-src': tctCode(
+    `The [code:child-src] directive defines the valid sources for
   web workers and nested browsing contexts loaded using elements such as
-  <code>&lt;frame&gt;</code> and <code>&lt;iframe&gt;</code>.`
+  [code:<frame>] and [code:<iframe>].`
   ),
-  'connect-src': t(
-    `The <code>connect-src</code> directive defines valid sources for fetch,
-  <code>XMLHttpRequest</code>, <code>WebSocket</code>, and
-  <code>EventSource</code> connections.`
+  'connect-src': tctCode(
+    `The [code:connect-src] directive defines valid sources for fetch,
+  [code:XMLHttpRequest], [code:WebSocket], and
+  [code:EventSource] connections.`
   ),
-  'font-src': t(
-    `The <code>font-src</code> directive specifies valid sources for fonts
-  loaded using <code>@font-face</code>.`
+  'font-src': tctCode(
+    `The [code:font-src] directive specifies valid sources for fonts
+  loaded using [code:@font-face].`
   ),
-  'form-action': t(
-    `The <code>form-action</code> directive specifies valid endpoints for
-  <code>&lt;form&gt;</code> submissions.`
+  'form-action': tctCode(
+    `The [code:form-action] directive specifies valid endpoints for
+  [code:<form>] submissions.`
   ),
-  'frame-ancestors': t(
-    `The <code>frame-ancestors</code> directive specifies valid parents that
-  may embed a page using the <code>&lt;frame&gt;</code> and
-  <code>&lt;iframe&gt;</code> elements.`
+  'frame-ancestors': tctCode(
+    `The [code:frame-ancestors] directive specifies valid parents that
+  may embed a page using the [code:<frame>] and
+  [code:<iframe>] elements.`
   ),
-  'img-src': t(
-    `The <code>img-src</code> directive specifies valid sources of images and
+  'img-src': tctCode(
+    `The [code:img-src] directive specifies valid sources of images and
   favicons.`
   ),
-  'prefetch-src': t(
-    `The <code>prefetch-src</code> directive restricts the URLs
+  'prefetch-src': tctCode(
+    `The [code:prefetch-src] directive restricts the URLs
       from which resources may be prefetched or prerendered.`
   ),
-  'manifest-src': t(
-    `The <code>manifest-src</code> directive specifies which manifest can be
+  'manifest-src': tctCode(
+    `The [code:manifest-src] directive specifies which manifest can be
   applied to the resource.`
   ),
-  'media-src': t(
-    `The <code>media-src</code> directive specifies valid sources for loading
-  media using the <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code>
+  'media-src': tctCode(
+    `The [code:media-src] directive specifies valid sources for loading
+  media using the [code:<audio>] and [code:<video>]
   elements.`
   ),
-  'object-src': t(
-    `The <code>object-src</code> directive specifies valid sources for the
-  <code>&lt;object&gt;</code>, <code>&lt;embed&gt;</code>, and
-  <code>&lt;applet&gt;</code> elements.`
+  'object-src': tctCode(
+    `The [code:object-src] directive specifies valid sources for the
+  [code:<object>], [code:<embed>], and
+  [code:<applet>] elements.`
   ),
-  'plugin-types': t(
-    `The <code>plugin-types</code> directive specifies the valid plugins that
+  'plugin-types': tctCode(
+    `The [code:plugin-types] directive specifies the valid plugins that
   the user agent may invoke.`
   ),
-  referrer: t(
-    `The <code>referrer</code> directive specifies information in the
-  <code>Referer</code> header for links away from a page.`
+  referrer: tctCode(
+    `The [code:referrer] directive specifies information in the
+  [code:Referer] header for links away from a page.`
   ),
-  'script-src': t(
-    `The <code>script-src</code> directive specifies valid sources
-  for JavaScript. When either the <code>script-src</code> or the
-  <code>default-src</code> directive is included, inline script and
-  <code>eval()</code> are disabled unless you specify 'unsafe-inline'
+  'script-src': tctCode(
+    `The [code:script-src] directive specifies valid sources
+  for JavaScript. When either the [code:script-src] or the
+  [code:default-src] directive is included, inline script and
+  [code:eval()] are disabled unless you specify 'unsafe-inline'
   and 'unsafe-eval', respectively.`
   ),
-  'script-src-elem': t(
-    `The <code>script-src-elem</code> directive applies to all script requests
+  'script-src-elem': tctCode(
+    `The [code:script-src-elem] directive applies to all script requests
       and element contents. It does not apply to scripts defined in attributes.`
   ),
-  'script-src-attr': t(
-    `The <code>script-src-attr</code> directive applies to event handlers and, if present,
-      it will override the <code>script-src</code> directive for relevant checks.`
+  'script-src-attr': tctCode(
+    `The [code:script-src-attr] directive applies to event handlers and, if present,
+      it will override the [code:script-src] directive for relevant checks.`
   ),
-  'style-src': t(
-    `The <code>style-src</code> directive specifies valid sources for
+  'style-src': tctCode(
+    `The [code:style-src] directive specifies valid sources for
   stylesheets. This includes both externally-loaded stylesheets and inline
-  use of the <code>&lt;style&gt;</code> element and HTML style attributes.
+  use of the [code:<style>] element and HTML style attributes.
   Stylesheets from sources that aren't included in the source list are not
-  requested or loaded. When either the <code>style-src</code> or the
-  <code>default-src</code> directive is included, inline use of the
-  <code>&lt;style&gt;</code> element and HTML style attributes are disabled
+  requested or loaded. When either the [code:style-src] or the
+  [code:default-src] directive is included, inline use of the
+  [code:<style>] element and HTML style attributes are disabled
   unless you specify 'unsafe-inline'.`
   ),
-  'style-src-elem': t(
-    `The <code>style-src-elem</code> directive applies to all styles except
+  'style-src-elem': tctCode(
+    `The [code:style-src-elem] directive applies to all styles except
       those defined in inline attributes.`
   ),
-  'style-src-attr': t(
-    `The <code>style-src-attr</code> directive applies to inline style attributes and, if present,
-      it will override the <code>style-src</code> directive for relevant checks.`
+  'style-src-attr': tctCode(
+    `The [code:style-src-attr] directive applies to inline style attributes and, if present,
+      it will override the [code:style-src] directive for relevant checks.`
   ),
-  'frame-src': t(
-    `The <code>frame-src</code> directive specifies valid sources for nested
+  'frame-src': tctCode(
+    `The [code:frame-src] directive specifies valid sources for nested
   browsing contexts loading using elements such as
-  <code>&lt;frame&gt;</code> and <code>&lt;iframe&gt;</code>.`
+  [code:<frame>] and [code:<iframe>].`
   ),
-  'worker-src': t(
-    `The <code>worker-src</code> directive specifies valid sources for
-  <code>Worker<code>, <code>SharedWorker</code>, or
-  <code>ServiceWorker</code> scripts.`
+  'worker-src': tctCode(
+    `The [code:worker-src] directive specifies valid sources for
+  [code:Worker], [code:SharedWorker], or
+  [code:ServiceWorker] scripts.`
   ),
 };
diff --git a/static/app/components/events/interfaces/csp/help/index.tsx b/static/app/components/events/interfaces/csp/help/index.tsx
index 12f301bc91a0..67f91424d526 100644
--- a/static/app/components/events/interfaces/csp/help/index.tsx
+++ b/static/app/components/events/interfaces/csp/help/index.tsx
@@ -17,10 +17,6 @@ export type HelpProps = {
 };
 
 export function CSPHelp({data: {effective_directive: key}}: HelpProps) {
-  const getHelp = () => ({
-    __html: effectiveDirectives[key],
-  });
-
   const getLinkHref = () => {
     const baseLink =
       'https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives#';
@@ -49,7 +45,7 @@ export function CSPHelp({data: {effective_directive: key}}: HelpProps) {
       <h4>
         <code>{key}</code>
       </h4>
-      <blockquote dangerouslySetInnerHTML={getHelp()} />
+      <blockquote>{effectiveDirectives[key]}</blockquote>
       <StyledP>
         <span>{'\u2014 MDN ('}</span>
         <span>{getLink()}</span>

From 217021899af5d0d3529a9f3c947c271cf937fa2f Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:20:41 +0200
Subject: [PATCH 02/14] fix(ui): Reuse the server-rendered loading indicator
 node

OrganizationLoadingIndicator read the React root's innerHTML and re-injected
it, to reuse the loader the Django view rendered and avoid a layout shift on
boot. Two problems followed from copying rather than moving it.

The non-null assertion on `document.getElementById(ROOT_ELEMENT)` throws
whenever that element is absent, which is the case in jsdom. That is why the
component had no test coverage at all.

Reading the root on every render also means a later render copies whatever is
there at that moment. An org switch resets the store back to loading, and by
then the root holds the rendered app, so the loading state rendered a frozen
copy of the previous page instead of the loader.

Capture the loader node at bootstrap and re-parent it with appendChild, which
moves the node rather than cloning it. It is the same node, so there is
nothing for React to reconcile, and re-mounting picks it back up. When no
loader is present the component now renders an empty div instead of throwing.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/app/bootstrap/renderDom.tsx            |   4 +
 static/app/utils/splashLoader.ts              |  17 ++
 .../app/views/organizationContainer.spec.tsx  | 159 ++++++++++++++++++
 static/app/views/organizationContainer.tsx    |  24 ++-
 4 files changed, 195 insertions(+), 9 deletions(-)
 create mode 100644 static/app/utils/splashLoader.ts
 create mode 100644 static/app/views/organizationContainer.spec.tsx

diff --git a/static/app/bootstrap/renderDom.tsx b/static/app/bootstrap/renderDom.tsx
index 794912575a1b..5386840fcaf6 100644
--- a/static/app/bootstrap/renderDom.tsx
+++ b/static/app/bootstrap/renderDom.tsx
@@ -1,6 +1,8 @@
 import type React from 'react';
 import {createRoot} from 'react-dom/client';
 
+import {captureSplashLoader} from 'sentry/utils/splashLoader';
+
 export function renderDom<T extends React.ComponentType<any>>(
   Component: T,
   container: string,
@@ -14,6 +16,8 @@ export function renderDom<T extends React.ComponentType<any>>(
     return;
   }
 
+  captureSplashLoader(rootEl);
+
   const root = createRoot(rootEl);
   root.render(<Component {...props} />);
 }
diff --git a/static/app/utils/splashLoader.ts b/static/app/utils/splashLoader.ts
new file mode 100644
index 000000000000..1504801665df
--- /dev/null
+++ b/static/app/utils/splashLoader.ts
@@ -0,0 +1,17 @@
+let splashLoader: Element | null = null;
+
+/**
+ * Remember the loader that the server-rendered Django view put inside the React
+ * root, before React's first commit removes it. Holding a reference keeps the
+ * detached node alive so it can be re-parented later.
+ *
+ * Note we deliberately do not detach it here — leaving the removal to React's
+ * own commit avoids a blank flash between bootstrap and first paint.
+ */
+export function captureSplashLoader(container: Element) {
+  splashLoader = container.querySelector('.splash-loader');
+}
+
+export function getSplashLoader() {
+  return splashLoader;
+}
diff --git a/static/app/views/organizationContainer.spec.tsx b/static/app/views/organizationContainer.spec.tsx
new file mode 100644
index 000000000000..ee1d2e3abb6f
--- /dev/null
+++ b/static/app/views/organizationContainer.spec.tsx
@@ -0,0 +1,159 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {act, render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {ROOT_ELEMENT} from 'sentry/constants';
+import {OrganizationStore} from 'sentry/stores/organizationStore';
+import {captureSplashLoader} from 'sentry/utils/splashLoader';
+import {OrganizationContainer} from 'sentry/views/organizationContainer';
+
+function makeReactRoot() {
+  const rootEl = document.createElement('div');
+  rootEl.id = ROOT_ELEMENT;
+  rootEl.innerHTML =
+    '<div class="splash-loader"><div data-test-id="loading-indicator">loading</div></div>';
+  document.body.appendChild(rootEl);
+  return rootEl;
+}
+
+describe('OrganizationContainer', () => {
+  let rootEl: HTMLElement | undefined;
+
+  beforeEach(() => {
+    OrganizationStore.reset();
+  });
+
+  afterEach(() => {
+    rootEl?.remove();
+    rootEl = undefined;
+    // Reset the module-level captured loader between tests
+    captureSplashLoader(document.createElement('div'));
+  });
+
+  describe('loading', () => {
+    it('re-parents the server-rendered loader', () => {
+      rootEl = makeReactRoot();
+      const indicator = rootEl.querySelector('[data-test-id="loading-indicator"]');
+      captureSplashLoader(rootEl);
+
+      render(
+        <OrganizationContainer>
+          <div>content</div>
+        </OrganizationContainer>
+      );
+
+      // The node was moved, not copied — so there is exactly one of it, and it
+      // is the very node the server rendered.
+      expect(screen.getByTestId('loading-indicator')).toBe(indicator);
+      expect(screen.queryByText('content')).not.toBeInTheDocument();
+    });
+
+    it('shows the loader again after an org switch, not a copy of the app', () => {
+      rootEl = makeReactRoot();
+      const indicator = rootEl.querySelector('[data-test-id="loading-indicator"]');
+      captureSplashLoader(rootEl);
+
+      render(
+        <OrganizationContainer>
+          <div>content</div>
+        </OrganizationContainer>
+      );
+
+      act(() => {
+        OrganizationStore.onUpdate(OrganizationFixture());
+      });
+      expect(screen.getByText('content')).toBeInTheDocument();
+
+      // Simulate React having taken over the root with real app DOM. Reading
+      // innerHTML here used to snapshot the whole previous org's UI.
+      rootEl.innerHTML = '<main>previous org ui</main>';
+
+      // An org switch resets the store back to loading
+      act(() => {
+        OrganizationStore.reset();
+      });
+
+      // Drop the stand-in root, so anything left in the document mentioning the
+      // previous org can only be a copy the component made.
+      rootEl.remove();
+
+      expect(screen.queryByText('previous org ui')).not.toBeInTheDocument();
+      expect(screen.getByTestId('loading-indicator')).toBe(indicator);
+    });
+
+    it('renders without throwing when no loader was captured', () => {
+      expect(() =>
+        render(
+          <OrganizationContainer>
+            <div>content</div>
+          </OrganizationContainer>
+        )
+      ).not.toThrow();
+
+      expect(screen.queryByText('content')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('loaded', () => {
+    it('renders children once the organization resolves', () => {
+      render(
+        <OrganizationContainer>
+          <div>content</div>
+        </OrganizationContainer>
+      );
+
+      act(() => {
+        OrganizationStore.onUpdate(OrganizationFixture());
+      });
+
+      expect(screen.getByText('content')).toBeInTheDocument();
+    });
+  });
+
+  describe('errors', () => {
+    it('renders children without an organization for ORG_NO_ACCESS', () => {
+      render(
+        <OrganizationContainer>
+          <div>content</div>
+        </OrganizationContainer>
+      );
+
+      act(() => {
+        // 401 is what the store maps to ORG_NO_ACCESS
+        OrganizationStore.onFetchOrgError({status: 401} as any);
+      });
+
+      expect(screen.getByText('content')).toBeInTheDocument();
+    });
+
+    it('renders a not-found alert for ORG_NOT_FOUND', () => {
+      render(
+        <OrganizationContainer>
+          <div>content</div>
+        </OrganizationContainer>
+      );
+
+      act(() => {
+        OrganizationStore.onFetchOrgError({status: 404} as any);
+      });
+
+      expect(screen.getByTestId('org-loading-error')).toBeInTheDocument();
+      expect(screen.queryByText('content')).not.toBeInTheDocument();
+    });
+
+    it('renders a generic loading error for other failures', () => {
+      render(
+        <OrganizationContainer>
+          <div>content</div>
+        </OrganizationContainer>
+      );
+
+      act(() => {
+        OrganizationStore.onFetchOrgError({status: 500} as any);
+      });
+
+      expect(screen.getByText('There was an error loading data.')).toBeInTheDocument();
+      expect(screen.queryByText('content')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/static/app/views/organizationContainer.tsx b/static/app/views/organizationContainer.tsx
index 328d7d66a596..6c9b87198fbe 100644
--- a/static/app/views/organizationContainer.tsx
+++ b/static/app/views/organizationContainer.tsx
@@ -1,3 +1,4 @@
+import {useCallback} from 'react';
 import {Outlet} from 'react-router-dom';
 import {useProfiler} from '@sentry/react';
 
@@ -5,10 +6,11 @@ import {Alert} from '@sentry/scraps/alert';
 import {Container} from '@sentry/scraps/layout';
 
 import {LoadingError} from 'sentry/components/loadingError';
-import {ORGANIZATION_FETCH_ERROR_TYPES, ROOT_ELEMENT} from 'sentry/constants';
+import {ORGANIZATION_FETCH_ERROR_TYPES} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import {OrganizationStore} from 'sentry/stores/organizationStore';
 import {useLegacyStore} from 'sentry/stores/useLegacyStore';
+import {getSplashLoader} from 'sentry/utils/splashLoader';
 
 function OrganizationLoadingIndicator() {
   /* Track how long this component is rendered for. */
@@ -18,19 +20,23 @@ function OrganizationLoadingIndicator() {
 
   /**
    * This is the initial loader React will render as the app bootstraps.
-   * Rather than rendering a loader component, we can reuse the existing DOM
+   * Rather than rendering a loader component, we re-parent the existing DOM
    * provided by the server-rendered Django view!
    *
    * This ensures there are no layout shifts as the app initially boots up
-   * because the DOM is exactly the same and React doesn't have to reconcile
-   * the fallback state.
+   * because it is literally the same node, so React has nothing to reconcile.
+   *
+   * `appendChild` moves the node rather than copying it, so re-mounting (an org
+   * switch resets the store back to loading) picks the same loader back up.
    */
-  const root = document.getElementById(ROOT_ELEMENT);
-  // There is no scenario in which this component is rendering,
-  // but the root element where the app is mounted doesn't exist
-  const ssrLoader = root!.innerHTML;
+  const loaderRef = useCallback((node: HTMLDivElement | null) => {
+    const loader = getSplashLoader();
+    if (node && loader) {
+      node.appendChild(loader);
+    }
+  }, []);
 
-  return <div dangerouslySetInnerHTML={{__html: ssrLoader}} />;
+  return <div ref={loaderRef} />;
 }
 
 interface Props {

From 21a496227c786d7c3d6f7bd144e245589d22fa51 Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:21:02 +0200
Subject: [PATCH 03/14] ref(dashboards): Build the tooltip series marker as JSX

The categorical series tooltip took ECharts' `param.marker`, an HTML string
holding a styled empty span, ran it through DOMPurify and injected it with
dangerouslySetInnerHTML. The tooltip is already rendered as React, so the
marker can just be a styled component driven by `param.color`.

Same markup as ECharts generates: inline-block, 10px circle, 4px right
margin, series colour.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../categoricalSeriesWidgetVisualization.tsx  | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/static/app/views/dashboards/widgets/categoricalSeriesWidget/categoricalSeriesWidgetVisualization.tsx b/static/app/views/dashboards/widgets/categoricalSeriesWidget/categoricalSeriesWidgetVisualization.tsx
index a5fe7e45311d..ba7c8e9e3415 100644
--- a/static/app/views/dashboards/widgets/categoricalSeriesWidget/categoricalSeriesWidgetVisualization.tsx
+++ b/static/app/views/dashboards/widgets/categoricalSeriesWidget/categoricalSeriesWidgetVisualization.tsx
@@ -1,7 +1,7 @@
 import {Fragment, useCallback, useMemo, useRef} from 'react';
 import {useTheme} from '@emotion/react';
+import styled from '@emotion/styled';
 import {mergeRefs} from '@react-aria/utils';
-import dompurify from 'dompurify';
 import type {SeriesOption, YAXisComponentOption} from 'echarts';
 import type {
   TooltipFormatterCallback,
@@ -279,13 +279,14 @@ export function CategoricalSeriesWidgetVisualization(
               }
             }
 
-            // param.marker is an HTML string with a colored circle, sanitize it
-            const marker = typeof param.marker === 'string' ? param.marker : '';
-
             return (
               <div key={param.seriesIndex}>
                 <span className="tooltip-label">
-                  <span dangerouslySetInnerHTML={{__html: dompurify.sanitize(marker)}} />{' '}
+                  <SeriesMarker
+                    markerColor={
+                      typeof param.color === 'string' ? param.color : 'transparent'
+                    }
+                  />{' '}
                   <strong>{displayName}</strong>
                 </span>{' '}
                 {formattedValue}
@@ -405,3 +406,16 @@ export function CategoricalSeriesWidgetVisualization(
 
 CategoricalSeriesWidgetVisualization.LoadingPlaceholder = WidgetLoadingPanel;
 CategoricalSeriesWidgetVisualization.NoData = WidgetNoDataPanel;
+
+/**
+ * Mirrors the marker ECharts generates for tooltips, which we would otherwise
+ * receive as an HTML string in `param.marker`.
+ */
+const SeriesMarker = styled('span')<{markerColor: string}>`
+  display: inline-block;
+  margin-right: 4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  background-color: ${p => p.markerColor};
+`;

From fd03c36036bc5519abc1458822adbdf3dea82a82 Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:21:15 +0200
Subject: [PATCH 04/14] ref(settings): Build the printable recovery codes with
 DOM nodes

printCodes streamed the codes into the hidden print iframe with
document.write, which needed a matching document.close() and produced a
body with no structure.

Append text nodes and <br> elements instead. Same rendered output, and
the document.close() call is no longer necessary.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../accountSecurity/components/recoveryCodes.tsx     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/static/app/views/settings/account/accountSecurity/components/recoveryCodes.tsx b/static/app/views/settings/account/accountSecurity/components/recoveryCodes.tsx
index 81b4158bc219..cd972774736d 100644
--- a/static/app/views/settings/account/accountSecurity/components/recoveryCodes.tsx
+++ b/static/app/views/settings/account/accountSecurity/components/recoveryCodes.tsx
@@ -31,9 +31,17 @@ export function RecoveryCodes({
     // @ts-expect-error TS(7015): Element implicitly has an 'any' type because index... Remove this comment to see the full error message
     // eslint-disable-next-line @typescript-eslint/dot-notation
     const iframe = window.frames['printable'];
-    iframe.document.write(codes.join('<br>'));
+    const doc = iframe.document;
+
+    doc.body.replaceChildren();
+    codes.forEach((code, i) => {
+      if (i > 0) {
+        doc.body.appendChild(doc.createElement('br'));
+      }
+      doc.body.appendChild(doc.createTextNode(code));
+    });
+
     iframe.print();
-    iframe.document.close();
   };
 
   if (!isEnrolled || !codes) {

From b4e0dcb3a3fc6bf68ae93907e88370e589aaa3cc Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:21:16 +0200
Subject: [PATCH 05/14] ref(demo): Attach the analytics queue shim as a text
 node

Writing to a script element's textContent is a Trusted Types injection
sink, so it is rejected on pages that set
`require-trusted-types-for 'script'`. Appending a text node is not, and
is otherwise equivalent.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/app/utils/demoMode/utils.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/static/app/utils/demoMode/utils.tsx b/static/app/utils/demoMode/utils.tsx
index 8d87706671f6..ae0a77774fba 100644
--- a/static/app/utils/demoMode/utils.tsx
+++ b/static/app/utils/demoMode/utils.tsx
@@ -76,8 +76,11 @@ function initDemoAnalytics() {
 
     const queueScript = document.createElement('script');
     queueScript.id = 'plausible-queue-script';
-    queueScript.textContent =
-      'window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }';
+    queueScript.appendChild(
+      document.createTextNode(
+        'window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }'
+      )
+    );
 
     document.head.appendChild(mainScript);
     document.head.appendChild(queueScript);

From 05a3a37430d19bf51e0d21989ca2f6d7a6b51bab Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:21:17 +0200
Subject: [PATCH 06/14] ref(replay): Create placeholder comments as nodes

removeChildLevel replaced pruned subtrees by assigning comment markup to
innerHTML, which parses a string to build a single comment node.
createComment does it directly.

Assigning to innerHTML is also a Trusted Types injection sink, so this
path is rejected on pages that set `require-trusted-types-for 'script'`.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/app/utils/replays/extractDomNodes.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/static/app/utils/replays/extractDomNodes.tsx b/static/app/utils/replays/extractDomNodes.tsx
index 700a2603d170..5b95e4e9ea55 100644
--- a/static/app/utils/replays/extractDomNodes.tsx
+++ b/static/app/utils/replays/extractDomNodes.tsx
@@ -94,11 +94,13 @@ function removeChildLevel(max: number, collection: HTMLCollection, current = 0)
       child.textContent = '/* Inline CSS */';
     }
     if (child.nodeName === 'svg') {
-      child.innerHTML = '<!-- SVG -->';
+      child.replaceChildren(document.createComment(' SVG '));
     }
     if (max <= current) {
       if (child.childElementCount > 0) {
-        child.innerHTML = `<!-- ${child.childElementCount} descendents -->`;
+        child.replaceChildren(
+          document.createComment(` ${child.childElementCount} descendents `)
+        );
       }
     } else {
       removeChildLevel(max, child.children, current + 1);

From 92a9c67b90bc0682dc8654354486a4b52e6d9777 Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:21:18 +0200
Subject: [PATCH 07/14] ref(marked): Drop `id` from the sanitizer attribute
 allowlist
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nothing in the markdown pipeline emits `id` — marked has not added header
ids by default since v12, and no renderer here sets one. It only survived
on raw inline HTML in user-authored markdown.

An attacker-chosen `id` is the DOM clobbering primitive: it shadows
`window.x` and `document.x` for scripts that read globals without
guarding. No gadget was found in the app, so this is hardening rather
than a fix, but the attribute buys nothing.

`align` is kept — markdown table syntax does generate it.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/app/utils/marked/marked.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/utils/marked/marked.tsx b/static/app/utils/marked/marked.tsx
index a0240514cf6c..d38feb7641de 100644
--- a/static/app/utils/marked/marked.tsx
+++ b/static/app/utils/marked/marked.tsx
@@ -95,7 +95,7 @@ const ALLOWED_TAGS = [
   'sup',
 ];
 
-const ALLOWED_ATTR = ['href', 'title', 'alt', 'class', 'id', 'align'];
+const ALLOWED_ATTR = ['href', 'title', 'alt', 'class', 'align'];
 
 export function sanitizeHtml(html: string) {
   return dompurify.sanitize(html, {

From e6790d19f112f1129072d5622e3d0a50195e20d9 Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:21:20 +0200
Subject: [PATCH 08/14] ref(debug): Render the email preview in a sandboxed
 iframe

html_content is a whole HTML document. Splicing it into a div discarded
everything outside <body>, including the viewport meta the email's own
media query depends on, while the one <style> the inliner leaves behind
applied to the debug page itself and pulled in a webfont.

The reverse leaked too: the email uses generic class names like .btn and
.container, which Sentry's own stylesheets also define, so app CSS filled
in wherever the email had not set an inline style. The preview was showing
something no mail client would render.

Render it in an iframe instead, sanitized with WHOLE_DOCUMENT so the shell
survives. The frame is sandboxed without allow-scripts, so the document is
inert; allow-same-origin is only there to read scrollHeight for sizing.

Also corrects html_content's type. It was declared TrustedHTML, but the
endpoint serializes a plain string.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../notifications/previews/emailPreview.tsx   | 59 ++++++++++++++++++-
 static/app/debug/notifications/types.ts       |  2 +-
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/static/app/debug/notifications/previews/emailPreview.tsx b/static/app/debug/notifications/previews/emailPreview.tsx
index bdb6c1109c8b..610af458687e 100644
--- a/static/app/debug/notifications/previews/emailPreview.tsx
+++ b/static/app/debug/notifications/previews/emailPreview.tsx
@@ -1,4 +1,6 @@
+import {useCallback, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
+import dompurify from 'dompurify';
 
 import {Container, Stack} from '@sentry/scraps/layout';
 import {SegmentedControl} from '@sentry/scraps/segmentedControl';
@@ -47,9 +49,7 @@ export function EmailPreview({
         <Stack padding="xl">
           <Text bold>{subject}</Text>
           <Text variant="muted">To: user@example.com</Text>
-          {emailFormat === EmailFormat.HTML && (
-            <div dangerouslySetInnerHTML={{__html: html_content}} />
-          )}
+          {emailFormat === EmailFormat.HTML && <EmailHtmlPreview html={html_content} />}
           {emailFormat === EmailFormat.TXT && (
             <EmailTextBlock>
               <pre>{text_content}</pre>
@@ -61,6 +61,59 @@ export function EmailPreview({
   );
 }
 
+/**
+ * Emails are whole documents, so render one in an iframe rather than splicing
+ * it into this page. Injecting it inline drops everything outside `<body>` and
+ * lets the email's `<style>` and Sentry's own CSS bleed into each other, which
+ * makes the preview unfaithful.
+ *
+ * `sandbox` without `allow-scripts` keeps the document inert; `allow-same-origin`
+ * is only there so we can read `scrollHeight` to size the frame.
+ */
+function EmailHtmlPreview({html}: {html: string}) {
+  const [height, setHeight] = useState(320);
+
+  const sanitized = useMemo(
+    () =>
+      dompurify.sanitize(html, {
+        WHOLE_DOCUMENT: true,
+        ADD_TAGS: ['meta'],
+        ADD_ATTR: ['name', 'content', 'charset'],
+      }),
+    [html]
+  );
+
+  const frameRef = useCallback(
+    (node: HTMLIFrameElement | null) => {
+      if (!node) {
+        return;
+      }
+      node.srcdoc = sanitized;
+      node.onload = () => {
+        const doc = node.contentDocument;
+        if (doc) {
+          setHeight(doc.documentElement.scrollHeight);
+        }
+      };
+    },
+    [sanitized]
+  );
+
+  return (
+    <EmailFrame
+      ref={frameRef}
+      sandbox="allow-same-origin"
+      title="Email preview"
+      style={{height}}
+    />
+  );
+}
+
+const EmailFrame = styled('iframe')`
+  width: 100%;
+  border: 0;
+`;
+
 const EmailTextBlock = styled('code')`
   margin: ${p => p.theme.space.md} 0;
   padding: 0;
diff --git a/static/app/debug/notifications/types.ts b/static/app/debug/notifications/types.ts
index 59daaa3f1375..1df7ed35e9f7 100644
--- a/static/app/debug/notifications/types.ts
+++ b/static/app/debug/notifications/types.ts
@@ -21,7 +21,7 @@ export interface NotificationTemplateRegistration {
   };
   previews: {
     [NotificationProviderKey.EMAIL]: {
-      html_content: TrustedHTML;
+      html_content: string;
       subject: string;
       text_content: string;
     };

From 005e30d7783b75240b505a93b871b844bd5e1167 Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:21:36 +0200
Subject: [PATCH 09/14] fix(billing): Sanitize the partner support note

The partner support note is server-supplied HTML rendered straight through
dangerouslySetInnerHTML with no sanitizer. Today every value is a hardcoded
literal in the partnership config, so nothing untrusted reaches it, but the
config documents the field as "plain HTML" and nothing enforces that.

Run it through DOMPurify. `target` is added to the allowlist because the note
links out to the partner's own support site and the default allowlist drops
it; without that the link would silently stop opening in a new tab.

Also corrects the comment above it, which claimed markdown cannot add
attributes to links. That is only true of the HTML-string pipeline in
utils/marked; the React <Markdown> renderer routes external links through
ExternalLink, which sets target and rel.

Adds a spec, which this component did not have.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../subscriptionPage/partnershipNote.spec.tsx | 62 +++++++++++++++++++
 .../subscriptionPage/partnershipNote.tsx      | 15 ++++-
 2 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 static/gsApp/views/subscriptionPage/partnershipNote.spec.tsx

diff --git a/static/gsApp/views/subscriptionPage/partnershipNote.spec.tsx b/static/gsApp/views/subscriptionPage/partnershipNote.spec.tsx
new file mode 100644
index 000000000000..bb112af843b7
--- /dev/null
+++ b/static/gsApp/views/subscriptionPage/partnershipNote.spec.tsx
@@ -0,0 +1,62 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {SubscriptionFixture} from 'getsentry-test/fixtures/subscription';
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import {PartnershipNote} from 'getsentry/views/subscriptionPage/partnershipNote';
+
+// The real note, verbatim from getsentry nintendo_configs.py
+const NINTENDO_NOTE =
+  'Contact <a href="https://developer.nintendo.com/group/development/g1kr9vj6/tech-info/crash-analysis-service-support" target="_blank" rel="noreferrer">Nintendo Developer Portal</a> support to make changes to your subscription.';
+
+function subscriptionWithNote(supportNote: string) {
+  const organization = OrganizationFixture();
+  const subscription = SubscriptionFixture({organization});
+  subscription.partner = {
+    externalId: 'x',
+    isActive: true,
+    name: '',
+    partnership: {displayName: 'Nintendo', id: 'NT', supportNote},
+  };
+  return subscription;
+}
+
+describe('PartnershipNote', () => {
+  it('preserves the partner link, including target and rel', () => {
+    render(<PartnershipNote subscription={subscriptionWithNote(NINTENDO_NOTE)} />);
+
+    const link = screen.getByRole('link', {
+      name: 'Nintendo Developer Portal',
+    });
+    expect(link).toHaveAttribute(
+      'href',
+      expect.stringContaining('developer.nintendo.com')
+    );
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noreferrer');
+    expect(screen.getByText(/support to make changes/)).toBeInTheDocument();
+  });
+
+  it('strips script tags and event handlers', () => {
+    render(
+      <PartnershipNote
+        subscription={subscriptionWithNote(
+          'Hi<script>window.pwned=1</script><img src=x onerror="window.pwned=1">there'
+        )}
+      />
+    );
+
+    const note = screen.getByTestId('partnership-note');
+    expect(note.querySelector('script')).toBeNull();
+    expect(note.querySelector('[onerror]')).toBeNull();
+    expect(note).toHaveTextContent('Hithere');
+  });
+
+  it('falls back to the default message with no partner', () => {
+    const organization = OrganizationFixture();
+    const subscription = SubscriptionFixture({organization});
+    render(<PartnershipNote subscription={subscription} />);
+
+    expect(screen.getByText(/Contact us at/)).toBeInTheDocument();
+  });
+});
diff --git a/static/gsApp/views/subscriptionPage/partnershipNote.tsx b/static/gsApp/views/subscriptionPage/partnershipNote.tsx
index 2b26e8442285..e38a1d5a7514 100644
--- a/static/gsApp/views/subscriptionPage/partnershipNote.tsx
+++ b/static/gsApp/views/subscriptionPage/partnershipNote.tsx
@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 import {Panel} from 'sentry/components/panels/panel';
 import {PanelBody} from 'sentry/components/panels/panelBody';
 import {tct} from 'sentry/locale';
@@ -19,12 +21,19 @@ export function PartnershipNote({subscription}: Props) {
     <Panel data-test-id="partnership-note">
       <PanelBody withPadding>
         {subscription.partner ? (
-          // usually we pass it through sentry.utils.marked but
-          // markdown doesn't support adding attributes to links
+          // Kept as HTML because the note is authored with a target/rel link.
+          // Note the `<Markdown>` renderer *does* set those (external links go
+          // through ExternalLink) — it is the HTML-string pipeline in
+          // utils/marked that strips them.
           <TextBlock
             noMargin
             dangerouslySetInnerHTML={{
-              __html: subscription.partner?.partnership.supportNote || '',
+              __html: DOMPurify.sanitize(
+                subscription.partner?.partnership.supportNote || '',
+                // `target` is not in DOMPurify's default allowlist, and the note
+                // links out to the partner's own support site.
+                {ADD_ATTR: ['target']}
+              ),
             }}
           />
         ) : (

From f9157842daafc6a08f945c5310480f1c48cf25c8 Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:21:37 +0200
Subject: [PATCH 10/14] feat(security): Add a report-only header for Trusted
 Types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Trusted Types is delivered on its own Content-Security-Policy-Report-Only
header rather than through the CSP_* settings. Browsers evaluate each
delivered policy independently, so this collects violations without
touching the CSP we enforce — the alternative, flipping the real CSP to
report-only for the rollout window, would drop XSS protection in
production.

Default off, and no policy is emitted unless TRUSTED_TYPES_ENABLED is set,
so this change is inert until someone opts in.

Requires CSP_REPORT_ONLY = False. This middleware runs before
CSPMiddleware on the response path and django-csp bails when its header
name is taken, so claiming that name while the CSP is itself report-only
would drop the whole CSP. The middleware stands down instead, and logs
once so that enabling the setting and seeing nothing is diagnosable.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/sentry/conf/server.py                |  22 +++++
 src/sentry/middleware/security.py        |  43 ++++++++++
 tests/sentry/middleware/test_security.py | 102 ++++++++++++++++++++++-
 3 files changed, 166 insertions(+), 1 deletion(-)

diff --git a/src/sentry/conf/server.py b/src/sentry/conf/server.py
index 7e75bb506ba7..2d8e999a61c2 100644
--- a/src/sentry/conf/server.py
+++ b/src/sentry/conf/server.py
@@ -597,6 +597,28 @@ def env(
 COOP_REPORT_ONLY = True
 COOP_REPORT_TO: str | None = None
 
+# Trusted Types (https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API)
+# is delivered on its own Content-Security-Policy-Report-Only header, separate
+# from the CSP_* settings, so that turning it on cannot alter the CSP we enforce.
+#
+# Requires CSP_REPORT_ONLY = False. When the CSP itself is report-only, django-csp
+# owns the report-only header name and this middleware cannot claim it; see
+# SecurityHeadersMiddleware.add_trusted_types_header.
+TRUSTED_TYPES_ENABLED = False
+
+# Policy names the browser will accept `createPolicy()` calls for. Anything not
+# listed here fails to register, so keep it in sync with the policies the
+# frontend actually installs.
+TRUSTED_TYPES_POLICIES = [
+    "dompurify",
+    "sentry-script-url",
+    "sentry-bundler",
+]
+
+# Where violation reports are sent. With no report URI the browser still reports
+# to the devtools console, which is enough for local work.
+TRUSTED_TYPES_REPORT_URI: str | None = None
+
 STATIC_ROOT = os.path.realpath(os.path.join(PROJECT_ROOT, "static"))
 STATIC_URL = "/_static/{version}/"
 # webpack assets live at a different URL that is unversioned
diff --git a/src/sentry/middleware/security.py b/src/sentry/middleware/security.py
index 6cae8809faeb..a528630f772a 100644
--- a/src/sentry/middleware/security.py
+++ b/src/sentry/middleware/security.py
@@ -1,3 +1,5 @@
+import logging
+
 from django.conf import settings
 from django.utils.deprecation import MiddlewareMixin
 from rest_framework.request import Request
@@ -5,6 +7,12 @@
 
 from sentry.utils import json
 
+logger = logging.getLogger(__name__)
+
+TRUSTED_TYPES_HEADER = "Content-Security-Policy-Report-Only"
+
+_warned_about_report_only_csp = False
+
 
 class SecurityHeadersMiddleware(MiddlewareMixin):
     """
@@ -17,6 +25,8 @@ def process_response(self, request: Request, response: Response) -> Response:
         response.setdefault("X-Content-Type-Options", "nosniff")
         response.setdefault("X-XSS-Protection", "1; mode=block")
 
+        self.add_trusted_types_header(response)
+
         # Add COOP and Report-To headers if COOP_ENABLED
         if getattr(settings, "COOP_ENABLED", False):
             coop_report_to = getattr(settings, "COOP_REPORT_TO", None)
@@ -41,3 +51,36 @@ def process_response(self, request: Request, response: Response) -> Response:
                 )
 
         return response
+
+    def add_trusted_types_header(self, response: Response) -> None:
+        if not getattr(settings, "TRUSTED_TYPES_ENABLED", False):
+            return
+
+        # This middleware runs before CSPMiddleware on the response path, and
+        # django-csp bails when its header name is already set. So when the CSP is
+        # itself report-only we would be dropping the entire CSP to deliver
+        # Trusted Types, which is never worth it.
+        if getattr(settings, "CSP_REPORT_ONLY", False):
+            global _warned_about_report_only_csp
+            if not _warned_about_report_only_csp:
+                _warned_about_report_only_csp = True
+                logger.warning(
+                    "trusted_types.disabled_by_report_only_csp",
+                    extra={"header": TRUSTED_TYPES_HEADER},
+                )
+            return
+
+        if TRUSTED_TYPES_HEADER in response:
+            return
+
+        directives = ["require-trusted-types-for 'script'"]
+
+        policies = getattr(settings, "TRUSTED_TYPES_POLICIES", None) or []
+        if policies:
+            directives.append("trusted-types " + " ".join(policies))
+
+        report_uri = getattr(settings, "TRUSTED_TYPES_REPORT_URI", None)
+        if report_uri:
+            directives.append(f"report-uri {report_uri}")
+
+        response[TRUSTED_TYPES_HEADER] = "; ".join(directives)
diff --git a/tests/sentry/middleware/test_security.py b/tests/sentry/middleware/test_security.py
index b953712e7298..7007d3f9a0d5 100644
--- a/tests/sentry/middleware/test_security.py
+++ b/tests/sentry/middleware/test_security.py
@@ -1,7 +1,7 @@
 from __future__ import annotations
 
 from functools import cached_property
-from unittest import TestCase
+from unittest import TestCase, mock
 
 from django.test import RequestFactory, override_settings
 from rest_framework.response import Response
@@ -104,3 +104,103 @@ def test_coop_headers_set_when_enabled_report_only_false_with_report_to(self) ->
         assert report_to["max_age"] == 86400
         assert len(report_to["endpoints"]) == 1
         assert report_to["endpoints"][0]["url"] == "https://example.com/callback/"
+
+    def test_trusted_types_header_not_set_when_disabled(self) -> None:
+        """TRUSTED_TYPES_ENABLED defaults to False, so no extra policy is emitted."""
+        request = self.factory.get("/")
+        response = Response()
+        processed_response = self.middleware.process_response(request, response)
+
+        assert "Content-Security-Policy-Report-Only" not in processed_response
+
+    @override_settings(TRUSTED_TYPES_ENABLED=True, CSP_REPORT_ONLY=False)
+    def test_trusted_types_header_set_when_enabled(self) -> None:
+        request = self.factory.get("/")
+        response = Response()
+        processed_response = self.middleware.process_response(request, response)
+
+        assert processed_response["Content-Security-Policy-Report-Only"] == (
+            "require-trusted-types-for 'script'; trusted-types dompurify sentry-script-url sentry-bundler"
+        )
+
+    @override_settings(TRUSTED_TYPES_ENABLED=True, CSP_REPORT_ONLY=False)
+    def test_trusted_types_header_does_not_touch_enforced_csp(self) -> None:
+        """The enforced Content-Security-Policy must be left completely alone."""
+        request = self.factory.get("/")
+        response = Response()
+        response["Content-Security-Policy"] = "default-src 'none'; script-src 'self'"
+        processed_response = self.middleware.process_response(request, response)
+
+        assert (
+            processed_response["Content-Security-Policy"] == "default-src 'none'; script-src 'self'"
+        )
+        assert (
+            "require-trusted-types-for" in processed_response["Content-Security-Policy-Report-Only"]
+        )
+
+    @override_settings(TRUSTED_TYPES_ENABLED=True, CSP_REPORT_ONLY=True)
+    def test_trusted_types_header_skipped_when_django_csp_owns_report_only(self) -> None:
+        """
+        django-csp emits the -Report-Only header itself when CSP_REPORT_ONLY is on, and
+        bails if that header already exists. Claiming the name here would silently drop
+        the entire CSP, so the middleware must stand down.
+        """
+        request = self.factory.get("/")
+        response = Response()
+        processed_response = self.middleware.process_response(request, response)
+
+        assert "Content-Security-Policy-Report-Only" not in processed_response
+
+    @override_settings(TRUSTED_TYPES_ENABLED=True, CSP_REPORT_ONLY=True)
+    def test_trusted_types_warns_once_when_skipped(self) -> None:
+        """
+        Standing down is correct but invisible, so someone who enables the setting and
+        sees nothing gets a log line pointing at why. Once per process, not per request.
+        """
+        from sentry.middleware import security
+
+        security._warned_about_report_only_csp = False
+
+        request = self.factory.get("/")
+        with mock.patch.object(security.logger, "warning") as mock_warning:
+            self.middleware.process_response(request, Response())
+            self.middleware.process_response(request, Response())
+
+        assert mock_warning.call_count == 1
+        assert mock_warning.call_args[0][0] == "trusted_types.disabled_by_report_only_csp"
+
+    @override_settings(TRUSTED_TYPES_ENABLED=True, CSP_REPORT_ONLY=False)
+    def test_trusted_types_header_does_not_overwrite_existing(self) -> None:
+        request = self.factory.get("/")
+        response = Response()
+        response["Content-Security-Policy-Report-Only"] = "default-src 'none'"
+        processed_response = self.middleware.process_response(request, response)
+
+        assert processed_response["Content-Security-Policy-Report-Only"] == "default-src 'none'"
+
+    @override_settings(
+        TRUSTED_TYPES_ENABLED=True,
+        CSP_REPORT_ONLY=False,
+        TRUSTED_TYPES_REPORT_URI="https://example.com/security/?sentry_key=abc",
+    )
+    def test_trusted_types_header_includes_report_uri(self) -> None:
+        request = self.factory.get("/")
+        response = Response()
+        processed_response = self.middleware.process_response(request, response)
+
+        assert processed_response["Content-Security-Policy-Report-Only"] == (
+            "require-trusted-types-for 'script'; "
+            "trusted-types dompurify sentry-script-url sentry-bundler; "
+            "report-uri https://example.com/security/?sentry_key=abc"
+        )
+
+    @override_settings(TRUSTED_TYPES_ENABLED=True, CSP_REPORT_ONLY=False, TRUSTED_TYPES_POLICIES=[])
+    def test_trusted_types_header_omits_empty_policy_allowlist(self) -> None:
+        request = self.factory.get("/")
+        response = Response()
+        processed_response = self.middleware.process_response(request, response)
+
+        assert (
+            processed_response["Content-Security-Policy-Report-Only"]
+            == "require-trusted-types-for 'script'"
+        )

From 83dca623d568503de2fa5437051023870f1ecc83 Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:22:06 +0200
Subject: [PATCH 11/14] feat(ui): Install named Trusted Types policies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every trusted value in the app now comes from exactly one named policy, and
each policy sanitizes or validates rather than passing its input through:

- `dompurify` — created by DOMPurify when sanitizing with
  RETURN_TRUSTED_TYPE. Covers markdown and the bulk of untrusted HTML.
  Warmed at boot so a missing allowlist entry fails on startup rather than
  mid-render.
- `sentry-script-url` — validates same-origin and throws otherwise. Covers
  serviceWorker.register().
- `sentry-bundler` — Rspack's own policy for chunk loading, with
  onPolicyCreationFailure: 'continue' so an unallowlisted deploy degrades
  instead of white-screening.

Requires the report-only header from the previous commit to have any effect.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 rspack.config.ts                              |  1 +
 static/app/bootstrap/commonInitialization.tsx |  2 +
 .../client/serviceWorkerContext.tsx           |  7 +-
 static/app/utils/marked/marked.tsx            |  3 +-
 static/app/utils/trustedTypes.ts              | 69 +++++++++++++++++++
 5 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 static/app/utils/trustedTypes.ts

diff --git a/rspack.config.ts b/rspack.config.ts
index 25dfb6d571e2..c52c25ef6847 100644
--- a/rspack.config.ts
+++ b/rspack.config.ts
@@ -540,6 +540,7 @@ const appConfig: Configuration = {
   },
   output: {
     crossOriginLoading: 'anonymous',
+    trustedTypes: {policyName: 'sentry-bundler', onPolicyCreationFailure: 'continue'},
     // Clean the output dir before emit, but keep the service-worker assets
     // emitted by the separate `workerConfig` compiler below. Both compilers
     // write to this same `dist` path and run in parallel, so without `keep`
diff --git a/static/app/bootstrap/commonInitialization.tsx b/static/app/bootstrap/commonInitialization.tsx
index 96c5154a4c20..4d4ed6e31697 100644
--- a/static/app/bootstrap/commonInitialization.tsx
+++ b/static/app/bootstrap/commonInitialization.tsx
@@ -3,6 +3,7 @@ import {MotionGlobalConfig} from 'framer-motion';
 import {IS_ACCEPTANCE_TEST, NODE_ENV} from 'sentry/constants';
 import {ConfigStore} from 'sentry/stores/configStore';
 import type {Config} from 'sentry/types/system';
+import {installTrustedTypesPolicies} from 'sentry/utils/trustedTypes';
 
 if (IS_ACCEPTANCE_TEST || NODE_ENV === 'test') {
   MotionGlobalConfig.skipAnimations = true;
@@ -13,5 +14,6 @@ export function commonInitialization(config: Config) {
     import(/* webpackMode: "eager" */ 'sentry/utils/silenceReactUnsafeWarnings');
   }
 
+  installTrustedTypesPolicies();
   ConfigStore.loadInitialData(config);
 }
diff --git a/static/app/serviceWorker/client/serviceWorkerContext.tsx b/static/app/serviceWorker/client/serviceWorkerContext.tsx
index 382838bafd11..9b89e4d0da90 100644
--- a/static/app/serviceWorker/client/serviceWorkerContext.tsx
+++ b/static/app/serviceWorker/client/serviceWorkerContext.tsx
@@ -4,6 +4,7 @@ import * as Sentry from '@sentry/react';
 import {useFrontendVersion} from 'sentry/components/frontendVersionContext';
 import {isServiceWorkerSupported} from 'sentry/serviceWorker/client/isServiceWorkerSupported';
 import {ServiceWorkerController} from 'sentry/serviceWorker/client/serviceWorkerInterface';
+import {getSentryScriptUrlPolicy} from 'sentry/utils/trustedTypes';
 
 const DEBUG_LOGGING = false;
 
@@ -16,7 +17,11 @@ function log(message: string, options?: Sentry.metrics.MetricOptions) {
 }
 
 function getWorkerUrl(): string {
-  return window.__SENTRY_DEV_UI ? '/entrypoints/service-worker.js' : '/service-worker.js';
+  const url = window.__SENTRY_DEV_UI
+    ? '/entrypoints/service-worker.js'
+    : '/service-worker.js';
+
+  return (getSentryScriptUrlPolicy()?.createScriptURL(url) ?? url) as unknown as string;
 }
 
 const Context = createContext({
diff --git a/static/app/utils/marked/marked.tsx b/static/app/utils/marked/marked.tsx
index d38feb7641de..24ebfa531960 100644
--- a/static/app/utils/marked/marked.tsx
+++ b/static/app/utils/marked/marked.tsx
@@ -101,7 +101,8 @@ export function sanitizeHtml(html: string) {
   return dompurify.sanitize(html, {
     ALLOWED_TAGS,
     ALLOWED_ATTR,
-  });
+    RETURN_TRUSTED_TYPE: true,
+  }) as unknown as string;
 }
 
 function postprocess(html: string) {
diff --git a/static/app/utils/trustedTypes.ts b/static/app/utils/trustedTypes.ts
new file mode 100644
index 000000000000..4d98d0f96658
--- /dev/null
+++ b/static/app/utils/trustedTypes.ts
@@ -0,0 +1,69 @@
+import dompurify from 'dompurify';
+
+declare global {
+  interface Window {
+    trustedTypes?: {
+      createPolicy: (
+        name: string,
+        rules: {
+          createHTML?: (input: string) => string;
+          createScript?: (input: string) => string;
+          createScriptURL?: (input: string) => string;
+        }
+      ) => TrustedTypePolicy;
+    };
+  }
+
+  interface TrustedTypePolicy {
+    createHTML: (input: string) => TrustedHTML;
+    createScriptURL: (input: string) => TrustedScriptURL;
+    name: string;
+  }
+
+  interface TrustedHTML {
+    toString(): string;
+  }
+
+  interface TrustedScriptURL {
+    toString(): string;
+  }
+}
+
+let sentryScriptUrlPolicy: TrustedTypePolicy | null = null;
+
+export function trustedTypesSupported(): boolean {
+  return typeof window !== 'undefined' && typeof window.trustedTypes === 'object';
+}
+
+export function installTrustedTypesPolicies(): void {
+  if (!trustedTypesSupported()) {
+    return;
+  }
+
+  try {
+    dompurify.sanitize('', {RETURN_TRUSTED_TYPE: true});
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('Trusted Types: failed to warm dompurify policy', err);
+  }
+
+  if (!sentryScriptUrlPolicy) {
+    try {
+      sentryScriptUrlPolicy = window.trustedTypes!.createPolicy('sentry-script-url', {
+        createScriptURL: (input: string) => {
+          if (new URL(input, window.location.origin).origin !== window.location.origin) {
+            throw new TypeError(`sentry-script-url: refusing cross-origin ${input}`);
+          }
+          return input;
+        },
+      });
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Trusted Types: failed to create sentry-script-url policy', err);
+    }
+  }
+}
+
+export function getSentryScriptUrlPolicy(): TrustedTypePolicy | null {
+  return sentryScriptUrlPolicy;
+}

From 250bc943723bcba440e19913f5f2643aab60f8ff Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:22:17 +0200
Subject: [PATCH 12/14] build(deps): Patch zrender to clear elements with
 textContent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

zrender writes to innerHTML in seven places, all of them clearing a
container. Assigning to innerHTML is a Trusted Types injection sink, so the
browser rejects it even when the value is an empty string — which makes
zrender, and therefore ECharts, unusable under enforcement.

Mirrors the upstream PR (ecomfe/zrender#1167). Drop this patch once that
lands and ECharts picks up a release containing it.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 package.json                |  3 +-
 patches/zrender@6.1.0.patch | 83 +++++++++++++++++++++++++++++++++++++
 pnpm-lock.yaml              |  9 ++--
 3 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 patches/zrender@6.1.0.patch

diff --git a/package.json b/package.json
index 3a4a2c65a1f8..b1b2170bfea5 100644
--- a/package.json
+++ b/package.json
@@ -349,7 +349,8 @@
       "unrs-resolver"
     ],
     "patchedDependencies": {
-      "zod@4.3.5": "patches/zod@4.3.5.patch"
+      "zod@4.3.5": "patches/zod@4.3.5.patch",
+      "zrender@6.1.0": "patches/zrender@6.1.0.patch"
     }
   },
   "APIMethod": "stub",
diff --git a/patches/zrender@6.1.0.patch b/patches/zrender@6.1.0.patch
new file mode 100644
index 000000000000..73289fbd661b
--- /dev/null
+++ b/patches/zrender@6.1.0.patch
@@ -0,0 +1,83 @@
+diff --git a/lib/canvas/Painter.js b/lib/canvas/Painter.js
+index 78dc6c8d46eca79366f5190a7c191410f8133816..3c79bc4e8abc8917458a0297159c5a0a307b01c8 100644
+--- a/lib/canvas/Painter.js
++++ b/lib/canvas/Painter.js
+@@ -111,7 +111,7 @@ var CanvasPainter = (function () {
+         var rootStyle = root.style;
+         if (rootStyle) {
+             util.disableUserSelect(root);
+-            root.innerHTML = '';
++            root.textContent = '';
+         }
+         this.storage = storage;
+         this._prevDisplayList = [];
+@@ -685,7 +685,7 @@ var CanvasPainter = (function () {
+         });
+     };
+     CanvasPainter.prototype.dispose = function () {
+-        this.root.innerHTML = '';
++        this.root.textContent = '';
+         this.root =
+             this.storage =
+                 this._domRoot =
+diff --git a/lib/svg/Painter.js b/lib/svg/Painter.js
+index 2db019c7e9ac4b13947d0bb9220fdecbfa591d2f..b514a95dd529b76e1bea37953dfd00ed065f4b5a 100644
+--- a/lib/svg/Painter.js
++++ b/lib/svg/Painter.js
+@@ -187,7 +187,7 @@ var SVGPainter = (function () {
+     };
+     SVGPainter.prototype.dispose = function () {
+         if (this.root) {
+-            this.root.innerHTML = '';
++            this.root.textContent = '';
+         }
+         this._svgDom =
+             this._viewport =
+@@ -198,7 +198,7 @@ var SVGPainter = (function () {
+     };
+     SVGPainter.prototype.clear = function () {
+         if (this._svgDom) {
+-            this._svgDom.innerHTML = null;
++            this._svgDom.textContent = '';
+         }
+         this._oldVNode = null;
+     };
+diff --git a/lib/svg-legacy/Painter.js b/lib/svg-legacy/Painter.js
+index 5ca3b0d2fb308a7e9019a5dcb0869ce05ea130db..a818d6be22e8fa7c35634841d02eefd503a24828 100644
+--- a/lib/svg-legacy/Painter.js
++++ b/lib/svg-legacy/Painter.js
+@@ -258,7 +258,7 @@ var SVGPainter = (function () {
+         return this._height;
+     };
+     SVGPainter.prototype.dispose = function () {
+-        this.root.innerHTML = '';
++        this.root.textContent = '';
+         this._svgRoot =
+             this._backgroundRoot =
+                 this._svgDom =
+diff --git a/lib/svg-legacy/helper/ClippathManager.js b/lib/svg-legacy/helper/ClippathManager.js
+index d99b65aeec73c96cb3d981a87752467819757517..1383275a0c58c5e86ec029eb05a4eaf18ad5ef44 100644
+--- a/lib/svg-legacy/helper/ClippathManager.js
++++ b/lib/svg-legacy/helper/ClippathManager.js
+@@ -73,7 +73,7 @@ var ClippathManager = (function (_super) {
+             }
+             path.brush(clipPath);
+             var pathEl = this.getSvgElement(clipPath);
+-            clipPathEl.innerHTML = '';
++            clipPathEl.textContent = '';
+             clipPathEl.appendChild(pathEl);
+             parentEl.setAttribute('clip-path', getIdURL(id));
+             if (clipPaths.length > 1) {
+diff --git a/lib/svg-legacy/helper/GradientManager.js b/lib/svg-legacy/helper/GradientManager.js
+index 7d413a137ebdc956c646e293820a745812b98a15..e802f747bae4e6b94271bb840958ee883047f55e 100644
+--- a/lib/svg-legacy/helper/GradientManager.js
++++ b/lib/svg-legacy/helper/GradientManager.js
+@@ -96,7 +96,7 @@ var GradientManager = (function (_super) {
+         dom.setAttribute('gradientUnits', gradient.global
+             ? 'userSpaceOnUse'
+             : 'objectBoundingBox');
+-        dom.innerHTML = '';
++        dom.textContent = '';
+         var colors = gradient.colorStops;
+         for (var i = 0, len = colors.length; i < len; ++i) {
+             var stop_1 = createElement('stop');
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e8cdb9bf5532..99b7e71c9f6f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ patchedDependencies:
   zod@4.3.5:
     hash: 2bb6d33b2c713a7a2c559c18ad0aa6cfb261f01d935ee1288dfec6c84411aa76
     path: patches/zod@4.3.5.patch
+  zrender@6.1.0:
+    hash: a5b5e574364a10d3bbfef07def8f1f327eb54709ca887b1b9681bf949df0f89d
+    path: patches/zrender@6.1.0.patch
 
 importers:
 
@@ -534,7 +537,7 @@ importers:
         version: 4.3.5(patch_hash=2bb6d33b2c713a7a2c559c18ad0aa6cfb261f01d935ee1288dfec6c84411aa76)
       zrender:
         specifier: 6.1.0
-        version: 6.1.0
+        version: 6.1.0(patch_hash=a5b5e574364a10d3bbfef07def8f1f327eb54709ca887b1b9681bf949df0f89d)
       zxcvbn:
         specifier: ^4.4.2
         version: 4.4.2
@@ -13708,7 +13711,7 @@ snapshots:
   echarts@6.1.0:
     dependencies:
       tslib: 2.3.0
-      zrender: 6.1.0
+      zrender: 6.1.0(patch_hash=a5b5e574364a10d3bbfef07def8f1f327eb54709ca887b1b9681bf949df0f89d)
 
   editorconfig@3.0.2:
     dependencies:
@@ -18876,7 +18879,7 @@ snapshots:
 
   zod@4.4.3: {}
 
-  zrender@6.1.0:
+  zrender@6.1.0(patch_hash=a5b5e574364a10d3bbfef07def8f1f327eb54709ca887b1b9681bf949df0f89d):
     dependencies:
       tslib: 2.3.0
 

From 90d773dc18f719dc875fdb69549aa733b8f09d51 Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:22:31 +0200
Subject: [PATCH 13/14] feat(dev): Turn on Trusted Types collection in
 development

Kept separate from the header plumbing so the two can ship independently:
the plumbing is inert and safe to land any time, while enabling collection
is only useful once the policies exist and only wanted once the violation
stream is worth reading.

Also needs CSP_REPORT_ONLY = False locally.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/sentry/conf/server.py | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/sentry/conf/server.py b/src/sentry/conf/server.py
index 2d8e999a61c2..5a602bfa7025 100644
--- a/src/sentry/conf/server.py
+++ b/src/sentry/conf/server.py
@@ -619,6 +619,13 @@ def env(
 # to the devtools console, which is enough for local work.
 TRUSTED_TYPES_REPORT_URI: str | None = None
 
+if ENVIRONMENT == "development":
+    # Collect locally. Also needs CSP_REPORT_ONLY = False, otherwise django-csp
+    # owns the report-only header and the middleware stands down.
+    TRUSTED_TYPES_ENABLED = True
+    # The dev-server error overlay installs its own policy.
+    TRUSTED_TYPES_POLICIES += ["rspack-dev-server#overlay"]
+
 STATIC_ROOT = os.path.realpath(os.path.join(PROJECT_ROOT, "static"))
 STATIC_URL = "/_static/{version}/"
 # webpack assets live at a different URL that is unversioned

From 97eed3a5627f25e252d8d9135ca97b52c3f20475 Mon Sep 17 00:00:00 2001
From: Alexander Tarasov <alex.tarasov@sentry.io>
Date: Thu, 20 Aug 2026 20:24:50 +0200
Subject: [PATCH 14/14] feat(lint): Add a rule banning Trusted Types injection
 sinks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Catches new sinks in review rather than in a production violation report,
and covers code nobody has written yet — which neither grep nor the
report stream can do.

It allowlists sanitizer calls and resolves `const x = sanitizeHtml(...)`
through scope, so the twelve correct DOMPurify sites need no annotation.
Without that it would be a churn generator rather than a guardrail.

Seven sites are annotated: three that are provably safe but not statically
provable, and four real TODOs (the Prism token replacement, the ECharts
tooltip path, the cross-origin demo analytics script, and replay HTML
parsing).

Note the rule cannot police node_modules, which is where most sinks turned
out to live. It complements the browser-level control rather than
replacing it.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 eslint.config.ts                              |   1 +
 .../core/markdown/defaultComponents.tsx       |   1 +
 .../onboardingCodeSnippet.tsx                 |   1 +
 .../notifications/previews/emailPreview.tsx   |   1 +
 static/app/utils/demoMode/utils.tsx           |   1 +
 static/app/utils/marked/markedText.tsx        |   1 +
 .../utils/profiling/renderers/testUtils.tsx   |   1 +
 static/app/utils/replays/extractDomNodes.tsx  |   1 +
 static/eslint/eslintPluginSentry/index.ts     |   2 +
 .../noTrustedTypesSinks.spec.ts               | 142 +++++++++++
 .../eslintPluginSentry/noTrustedTypesSinks.ts | 222 ++++++++++++++++++
 11 files changed, 374 insertions(+)
 create mode 100644 static/eslint/eslintPluginSentry/noTrustedTypesSinks.spec.ts
 create mode 100644 static/eslint/eslintPluginSentry/noTrustedTypesSinks.ts

diff --git a/eslint.config.ts b/eslint.config.ts
index 7938fdd44044..303c1d042e4f 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -486,6 +486,7 @@ export default typescript.config([
       '@sentry/no-static-translations': 'error',
       '@sentry/no-raw-css-in-styled': 'error',
       '@sentry/no-styled-shortcut': 'error',
+      '@sentry/no-trusted-types-sinks': 'error',
       '@sentry/no-useless-css-interpolation-semicolon': 'error',
       '@sentry/no-unnecessary-use-callback': 'error',
     },
diff --git a/static/app/components/core/markdown/defaultComponents.tsx b/static/app/components/core/markdown/defaultComponents.tsx
index 32f988565735..2714627c3631 100644
--- a/static/app/components/core/markdown/defaultComponents.tsx
+++ b/static/app/components/core/markdown/defaultComponents.tsx
@@ -73,6 +73,7 @@ export function DefaultCodeBlock({children, lang}: {children: string; lang?: str
 }
 
 export function DefaultHtmlBlock({html}: {html: string}) {
+  // eslint-disable-next-line @sentry/no-trusted-types-sinks -- callers pass sanitizeHtml() output; see token.tsx
   return <span dangerouslySetInnerHTML={{__html: html}} />;
 }
 
diff --git a/static/app/components/onboarding/gettingStartedDoc/onboardingCodeSnippet.tsx b/static/app/components/onboarding/gettingStartedDoc/onboardingCodeSnippet.tsx
index 04cc03b6d43e..d45cf1d9ab8e 100644
--- a/static/app/components/onboarding/gettingStartedDoc/onboardingCodeSnippet.tsx
+++ b/static/app/components/onboarding/gettingStartedDoc/onboardingCodeSnippet.tsx
@@ -20,6 +20,7 @@ interface OnboardingCodeSnippetProps extends Omit<
  * @returns object with keys as tokens and values as array of HTMLSpanElement
  */
 export function replaceTokensWithSpan(element: HTMLElement) {
+  // eslint-disable-next-line @sentry/no-trusted-types-sinks -- TODO: removed by the CodeBlock -> usePrismTokens migration
   element.innerHTML = element.innerHTML.replace(
     /(___ORG_AUTH_TOKEN___)/g,
     '<span data-token="$1"></span>'
diff --git a/static/app/debug/notifications/previews/emailPreview.tsx b/static/app/debug/notifications/previews/emailPreview.tsx
index 610af458687e..e23442eeee10 100644
--- a/static/app/debug/notifications/previews/emailPreview.tsx
+++ b/static/app/debug/notifications/previews/emailPreview.tsx
@@ -88,6 +88,7 @@ function EmailHtmlPreview({html}: {html: string}) {
       if (!node) {
         return;
       }
+      // eslint-disable-next-line @sentry/no-trusted-types-sinks -- sanitized above; the rule cannot see through useMemo
       node.srcdoc = sanitized;
       node.onload = () => {
         const doc = node.contentDocument;
diff --git a/static/app/utils/demoMode/utils.tsx b/static/app/utils/demoMode/utils.tsx
index ae0a77774fba..0d0170151438 100644
--- a/static/app/utils/demoMode/utils.tsx
+++ b/static/app/utils/demoMode/utils.tsx
@@ -72,6 +72,7 @@ function initDemoAnalytics() {
     mainScript.id = 'plausible-script';
     mainScript.defer = true;
     mainScript.setAttribute('data-domain', window.location.hostname);
+    // eslint-disable-next-line @sentry/no-trusted-types-sinks -- TODO: cross-origin script, needs a policy decision
     mainScript.src = 'https://plausible.io/js/script.pageview-props.tagged-events.js';
 
     const queueScript = document.createElement('script');
diff --git a/static/app/utils/marked/markedText.tsx b/static/app/utils/marked/markedText.tsx
index a9d4175d85c5..b4888ef1383a 100644
--- a/static/app/utils/marked/markedText.tsx
+++ b/static/app/utils/marked/markedText.tsx
@@ -64,5 +64,6 @@ export function MarkedText<T extends React.ElementType = typeof defaultElement>(
 
   const Component = as || defaultElement;
 
+  // eslint-disable-next-line @sentry/no-trusted-types-sinks -- renderedHtml comes from the sanitized marked renderers
   return <Component dangerouslySetInnerHTML={{__html: renderedHtml}} {...props} />;
 }
diff --git a/static/app/utils/profiling/renderers/testUtils.tsx b/static/app/utils/profiling/renderers/testUtils.tsx
index 4805dee03f44..80c92cc77d47 100644
--- a/static/app/utils/profiling/renderers/testUtils.tsx
+++ b/static/app/utils/profiling/renderers/testUtils.tsx
@@ -64,6 +64,7 @@ export class FlamegraphRendererDOM extends FlamegraphRenderer {
       div.style.width = `${rect.width}px`;
       div.style.height = `${rect.height}px`;
       div.style.backgroundColor = color;
+      // eslint-disable-next-line @sentry/no-trusted-types-sinks -- test-only renderer, not shipped
       div.innerHTML = frame.frame.name;
       div.setAttribute('data-test-id', 'flamegraph-frame');
       this.container.appendChild(div);
diff --git a/static/app/utils/replays/extractDomNodes.tsx b/static/app/utils/replays/extractDomNodes.tsx
index 5b95e4e9ea55..3a6e86fd8e70 100644
--- a/static/app/utils/replays/extractDomNodes.tsx
+++ b/static/app/utils/replays/extractDomNodes.tsx
@@ -112,6 +112,7 @@ function removeNodesAtLevel(html: string, level: number): string {
   const parser = new DOMParser();
 
   try {
+    // eslint-disable-next-line @sentry/no-trusted-types-sinks -- TODO: replay HTML genuinely needs a TrustedHTML
     const doc = parser.parseFromString(html, 'text/html');
     removeChildLevel(level, doc.body.children);
     return doc.body.innerHTML;
diff --git a/static/eslint/eslintPluginSentry/index.ts b/static/eslint/eslintPluginSentry/index.ts
index ed3094458c7c..07f8b2ac1eff 100644
--- a/static/eslint/eslintPluginSentry/index.ts
+++ b/static/eslint/eslintPluginSentry/index.ts
@@ -7,6 +7,7 @@ import {noQueryDataTypeParameters} from './noQueryDataTypeParameters';
 import {noRawCssInStyled} from './noRawCssInStyled';
 import {noStaticTranslations} from './noStaticTranslations';
 import {noStyledShortcut} from './noStyledShortcut';
+import {noTrustedTypesSinks} from './noTrustedTypesSinks';
 import {noUnnecessaryTypeAnnotation} from './noUnnecessaryTypeAnnotation';
 import {noUnnecessaryTypeNarrowing} from './noUnnecessaryTypeNarrowing';
 import {noUnnecessaryUseCallback} from './noUnnecessaryUseCallback';
@@ -22,6 +23,7 @@ export const rules = {
   'no-raw-css-in-styled': noRawCssInStyled,
   'no-static-translations': noStaticTranslations,
   'no-styled-shortcut': noStyledShortcut,
+  'no-trusted-types-sinks': noTrustedTypesSinks,
   'no-useless-css-interpolation-semicolon': noUselessCssInterpolationSemicolon,
   'no-unnecessary-type-annotation': noUnnecessaryTypeAnnotation,
   'no-unnecessary-type-narrowing': noUnnecessaryTypeNarrowing,
diff --git a/static/eslint/eslintPluginSentry/noTrustedTypesSinks.spec.ts b/static/eslint/eslintPluginSentry/noTrustedTypesSinks.spec.ts
new file mode 100644
index 000000000000..d8b1a11462ba
--- /dev/null
+++ b/static/eslint/eslintPluginSentry/noTrustedTypesSinks.spec.ts
@@ -0,0 +1,142 @@
+import {RuleTester} from '@typescript-eslint/rule-tester';
+
+import {noTrustedTypesSinks} from './noTrustedTypesSinks';
+
+const ruleTester = new RuleTester();
+
+ruleTester.run('no-trusted-types-sinks', noTrustedTypesSinks, {
+  valid: [
+    // Sanitizer calls are the supported way to feed a sink
+    {
+      code: '<div dangerouslySetInnerHTML={{__html: sanitizeHtml(raw)}} />',
+      filename: 'file.tsx',
+    },
+    {
+      code: '<div dangerouslySetInnerHTML={{__html: singleLineRenderer(text)}} />',
+      filename: 'file.tsx',
+    },
+    {
+      code: '<div dangerouslySetInnerHTML={{__html: sanitizedMarked(body)}} />',
+      filename: 'file.tsx',
+    },
+    {
+      code: '<div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(note, {})}} />',
+      filename: 'file.tsx',
+    },
+    // A local const holding a sanitizer result resolves through
+    {
+      code: 'const sanitized = sanitizeHtml(raw); const el = <div dangerouslySetInnerHTML={{__html: sanitized}} />;',
+      filename: 'file.tsx',
+    },
+    // Not sinks: only <script> makes these dangerous, only document has write
+    {code: 'div.textContent = userInput;', filename: 'file.ts'},
+    {code: 'img.src = url;', filename: 'file.ts'},
+    {code: 'iframe.src = url;', filename: 'file.ts'},
+    {code: 'stream.write(chunk);', filename: 'file.ts'},
+    {code: 'logger.writeln(msg);', filename: 'file.ts'},
+    // Reading is not a sink
+    {code: 'const html = el.innerHTML;', filename: 'file.ts'},
+    // Sanitized assignment is allowed
+    {code: 'el.innerHTML = sanitizeHtml(raw);', filename: 'file.ts'},
+  ],
+  invalid: [
+    // Values the rule cannot see into must be reported, not assumed safe
+    {
+      code: '<div dangerouslySetInnerHTML={getHelp()} />',
+      filename: 'file.tsx',
+      errors: [{messageId: 'jsxSink'}],
+    },
+    {
+      code: '<div dangerouslySetInnerHTML={htmlProps} />',
+      filename: 'file.tsx',
+      errors: [{messageId: 'jsxSink'}],
+    },
+    {
+      code: '<div dangerouslySetInnerHTML={{...getHelp()}} />',
+      filename: 'file.tsx',
+      errors: [{messageId: 'jsxSink'}],
+    },
+    {
+      code: '<div dangerouslySetInnerHTML={{__html: rawHtmlString}} />',
+      filename: 'file.tsx',
+      errors: [{messageId: 'jsxSink'}],
+    },
+    {
+      code: '<div dangerouslySetInnerHTML={{__html: `<b>${name}</b>`}} />',
+      filename: 'file.tsx',
+      errors: [{messageId: 'jsxSink'}],
+    },
+    // A let, or a const not initialized from a sanitizer, does not resolve
+    {
+      code: 'let sanitized = sanitizeHtml(raw); const el = <div dangerouslySetInnerHTML={{__html: sanitized}} />;',
+      filename: 'file.tsx',
+      errors: [{messageId: 'jsxSink'}],
+    },
+    {
+      code: 'const notSafe = someOtherFn(raw); const el = <div dangerouslySetInnerHTML={{__html: notSafe}} />;',
+      filename: 'file.tsx',
+      errors: [{messageId: 'jsxSink'}],
+    },
+    {
+      code: 'el.innerHTML = userInput;',
+      filename: 'file.ts',
+      errors: [{messageId: 'assignmentSink'}],
+    },
+    {
+      code: "el.innerHTML = '';",
+      filename: 'file.ts',
+      errors: [{messageId: 'assignmentSink'}],
+    },
+    {
+      code: 'el.outerHTML = userInput;',
+      filename: 'file.ts',
+      errors: [{messageId: 'assignmentSink'}],
+    },
+    {
+      code: 'frame.srcdoc = userInput;',
+      filename: 'file.ts',
+      errors: [{messageId: 'assignmentSink'}],
+    },
+    {
+      code: "el.insertAdjacentHTML('beforeend', userInput);",
+      filename: 'file.ts',
+      errors: [{messageId: 'callSink'}],
+    },
+    {
+      code: 'document.write(userInput);',
+      filename: 'file.ts',
+      errors: [{messageId: 'callSink'}],
+    },
+    {
+      code: 'iframe.document.write(codes.join("<br>"));',
+      filename: 'file.ts',
+      errors: [{messageId: 'callSink'}],
+    },
+    {
+      code: "new DOMParser().parseFromString(html, 'text/html');",
+      filename: 'file.ts',
+      errors: [{messageId: 'callSink'}],
+    },
+    {
+      code: "range.createContextualFragment('<b>x</b>');",
+      filename: 'file.ts',
+      errors: [{messageId: 'callSink'}],
+    },
+    // <script> element writes are TrustedScript sinks
+    {
+      code: "queueScript.textContent = 'window.x = 1';",
+      filename: 'file.ts',
+      errors: [{messageId: 'scriptSink'}],
+    },
+    {
+      code: "mainScript.text = 'window.x = 1';",
+      filename: 'file.ts',
+      errors: [{messageId: 'scriptSink'}],
+    },
+    {
+      code: "mainScript.src = 'https://plausible.io/js/script.js';",
+      filename: 'file.ts',
+      errors: [{messageId: 'scriptSink'}],
+    },
+  ],
+});
diff --git a/static/eslint/eslintPluginSentry/noTrustedTypesSinks.ts b/static/eslint/eslintPluginSentry/noTrustedTypesSinks.ts
new file mode 100644
index 000000000000..fd9a8fff68f5
--- /dev/null
+++ b/static/eslint/eslintPluginSentry/noTrustedTypesSinks.ts
@@ -0,0 +1,222 @@
+import type {TSESLint, TSESTree} from '@typescript-eslint/utils';
+import {AST_NODE_TYPES, ESLintUtils} from '@typescript-eslint/utils';
+import {DefinitionType} from '@typescript-eslint/scope-manager';
+
+/**
+ * Functions that return a value already run through a sanitizer, so their
+ * result is safe to hand to an injection sink. Keep this list short — every
+ * entry is a promise that the function sanitizes, not merely that its current
+ * callers happen to pass safe input.
+ */
+const SANITIZERS = new Set([
+  'sanitizeHtml',
+  'sanitizedMarked',
+  'asyncSanitizedMarked',
+  'singleLineRenderer',
+]);
+
+/** Member calls treated as sanitizers, matched on the property name. */
+const SANITIZER_METHODS = new Set(['sanitize']);
+
+/** `el.<name> = value` */
+const ASSIGNMENT_SINKS = new Set(['innerHTML', 'outerHTML', 'srcdoc']);
+
+/** Sinks only when the element is a `<script>`; see the comment at the use site. */
+const SCRIPT_SINKS = new Set(['textContent', 'text', 'innerText', 'src']);
+
+/** `el.<name>(value)` */
+const CALL_SINKS = new Set([
+  'insertAdjacentHTML',
+  'createContextualFragment',
+  'setHTMLUnsafe',
+  'parseFromString',
+  'write',
+  'writeln',
+]);
+
+function isSanitizerCall(node: TSESTree.Node | null | undefined): boolean {
+  if (node?.type !== AST_NODE_TYPES.CallExpression) {
+    return false;
+  }
+  const {callee} = node;
+  if (callee.type === AST_NODE_TYPES.Identifier) {
+    return SANITIZERS.has(callee.name);
+  }
+  if (
+    callee.type === AST_NODE_TYPES.MemberExpression &&
+    callee.property.type === AST_NODE_TYPES.Identifier
+  ) {
+    return SANITIZER_METHODS.has(callee.property.name);
+  }
+  return false;
+}
+
+/**
+ * Resolve an identifier back to a single `const x = sanitizeHtml(...)` in
+ * scope. Deliberately shallow: one definition, one initializer. Anything less
+ * obvious should be explicit at the call site rather than inferred here.
+ */
+function resolvesToSanitizer(
+  node: TSESTree.Node,
+  scope: TSESLint.Scope.Scope | null
+): boolean {
+  if (node.type !== AST_NODE_TYPES.Identifier) {
+    return false;
+  }
+  for (let current = scope; current; current = current.upper) {
+    const variable = current.variables.find(v => v.name === node.name);
+    if (!variable) {
+      continue;
+    }
+    if (variable.defs.length !== 1) {
+      return false;
+    }
+    const def = variable.defs[0]!;
+    return (
+      def.type === DefinitionType.Variable &&
+      def.parent.kind === 'const' &&
+      isSanitizerCall(def.node.init)
+    );
+  }
+  return false;
+}
+
+export const noTrustedTypesSinks = ESLintUtils.RuleCreator.withoutDocs({
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow writing unsanitized values to Trusted Types injection sinks',
+    },
+    schema: [],
+    messages: {
+      jsxSink:
+        'dangerouslySetInnerHTML is a Trusted Types injection sink. Pass a value from a sanitizer (sanitizeHtml, singleLineRenderer, sanitizedMarked, or DOMPurify.sanitize with RETURN_TRUSTED_TYPE), or render the content as JSX instead.',
+      assignmentSink:
+        'Assigning to `{{name}}` is a Trusted Types injection sink. Build DOM nodes instead (createElement / createTextNode / createComment / replaceChildren), or assign a value from a sanitizer.',
+      callSink:
+        '`{{name}}` is a Trusted Types injection sink. Build DOM nodes instead, or pass a value from a sanitizer.',
+      scriptSink:
+        'Writing to a script element is a Trusted Types injection sink. Use `script.appendChild(document.createTextNode(...))`, which is not a sink.',
+    },
+  },
+  create(context) {
+    function isSafe(node: TSESTree.Node | null | undefined): boolean {
+      if (!node) {
+        return false;
+      }
+      if (isSanitizerCall(node)) {
+        return true;
+      }
+      return resolvesToSanitizer(node, context.sourceCode.getScope(node));
+    }
+
+    return {
+      JSXAttribute(node) {
+        if (
+          node.name.type !== AST_NODE_TYPES.JSXIdentifier ||
+          node.name.name !== 'dangerouslySetInnerHTML' ||
+          node.value?.type !== AST_NODE_TYPES.JSXExpressionContainer
+        ) {
+          return;
+        }
+
+        const {expression} = node.value;
+
+        // An inline object is the only shape we can judge statically. Anything
+        // else — `{...getHelp()}`, a spread, an identifier — hides the value, so
+        // it has to be reported rather than assumed safe.
+        if (expression.type !== AST_NODE_TYPES.ObjectExpression) {
+          context.report({node, messageId: 'jsxSink'});
+          return;
+        }
+
+        const html = expression.properties.find(
+          (p): p is TSESTree.Property =>
+            p.type === AST_NODE_TYPES.Property &&
+            p.key.type === AST_NODE_TYPES.Identifier &&
+            p.key.name === '__html'
+        );
+
+        // A spread (`{...obj}`) also hides `__html`.
+        const hasSpread = expression.properties.some(
+          p => p.type === AST_NODE_TYPES.SpreadElement
+        );
+
+        if (!html) {
+          if (hasSpread) {
+            context.report({node, messageId: 'jsxSink'});
+          }
+          return;
+        }
+
+        if (!isSafe(html.value)) {
+          context.report({node, messageId: 'jsxSink'});
+        }
+      },
+
+      AssignmentExpression(node) {
+        const {left} = node;
+        if (
+          left.type !== AST_NODE_TYPES.MemberExpression ||
+          left.property.type !== AST_NODE_TYPES.Identifier
+        ) {
+          return;
+        }
+
+        const name = left.property.name;
+
+        // `textContent` / `text` / `innerText` / `src` are only sinks on
+        // <script>, which we cannot detect without type information — `img.src`
+        // is fine. Fall back to flagging when the object is *named* like a
+        // script element, which covers the realistic `createElement('script')`
+        // pattern without drowning every `img.src = url` in false positives.
+        if (
+          SCRIPT_SINKS.has(name) &&
+          left.object.type === AST_NODE_TYPES.Identifier &&
+          /script/i.test(left.object.name)
+        ) {
+          context.report({node, messageId: 'scriptSink'});
+          return;
+        }
+
+        if (ASSIGNMENT_SINKS.has(name) && !isSafe(node.right)) {
+          context.report({node, messageId: 'assignmentSink', data: {name}});
+        }
+      },
+
+      CallExpression(node) {
+        const {callee} = node;
+        if (
+          callee.type !== AST_NODE_TYPES.MemberExpression ||
+          callee.property.type !== AST_NODE_TYPES.Identifier
+        ) {
+          return;
+        }
+
+        const name = callee.property.name;
+        if (!CALL_SINKS.has(name)) {
+          return;
+        }
+
+        // `write`/`writeln` are only sinks on a document.
+        if (name === 'write' || name === 'writeln') {
+          const obj = callee.object;
+          const isDocument =
+            (obj.type === AST_NODE_TYPES.Identifier && obj.name === 'document') ||
+            (obj.type === AST_NODE_TYPES.MemberExpression &&
+              obj.property.type === AST_NODE_TYPES.Identifier &&
+              obj.property.name === 'document');
+          if (!isDocument) {
+            return;
+          }
+        }
+
+        const value = name === 'insertAdjacentHTML' ? node.arguments[1] : node.arguments[0];
+        if (!isSafe(value)) {
+          context.report({node, messageId: 'callSink', data: {name}});
+        }
+      },
+    };
+  },
+});