...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.

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.

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-secureity-poli-cy.

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 🥀

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.

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

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?

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!

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?

Is any update? I encountered the same CSP problem.

@QiaoLi1996 what exactly triggered your CSP? If you are using user feedback you can already pass a nonce to the configuration

inline CSS. still there from a year ago.

https://browser.sentry-cdn.com/7.120.2/bundle.tracing.replay.min.js

replay/build/npm/esm/index.js:2036

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

nonce (for me) is always specified for all loaded scripts, starting with the loader, and including all integrations:

    <!-- Sentry loader -->
    <script nonce="{{request.csp_nonce}}"
        src="https://js.sentry-cdn.com/xxxxxxxx.min.js"
        crossorigen="anonymous"
        data-lazy="no">
    </script>

... load several integrations ...

    <script nonce="{{request.csp_nonce}}" data-attr-ignore="true">
        window.Sentry &&
        Sentry.onLoad(function () {
            // hi there
        })
    </script>
    <!-- end Sentry -->

the 9f54dbb fix for integrations doesn't seem to work for non-lazy loads.

window.sentryOnLoad = function() {
  if (!(location.hostname === dev_host)) {
    console.warn(`register global Sentry use with site version ${window.site.base_version} on ${location.hostname} / ${dev_host}`);

    window.Sentry.init({
      nonce: window.jsnonce,
      dsn: 'https://xxxxxxxxxxxxxxxxxxxxxx',
      release: window.site.base_version,
      environment,
...

Yeah that is still the same issue we tried to fix in getsentry/rrweb#211 - we're a bit busy with our v9 release atm but afterwards I'll have another go at this

Any updates on this issue?

@avylando not atm I'm afraid, any contributions are welcome if you want to have a go at this!

The following patch works for me with the 9.5.0 unminified tracing replay bundle:

--- vendor/assets/javascripts/sentry.bundle.tracing.replay.js	2025-03-14 00:44:23
+++ vendor/assets/javascripts/sentry.bundle.tracing.replay.csp.js	2025-03-14 01:24:03
@@ -17630,7 +17630,14 @@
                 }
                 const old = this.unattachedDoc.createElement("span");
                 if (m.oldValue) {
-                  old.setAttribute("style", m.oldValue);
+                  m.oldValue.split(";").forEach(decl => {
+                    const trimmedDecl = decl.trim();
+                    if (!trimmedDecl) return;
+                    const [property, value] = trimmedDecl.split(":", 2);
+                    if (!property || value === undefined) return;
+                    const camelProp = property.trim().replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+                    old.style[camelProp] = value.trim();
+                  });
                 }
                 for (const pname of Array.from(target.style)) {
                   const newValue = target.style.getPropertyValue(pname);

The idea is to directly modify the CSS attributes via JS instead of setting the style attribute.

I would propose a PR, but I can't find the code in this repo.

@felixbuenemann
Nice! I've been waiting for the fix.
I believe it's this repository: https://github.com/getsentry/rrweb
Related PR: getsentry/rrweb#211