Allow to handle CSP nonce for replay (rrweb) elements

Is there an existing issue for this?

[X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
[X] I have reviewed the documentation https://docs.sentry.io/
[X] 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 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 :}

getsentry / sentry-javascript

Allow to handle CSP nonce for replay (rrweb) elements #10481