Gives error without CSP style-src 'unsafe-inline'

[ilmartyrk]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases

Package + Version

• @sentry/browser

Version:

5.0.8

Description

While using example setup for angular, I get error
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src .... I tried adding nonce to the sentry script tag and also added sha256- from the error message but it still occured.

My setup was easy, followed instructions on your page.
https://docs.sentry.io/platforms/javascript/angular/#angularjs-1x -> used the standalone part.
Also added urls following your CSP :
https://forum.sentry.io/t/required-content-security-policy/4484 -> updated the script-src value to add https://browser.sentry-cdn.com

Error traces back to:
sentryWrapped | @ | helpers.ts:84
that is:
return fn.apply(this, wrappedArguments);

[HazAT]

So just to make clear, you fixed this by adding unsafe-inline?

[ilmartyrk]

Yes, that fixed it

[HazAT]

Since this isn't really a bug with the SDK I will close this issue. I hope people running into this will find the issue. Adding this to the docs is also not crystal clear since the solution heavily depends on your individual setup.

[ilmartyrk]

@HazAT, I'll try to find the cause of this problem and when I get my head around it, I'll post the info in here :)

[teriu]

I get the same error when I try to display the User Feedback Dialog! As a workaround, we're just going to load the CSS manually.

[hugmanrique]

A way to tell Sentry not to inline the CSS through a loadStyles param would be great to avoid this issue:

Sentry.showReportDialog({
  eventId: 0,
  loadStyles: false
});

[kamilogorek]

@hugmanrique this would have to be implemented inside Sentry itself first, as the SDK just includes a script which then creates an iframe. https://github.com/getsentry/sentry

[bendehghan]

This is a big issue for Chrome's push for manifest V3. Our chrome extension uses sentry. It's stitched throughout the code and we don't want to take it out. But with manifest V3 unsafe-inline is not an option. This really needs to be fixed and quickly since there is a deadline from Chrome.

[carlin-q-scott]

Adding unsafe-inline to a CSP is not safe. So I don't think this issue is resolved.

Google Maps SDK grabs a nonce from the first <style nonce="a-nonce-hash"> and uses it on it's own inline styles.

[tj-kev]

Is there any update on this? I have a strict CSP and adding unsafe-line should not be the solution. I am now reluctant to turn on CSP reporting to sentry as this will create a lot of entries.

[mydea]

For problems regarding CSP & Replay, please refer to newer issues (or create a new issue for it if no open issue matches it) - thank you! (for reference, I answered here: #6739 (comment))

[leonk]

I agree with #2020 (comment) this issue is not resolved, using 'unsafe-inline' should not be a solution.

I found there is similar issue to script-src, however this can be resolved using a hash, see #8925 (not ideal, but at least it's pretty secure).

I couldn't work out a way to do the same for style-src, so from what I can see 'unsafe-inline' must be used. But perhaps a hash or nonce solution could be provided?

[mydea]

@leonk can you open a new issue with details on what you are doing? What is your config, which SDK, ... what functionality are you using/calling, etc? For just basic functionality without replay compression you shouldn't need to add any CSP rules. Or if you are using sveltekit, please post more details into #8925.