CSP inline style violation when loading Sentry

[istvandanii]

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/react

SDK Version

8.55.0

Framework Version

19.0.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

Sentry.init({   
    dsn: env.DSN
    release: VERSION,
    environment: ENVIRONMENT,
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.captureConsoleIntegration({ levels: ['error'] }),
      Sentry.replayIntegration(),
    ],
    // Tracing
    tracesSampleRate: 1.0, //  Capture 100% of the transactions
    // Session Replay
    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
    ignoreErrors: [
      'Invalid LatLng object: (NaN, NaN)',
      'Request aborted',
      'timeout of 60000ms exceeded',
      'Network Error',
      'Request failed with status code 401',
      'Request failed with status code 500',
      'CanceledError: canceled',
    ],
  });

Steps to Reproduce

Open the browser console and load a page where Sentry is loaded

Expected Result

No CSP errors

Actual Result

On page load, I get the following CSP error in the console:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-aJXdq-9YJUnOWjRW_loG7gAAAIo' 'sha256-J+1qi86zBJTP2TKuV75WbDUg1P2gJwcdv3oy2qx4Bmg=' 'unsafe-hashes'". Either the 'unsafe-inline' keyword, a hash ('sha256-btoiftVklJokoSDDi/aZtur5wagPPd7+TbeAJHy9ir4='), or a nonce ('nonce-...') is required to enable inline execution.

I've tried setting the hash for it, but unfortunately it is always changes.

if (attributeName === 'style') {
    if (!this.unattachedDoc) {
        try {
            this.unattachedDoc =
                document.implementation.createHTMLDocument();
        }
        catch (e) {
            this.unattachedDoc = this.doc;
        }
    }
    const old = this.unattachedDoc.createElement('span');
    if (m.oldValue) {
        old.setAttribute('style', m.oldValue); //this is the problematic part
    }
    for (const pname of Array.from(target.style)) {
        const newValue = target.style.getPropertyValue(pname);
        const newPriority = target.style.getPropertyPriority(pname);
        if (newValue !== old.style.getPropertyValue(pname) ||
            newPriority !== old.style.getPropertyPriority(pname)) {
            if (newPriority === '') {
                item.styleDiff[pname] = newValue;
            }
            else {
                item.styleDiff[pname] = [newValue, newPriority];
            }
        }
        else {
            item._unchangedStyles[pname] = [newValue, newPriority];
        }
    }
    for (const pname of Array.from(old.style)) {
        if (target.style.getPropertyValue(pname) === '') {
            item.styleDiff[pname] = false;
        }
    }
}

Is there a workaround, or just my setup is wrong?

[linear]

JS-846 CSP inline style violation when loading Sentry

[chargome]

Hey @istvandanii thanks for reaching out! This is a known issue tracked here: #10481