Content-Security-Policy : Trusted Types

[tsaigne-simpliciti]

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?

Self-hosted/on-premise

Which SDK are you using?

@sentry/vue

SDK Version

9.2.0

Framework Version

Vue 3.5.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

Using Content Security Policy, we have an error occuring in Sentry SDK.

This document requires 'TrustedScriptURL' assignment.

It occurs on worker instanciation (see screenshot attached)
I traced back to the ts source code sentry-javascript/packages/replay-internal/src/eventBuffer/index.ts

(on the screenshot there are 2 affected resources, one is sentry, the other is vuetify)

This is something that has been done about that in vue, with this PR : vuejs/core#10844
It's about setting an element innerHTML but the part about creating a policy is similar.

Extracts :

// creates the policy
    policy = /*#__PURE__*/ tt.createPolicy('vue', {
      createHTML: val => val,
    })

// define a method to use the policy if exists
const unsafeToTrustedHTML: (value: string) => TrustedHTML | string = policy
  ? val => policy.createHTML(val)
  : val => val

// safe usage to set innerHTML
templateContainer.innerHTML = unsafeToTrustedHTML(the value)

Steps to Reproduce

Adding a CSP HTTP header on the server

Exemple :

Header set content-security-policy-report-only "\
    script-src 'self' https://{sentry-endpoint}; \
    require-trusted-types-for 'script'; \
    trusted-types default vue; \
    worker-src 'self' blob: ; \
    object-src 'none'; \
    connect-src 'self' https://{sentry-endpoint}; \
    img-src 'self' \
    blob: data: ; \
    style-src 'self'  "

Thank you for your time.

Expected Result

No CSP error

Actual Result

CSP Error : This document requires 'TrustedScriptURL' assignment.

[mydea]

Hello,

you can follow these docs to avoid the inlined compression worker, which should get rid of this warning:
https://docs.sentry.io/platforms/javascript/guides/vue/session-replay/configuration/#using-a-custom-compression-worker

(Or you can configure replayIntegration({ useCompression: false }) to disable compression, but this will result in larger payloads being sent over the network).

I'm going to close this issue, feel free to re-open it if the problem persists!