Allow to handle CSP nonce for replay (rrweb) elements

[FirefighterBlu3]

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 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 :}

[FirefighterBlu3]

...Hey there. I did some searching through your docs to see if there was a way to sneak a nonce into the vanilla JS loader. Injecting the nonce is referred to in the Sveltekit content but I don't see a way to use this with the loader. Is there?

If not, here's an idea. Google maps gives us the ability to do it by adding the nonce to the URL, or, using a custom script loader. For some situations, it'll fetch the nonce from the first <style> element.

The tl;dr of this, is to create a function that makes a script fragment and attaches it to the document. In the loader you do something like this:

script.type = 'text/javascript';
script.src = srcurl;
script.nonce = nonce;
...

and then you call the loader with the nonce value that by whatever means you (I) can control in my site.

My goal is to fix the execution denial of setting style inside the index.js that the loader fetches, roughly at line 2002.

if (attributeName === 'style') {
const old = unattachedDoc.createElement('span');
if (m.oldValue) {
old.setAttribute('style', m.oldValue);
}

I believe unsafe-inline will not be an option when Manivest v3 rolls out. Mv3 will actually be very intolerant in this regard.

[AbhiPrasad]

Hey thanks for raising an issue!

My goal is to fix the execution denial of setting style inside the index.js that the loader fetches, roughly at line 2002.

The loader nor the Sentry SDK does not have any code like this. You can validate this by searching our repo for this code. See below for how the loader does injection. Are you getting a false positive here? I suspect there is another script you are using that is causing issues.

sentry-javascript/packages/browser/src/loader.js

Lines 59 to 101 in 84baeb1

	// Create a `script` tag with provided SDK `url` and attach it just before the first, already existing `script` tag
	// Scripts that are dynamically created and added to the document are async by default,
	// they don't block rendering and execute as soon as they download, meaning they could
	// come out in the wrong order. Because of that we don't need async=1 as GA does.
	// it was probably(?) a legacy behavior that they left to not modify few years old snippet
	// https://www.html5rocks.com/en/tutorials/speed/script-loading/
	var _currentScriptTag = _document.scripts[0];
	var _newScriptTag = _document.createElement(_script);
	_newScriptTag.src = _sdkBundleUrl;
	_newScriptTag.crossOrigin = 'anonymous';
	// Once our SDK is loaded
	_newScriptTag.addEventListener('load', function() {
	try {
	// Restore onerror/onunhandledrejection handlers
	_window[_onerror] = _oldOnerror;
	_window[_onunhandledrejection] = _oldOnunhandledrejection;
	// Add loader as SDK source
	_window.SENTRY_SDK_SOURCE = 'loader';
	var SDK = _window[_namespace];
	var oldInit = SDK.init;
	// Configure it using provided DSN and config object
	SDK.init = function(options) {
	var target = _config;
	for (var key in options) {
	if (Object.prototype.hasOwnProperty.call(options, key)) {
	target[key] = options[key];
	}
	}
	oldInit(target);
	};
	sdkLoaded(callbacks, SDK);
	} catch (o_O) {
	console.error(o_O);
	}
	});
	_currentScriptTag.parentNode.insertBefore(_newScriptTag, _currentScriptTag);

I believe unsafe-inline will not be an option when Manifest v3 rolls out. Mv3 will actually be very intolerant in this regard.

For chrome extension we generally recommend not using the general loader init because of the problems of multiple Sentry instances on the page colliding, and instead using a client directly via the npm package. See our docs for more specific instructions.

Also, we do have general CSP guidance for the CDN bundle: https://docs.sentry.io/platforms/javascript/install/loader/#content-security-policy.

[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 🥀

[reesericci]

I just ran into this today, it would be really helpful if I could just inject a nonce into the Sentry init that gets passed to the style/script attributes.