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.

[AbhiPrasad]

@reesericci - PRs are welcome! Loader script here: https://github.com/getsentry/sentry-javascript/blob/develop/packages/browser/src/loader.js

[reesericci]

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?

[mydea]

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!

[reesericci]

The shadow root for the feedback widget has a <style> tag, and so there needs to be some way to pass the nonce from the loader to this feedback widget inline style. Is the feedback widget in a separate repo?

[AbhiPrasad]

the loader does not support feedback atm - the code for the feedback widget is in https://github.com/getsentry/sentry-javascript/tree/develop/packages/feedback

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

[rob101]

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

[scottohara]

I've been trialling Sentry on a Developer plan successfully for a few months, and I decided yesterday to try out Session Replays to see whether they would be useful to me.

After following the guidance in the docs, I updated my Sentry.init() code to include the replays integration with a low sample rate (as the developer plan only includes 50 replays per month).

The docs also indicated updating my CSP to include worker-src 'self' blob:, which I did.

After 1 day, I received an email saying I had used 80% of my 5k Errors quota; and it turns out that the spike was entirely due to style-src-attr CSP errors caused by the replay script.

If this issue is proving challenging to solve properly, might I suggest you update the docs for setting up Session Replays to mention that adding style-src-attr 'unsafe-inline' may be advisable (at least temporarily?).

Unfortunately I'm now in a situation where my Sentry Developer plan will be mostly useless for the next 3 weeks until my Errors quota is replenished; and all because I simply wanted to try out Session Replays.

[billyvg]

@scottohara Hey Scott, sorry to hear about that - I'll speak to our support staff to see what we can do. Needless to say our SDKs shouldn't be eating up your Sentry quota, hopefully it doesn't happen again, but please reach out to support if it does.

We'll look into fixing the underlying issue

[billyvg]

Would the ideal solution here be to pass a nonce into Sentry.init() that gets passed down to our integrations (and then used as necessary, e.g. in mutation.ts)?

I've created a quick repro, you can also add something like the following:

<meta
  http-equiv="Content-Security-Policy"
  content="style-src 'nonce-foo1234';"
/>

Running the replay integration should throw errors with the above CSP.

[scottohara]

Would the ideal solution here be to pass a nonce into Sentry.init()

@billyvg I can't speak for everyone here, but that solution would likely work well for us.

We are already generating a unique, per-request nonce for our CSP, so being able to pass this down to Sentry.init() would be ideal.

[FirefighterBlu3]

I too would very much like this

…

On Thu, Jun 27, 2024, 10:40 PM scottohara ***@***.***> wrote: Would the ideal solution here be to pass a nonce into Sentry.init() @billyvg <https://github.com/billyvg> I can't speak for everyone here, but that solution would likely work well for us. We are already generating a unique, per-request nonce for our CSP, so being able to pass this down to Sentry.init() would be ideal. — Reply to this email directly, view it on GitHub <#10481 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAYEW5EVXNZRI7BYDVZZELLZJTEJXAVCNFSM6AAAAABCXPGN2WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOJWGAYDENJYGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[shehi]

Works for us as well.

…

On Fri, 28 Jun 2024, 13:48 David Ford, ***@***.***> wrote: I too would very much like this On Thu, Jun 27, 2024, 10:40 PM scottohara ***@***.***> wrote: > Would the ideal solution here be to pass a nonce into Sentry.init() > > @billyvg <https://github.com/billyvg> I can't speak for everyone here, > but that solution would likely work well for us. > > We are already generating a unique, per-request nonce for our CSP, so > being able to pass this down to Sentry.init() would be ideal. > > — > Reply to this email directly, view it on GitHub > < #10481 (comment)>, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AAYEW5EVXNZRI7BYDVZZELLZJTEJXAVCNFSM6AAAAABCXPGN2WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOJWGAYDENJYGM> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> > — Reply to this email directly, view it on GitHub <#10481 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAE7SAINVT6QADQVW4HJ2ZDZJVEQBAVCNFSM6AAAAABCXPGN2WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOJWG4ZDMNBUGM> . You are receiving this because you commented.Message ID: ***@***.***>

[rob101]

@billyvg is a fix planned for this / a workaround now available? thanks

[billyvg]

@billyvg is a fix planned for this / a workaround now available? thanks

Yes, a fix is planned! @chargome will be taking this on shortly.

[jdelStrother]

I'm also interested in being able to specify a nonce for the stylesheet injected by showReportDialog - will that be covered by @chargome's work or shall I open a separate issue?

[chargome]

@jdelStrother I'll look into it

[chargome]

Quick update, I had a closer look at this one today and it seems that we're facing two distinct issues:

1. The feedback integration does not apply nonces to <script /> and <style /> tags (not a problem, we'll just set it).
2. The replay integration (with rrweb) is setting a new style attribute on a <span /> tag which violates CSP. This can't be fixed with a nonce though since nonces can only be applied to <script /> and <style /> tags. I found a fix where I set all style properties directly (e.g. element.style[cssProperty] = someValue;) instead of the whole style attribute, which gets rid of the CSP error but I will need to do a bit more testing on this.

[TimVerheul]

Quick update, I had a closer look at this one today and it seems that we're facing two distinct issues:

1. The feedback integration does not apply nonces to <script /> and <style /> tags (not a problem, we'll just set it).
2. The replay integration (with rrweb) is setting a new style attribute on a <span /> tag which violates CSP. This can't be fixed with a nonce though since nonces can only be applied to <script /> and <style /> tags. I found a fix where I set all style properties directly (e.g. element.style[cssProperty] = someValue;) instead of the whole style attribute, which gets rid of the CSP error but I will need to do a bit more testing on this.

any update on point 2?

[chargome]

@TimVerheul didn't find a feasible fix for that yet: getsentry/rrweb#211 (comment)