sentry-javascript: CSP inline style errors using the loader

Is there an existing issue for this?

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

Sentry Browser Loader

SDK Version

7.99.0

Framework Version

No response

Link to Sentry event

No response

SDK Setup

window.sentryOnLoad = function() {
    console.log(`register global Sentry use with site version ${window.site.base_version}`);
    window.Sentry.init({
      dsn: 'https://aba269c1f55349d89eadb788807dce2f@o413851.ingest.sentry.io/5302345',
      release: window.site.base_version,
      environment,
      attachStacktrace: true,
      // ignoreErrors: [...],
      ignoreTransactions: [
        'https://r.lr-ingest.io'
      ],
      tracesSampleRate: 1.0,
      replaysSessionSampleRate: 0.1,
      replaysOnErrorSampleRate: 1.0,
      sendDefaultPii: true,
      stickySession: true,
      autoSessionTracking: true,
      networkDetailAllowUrls: ["anchorbooting.com", "ab-dev.blue-labs.org"],
      integrations: [
        // this doesn't work despite following the instructions for the Loader and key configuration (set to 7.x and perf/replay/debug enabled)
        // Sentry.replayIntegration({maskAllText: false, maskAllInputs: false, blockAllMedia: false,}),
        new Sentry.Integrations.HttpClient({failedRequestStatusCodes: [[400, 599]],}),
      ],

      beforeSend(event, hint) {
        setTimeout(whoops, 500);
        if (event && event.extra) {
          // holy hell.extra, why is event null?
          event.extra['form-datum'] = grobble_form_data();
          event.extra.username = window.username;
        }

        return event;
      },
    });

    window.Sentry.configureScope((scope) => {
      scope.setExtra("form-datum", "");
    });
}

Steps to Reproduce

As soon as Sentry loads, telemetry starts being sent. This occurs:

index.js:2002 Refused to apply inline style because it violates the following Content Security Policy directive: “style-src-attr ‘self’ ‘strict-dynamic’ https://fonts.googleapis.com https://use.fontawesome.com https://maps.googleapis.com https://sentry.io https://browser.sentry.io https://browser.sentry-cdn.io https://browser.sentry-cdn.com https://js.sentry-cdn.com https://anchorbooting.com https://www.anchorbooting.com https://anchor-booting.appspot.com https://anchor-booting.uc.r.appspot.com https://ab-dev.blue-labs.org https://cdn.lr-ingest.io https://maps.googleapis.com”. (newline for clarity) Either the ‘unsafe-inline’ keyword, a hash (‘sha256-DV7YSgMWr/HY4EsViytQd0ytooqEFSst4W0YJHo8NkU=’), or a nonce (‘nonce-…’) is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the ‘unsafe-hashes’ keyword is present.

Expected Result

No CSP errors 😃

Actual Result

The CSP error :}

About this issue

  • Original URL
  • State: open
  • Created 5 months ago
  • Comments: 15 (6 by maintainers)

Most upvoted comments

Yup, keeps happening at webpack-internal:///(app-pages-browser)/node_modules/@sentry/replay/esm/index.js LINE 2051:

image

image

I also have strict CSP in place, with nonce calculated and added to request as X-Nonce header, which can easily be fetched and applied to inline scripts.

This issue occurs when mutations.js finds an existing inline style but doesn’t reapply the nonce:

image

Just looking at the script, it doesn’t seem like it loads the style tags there, just the scripts - do you know where I could find those?

The loader does not inject any style tags - it doesn’t do anything with styles, actually. Which @AbhiPrasad mentioned above - I don’t think this comes from the loader script, but some other library/extension probably. The Sentry Loader Script only injects the Sentry SDK, which does not have any styles!