CSP inline script violation when loading Sentry SvelteKit

[ncvc]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/sveltekit

SDK Version

7.66.0

Framework Version

7.66.0

Link to Sentry event

No response

SDK Setup

  Sentry.init({
    dsn: env.PUBLIC_SENTRY_SVELTEKIT_CLIENT_DSN,
    integrations: [
      new Sentry.BrowserTracing(),
      new CaptureConsoleIntegration({
        levels: ["warn", "error", "assert"],
      }),
    ],
    release,
    environment: env.PUBLIC_ENV_NAME,
    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0,
    attachStacktrace: true,
    ignoreErrors: [
      "TypeError: Failed to fetch dynamically imported module",
      "Load failed",
      "TypeError: Load failed",
      "TypeError: Failed to fetch",
      "Failed to fetch",
      "TypeError: NetworkError when attempting to fetch resource",
      "TypeError: Importing a module script failed",
      "TypeError: error loading dynamically imported module",
    ],
  });
  Sentry.setTags({
    server_name: env.PUBLIC_DATADOG_HOST_NAME,
    version: release,
    service: "agent-webapp",
  });

Steps to Reproduce

Open the browser console and load a page where Sentry is loaded

Expected Result

No CSP errors

Actual Result

On page load, I get the following CSP error in the console:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' <the rest of my script-src>". Either the 'unsafe-inline' keyword, a hash ('sha256-+X7Z1KW2Vcl9pendYbp0FYL6F0HZek43aBP/14cwq+U='), or a nonce ('nonce-...') is required to enable inline execution.

I get this error in version 7.65.0 but not 7.64.0.

I believe this was introduced in this PR, where the following script tag is injected into the head tag:

<script>
    const f = window.fetch;
    if(f){
      window._sentryFetchProxy = function(...a){return f(...a)}
      window.fetch = function(...a){return window._sentryFetchProxy(...a)}
    }

  </script>

As a temporary workaround, I've added sha256-+X7Z1KW2Vcl9pendYbp0FYL6F0HZek43aBP/14cwq+U= to my script-src CSP, but ideally I wouldn't have to update this hash each time the injected script is changed.

[Lms24]

Hi @ncvc thanks for reporting!

Dang, this isn't great - we totally missed this aspect when implementing #8802. I need to think about a solution here as I really don't want to revert #8802 if possible at all. Fwiw, I have no plans to touch this script any time soon so the hash should stay pretty constant (famous last words I guess). However, I'd like to avoid putting that burden of adjusting CSP on users.

If you anyone has a suggestion, I'm all ears ;)

[Lms24]

I have an idea how we can fix this but I'm curious on the community's thoughts around the fix:

We currently inject our fetch proxy script in sentryHandle which is handler for Kit's server-side handle hook. This is done by using the transformPageChunk callback.

We can get around the CSP error if we adapt the handler to:

1. Generate a nonce at each page load request
2. Add this nonce to the <script nonce="_insert_here_"> tag of our fetch proxy script
3. Add the script-src 'nonce-_insert_here_' directive to the response's CSP header

A more brittle alternative would be to just add the script's hash to the CSP header.

My concern is that users might not be happy about our SDK modifying their CSP header.

To mitigate this, we can add a option (e.g. allowFetchProxyScriptCSP: boolean) to sentryHandle. However, I'd still tend to enabeling this by default and making it an opt-out feature. The reason is that we need the <script> tag for our fetch instrumentation to work. So we need some way to work around this, ideally without any user-action. Making this opt-in, would require users to actively modify their Sentry config and it's safe to assume that this won't happen in many cases, especially if we release this in a minor version.

Additionally, we can also allow users passing an optional, custom nonce (or hash) to sentryHandle.

Needless to say, all of this only applies if users actually turned on CSP and a CSP header is already set on the response.

[getsantry]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀