feat(sveltekit)!: Remove fetchProxyScriptNonce option (getsentry#15123)

Lms24 · web-flow · commit 94e734768b05 · 2025-01-22T12:32:27.000+01:00
Removes the `fetchProxyScriptNonce` and in turn simplifies our
`transformPageChunk` callback a bit.
diff --git a/docs/migration/v8-to-v9.md b/docs/migration/v8-to-v9.md
@@ -269,6 +269,10 @@ The following changes are unlikely to affect users of the SDK. They are listed h
   This function was primarily internally used.
   It's functionality was misleading and should not be used.
 
+### `@sentry/sveltekit`
+
+- The `fetchProxyScriptNonce` option in `sentryHandle()` was removed due to security concerns. If you previously specified this option for your CSP policy, specify a [script hash](https://docs.sentry.io/platforms/javascript/guides/sveltekit/manual-setup/#configure-csp-for-client-side-fetch-instrumentation) in your CSP config or [disable](https://docs.sentry.io/platforms/javascript/guides/sveltekit/manual-setup/#disable-client-side-fetch-proxy-script) the injection of the script entirely.
+
 ## 5. Build Changes
 
 Previously the CJS versions of the SDK code (wrongfully) contained compatibility statements for default exports in ESM:
@@ -491,6 +495,10 @@ Sentry.init({
 
 - Deprecated the `hideSourceMaps` option. There are no replacements for this option. The SDK emits hidden sourcemaps by default.
 
+### `@sentry/sveltekit`
+
+- The `fetchProxyScriptNonce` option in `sentryHandle()` was deprecated due to security concerns. If you previously specified this option for your CSP policy, specify a [script hash](https://docs.sentry.io/platforms/javascript/guides/sveltekit/manual-setup/#configure-csp-for-client-side-fetch-instrumentation) in your CSP config or [disable](https://docs.sentry.io/platforms/javascript/guides/sveltekit/manual-setup/#disable-client-side-fetch-proxy-script) the injection of the script entirely.
+
 ## `@sentry/opentelemetry`
 
 - Deprecated the `generateSpanContextForPropagationContext` method. There are no replacements for this method.
diff --git a/packages/sveltekit/src/server/handle.ts b/packages/sveltekit/src/server/handle.ts
@@ -43,15 +43,6 @@ export type SentryHandleOptions = {
    * @default true
    */
   injectFetchProxyScript?: boolean;
-
-  /**
-   * If this option is set, the `sentryHandle` handler will add a nonce attribute to the script
-   * tag it injects into the page. This script is used to enable instrumentation of `fetch` calls
-   * in `load` functions.
-   *
-   * Use this if your CSP policy blocks the fetch proxy script injected by `sentryHandle`.
-   */
-  fetchProxyScriptNonce?: string;
 };
 
 /**
@@ -68,21 +59,17 @@ export const FETCH_PROXY_SCRIPT = `
 /**
  * Adds Sentry tracing <meta> tags to the returned html page.
  * Adds Sentry fetch proxy script to the returned html page if enabled in options.
- * Also adds a nonce attribute to the script tag if users specified one for CSP.
  *
  * Exported only for testing
  */
-export function addSentryCodeToPage(options: SentryHandleOptions): NonNullable<ResolveOptions['transformPageChunk']> {
-  const { fetchProxyScriptNonce, injectFetchProxyScript } = options;
-  // if injectFetchProxyScript is not set, we default to true
-  const shouldInjectScript = injectFetchProxyScript !== false;
-  const nonce = fetchProxyScriptNonce ? `nonce="${fetchProxyScriptNonce}"` : '';
-
+export function addSentryCodeToPage(options: { injectFetchProxyScript: boolean }): NonNullable<
+  ResolveOptions['transformPageChunk']
+> {
   return ({ html }) => {
     const metaTags = getTraceMetaTags();
     const headWithMetaTags = metaTags ? `<head>\n${metaTags}` : '<head>';
 
-    const headWithFetchScript = shouldInjectScript ? `\n<script ${nonce}>${FETCH_PROXY_SCRIPT}</script>` : '';
+    const headWithFetchScript = options.injectFetchProxyScript ? `\n<script>${FETCH_PROXY_SCRIPT}</script>` : '';
 
     const modifiedHead = `${headWithMetaTags}${headWithFetchScript}`;
 
@@ -106,7 +93,7 @@ export function addSentryCodeToPage(options: SentryHandleOptions): NonNullable<R
  * ```
  */
 export function sentryHandle(handlerOptions?: SentryHandleOptions): Handle {
-  const options = {
+  const options: Required<SentryHandleOptions> = {
     handleUnknownRoutes: false,
     injectFetchProxyScript: true,
     ...handlerOptions,
@@ -144,7 +131,7 @@ export function sentryHandle(handlerOptions?: SentryHandleOptions): Handle {
 
 async function instrumentHandle(
   { event, resolve }: Parameters<Handle>[0],
-  options: SentryHandleOptions,
+  options: Required<SentryHandleOptions>,
 ): Promise<Response> {
   if (!event.route?.id && !options.handleUnknownRoutes) {
     return resolve(event);
@@ -174,7 +161,7 @@ async function instrumentHandle(
           normalizedRequest: winterCGRequestToRequestData(event.request.clone()),
         });
         const res = await resolve(event, {
-          transformPageChunk: addSentryCodeToPage(options),
+          transformPageChunk: addSentryCodeToPage({ injectFetchProxyScript: options.injectFetchProxyScript }),
         });
         if (span) {
           setHttpStatus(span, res.status);
diff --git a/packages/sveltekit/test/server/handle.test.ts b/packages/sveltekit/test/server/handle.test.ts
@@ -432,36 +432,24 @@ describe('addSentryCodeToPage', () => {
   </html>`;
 
   it("Adds add meta tags and fetch proxy script if there's no active transaction", () => {
-    const transformPageChunk = addSentryCodeToPage({});
+    const transformPageChunk = addSentryCodeToPage({ injectFetchProxyScript: true });
     const transformed = transformPageChunk({ html, done: true });
 
     expect(transformed).toContain('<meta name="sentry-trace"');
     expect(transformed).toContain('<meta name="baggage"');
     expect(transformed).not.toContain('sentry-transaction=');
-    expect(transformed).toContain(`<script >${FETCH_PROXY_SCRIPT}</script>`);
+    expect(transformed).toContain(`<script>${FETCH_PROXY_SCRIPT}</script>`);
   });
 
   it('adds meta tags and the fetch proxy script if there is an active transaction', () => {
-    const transformPageChunk = addSentryCodeToPage({});
+    const transformPageChunk = addSentryCodeToPage({ injectFetchProxyScript: true });
     SentryNode.startSpan({ name: 'test' }, () => {
       const transformed = transformPageChunk({ html, done: true }) as string;
 
       expect(transformed).toContain('<meta name="sentry-trace"');
       expect(transformed).toContain('<meta name="baggage"');
       expect(transformed).toContain('sentry-transaction=test');
-      expect(transformed).toContain(`<script >${FETCH_PROXY_SCRIPT}</script>`);
-    });
-  });
-
-  it('adds a nonce attribute to the script if the `fetchProxyScriptNonce` option is specified', () => {
-    const transformPageChunk = addSentryCodeToPage({ fetchProxyScriptNonce: '123abc' });
-    SentryNode.startSpan({ name: 'test' }, () => {
-      const transformed = transformPageChunk({ html, done: true }) as string;
-
-      expect(transformed).toContain('<meta name="sentry-trace"');
-      expect(transformed).toContain('<meta name="baggage"');
-      expect(transformed).toContain('sentry-transaction=test');
-      expect(transformed).toContain(`<script nonce="123abc">${FETCH_PROXY_SCRIPT}</script>`);
+      expect(transformed).toContain(`<script>${FETCH_PROXY_SCRIPT}</script>`);
     });
   });
 
