A strict CSP compatible setup.

[CxRes]

Is your feature request related to a problem? Please describe.

With a strict Content Security Policy, I am having trouble using Widgetbot, because the browser refuses to execute on account of:

1. eval
2. inline styles (injected using eval?)

My CSP header looks like this (mildly embellished for readability):

Content-Security-Policy: prefetch-src 'self'; script-src https://cdn.jsdelivr.net/ 'self'; style-src 'self'; img-src data: 'self' font-src data: 'self'; default-src 'none'; base-uri 'self'; frame-ancestors 'none'; trusted-types 'none'; require-trusted-types-for 'script';

Even after using the no-eval="true" attribute, the browser complains about injected styles.

Further, I tried adding the SHA for the injected style into the CSP header, but even after that there is no widget on screen. However, inspecting, I find an empty Widgetbot element like so:

<widgetbot-crate src="https://widgetbot.io" docs="docs.widgetbot.io"><crate></crate></widgetbot-crate>

Describe the solution you'd like

1. Wrap (what the browser considers) untrusted code in a TrustedType policy.
2. Publish guidance for those applying a CSP. For example, publishing no-eval option, a trusted-types policy name to add to headers etc.
3. Consider publishing styles as a separate file (or if you are doing so, documenting it).

Describe alternatives you've considered

I am not able to get no-eval to work (see above). Perhaps you might find a solution that does not require injecting styles into the page and thus obviating a CSP?

Additional context

Bonus: Please consider enabling a CSP for your own site (it is a good security practice, in general). My problems shall become immediately apparent to you.

[Yomanz]

Sorry for the delay, we are looking into this.

[CxRes]

@Yomanz Have you had a chance to make any progress on this issue?