sentry-javascript: CSP inline style errors using the loader
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 :}
About this issue
- Original URL
- State: open
- Created 5 months ago
- Comments: 15 (6 by maintainers)
Yup, keeps happening at
webpack-internal:///(app-pages-browser)/node_modules/@sentry/replay/esm/index.jsLINE 2051:I also have strict CSP in place, with nonce calculated and added to request as
X-Nonceheader, which can easily be fetched and applied to inline scripts.This issue occurs when mutations.js finds an existing inline style but doesn’t reapply the nonce:
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 - PRs are welcome! Loader script here: https://github.com/getsentry/sentry-javascript/blob/develop/packages/browser/src/loader.js