This document requires 'TrustedHTML' assignment. The action has been blocked.

[JonWallsten]

Hi!
I'm having an issue getting CSP to work with our company library that uses Stencil.
I think we're using 4.19.x and I saw that the latest is 4.41.x, but I can't find any tickets that this has been resolved.
On the other hand it would be wierd if I'm the only one with the issue.
https://github.com/stenciljs/core/blob/8f9efc5570983ff4d03580f4000ae5f844e7f641/src/runtime/styles.ts#L87C19-L87C36

I get the This document requires 'TrustedHTML' assignment. The action has been blocked. error when I load my page.
I seems like it's not allowed to add the styles. I have added both the meta tag for nonce fallback, and I'm also called the setNonce() method. I can see that the plt.$nonce$ has the correct value. But the nonce is added the innerHTML is assigned, and it's not allowed to assing it. I guess it's two different issues though. Loading the actual style when it's added to the DOM required the nonce to be set on the element itself. But there is something else missing to allow the browser to add the content to the tag.
Is there a fix or workaround for this?

if (existingStyleElm) {
        // Update existing style element (for hydration or HMR)
        existingStyleElm.innerHTML = style;
      } else if (!appliedStyles.has(scopeId)) {
        styleElm = win.document.createElement('style');
        styleElm.innerHTML = style; <--- Issue here // This document requires 'TrustedHTML' assignment. The action has been blocked.

        // Apply CSP nonce to the style tag if it exists
        const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(win.document);
        if (nonce != null) {
          styleElm.setAttribute('nonce', nonce);
        }

[johnjenkins]

Hey @JonWallsten - sorry for your woes.
Sorry I don’t know of a fix, mainly because as you alluded, I haven’t heard that it’s an issue.
Appreciate something like this can be tricky to reproduce, but if you can put something together/ list out some steps, then perhaps we can look

[JonWallsten]

@johnjenkins: Thank you for your reply!
Since it's company code it's hard to just publish it. Also I'm not familiar to Stencil, I'm just a consumer of the library.
But in general, unless there is a policy added somewhere in Stencil, setting innerHTML is just prohibited when using require-trusted-types-for 'script'.
There is a related issue here:
#5206

Fixed with this commit:
8de2ab5

From what I can see when debugging it's a component that adds it's style as inline style to the document or head element.
I'm not sure if this is some setting or an implementation by the creator of the framework that causes it to happen.

[JonWallsten]

I will try to get some support from the Tegel framework engineers internally as well to see if I can get more info that might help you, help me.

[johnjenkins]

From looking at that block of Stencil's code, I think the style element in question is only used for components not using shadowDOM < does that apply to you?
In my head I'd think it would be fine to swap innerHTML with textContent - if you want to raise an issue I can raise a PR against and we can test

[JonWallsten]

I will check and get back to you!
I can open an issue since I have one written already.
So I don't have to rewrite everything.

[JonWallsten]

#6543