Deployed application is challenging to configure with Content Security Policy due to use of inline styles

[drk-mtr]

I'm not sure I understand what's happening here so apologies if the title is misleading.

I've created some slides using slidev and deployed them as an Azure Static Web App. The slides work locally, but console errors are displayed for the deployed site.

The console error is:
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src https: 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

I think this error occurs because I have a Content Security Policy configured with the default-src https: 'self' value which is preventing inline styles.

I believe the line that causes it to throw this is here:

slidev/packages/client/internals/SlideContainer.vue

Line 62 in b2cfa78

useStyleTag(computed(() => `:root { --slidev-slide-scale: ${scale.value}; }`))

Which calls this: https://vueuse.org/core/useStyleTag/

Am I correct in thinking this could be blocked unless the content security policy allows unsafe-inline?

I wonder whether this would be a way to allow people to override the behaviour? #1775

Thanks for the brilliant library!

(As an aside, I believe Mermaid JS also uses inline styles that contravene this content security policy, but I imagine that's better raised in the Mermaid JS repo rather than here).