Skip to content

bug: This document requires 'TrustedHTML' assignment. The action has been blocked. #6543

@JonWallsten

Description

@JonWallsten

Prerequisites

Stencil Version

4.19.2

Current Behavior

Please close this if it's already fixed. I cannot update to the latest version since the Stencil runtime code is bundled with the library I'm using.

I get the This document requires 'TrustedHTML' assignment. The action has been blocked. error when I load my application.
It's not allowed to call styleElm.innerHTML due to missing TrustedType policy.
I guess it should be using styleElm.textContent instead?
Is there a fix or workaround for this?

Reference to code:
https://github.com/stenciljs/core/blob/8f9efc5570983ff4d03580f4000ae5f844e7f641/src/runtime/styles.ts#L87C19-L87C36

Code:

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);
        }

Expected Behavior

I should be able to have require-trusted-types-for 'script' and still use Stencil.

System Info

System: node 24.11.1
Platform: windows (10.0.22631)
CPU Model: 13th Gen Intel(R) Core(TM) i7-13850HX (28 cpus)
Compiler: C:\Users\***\repo\business-apps\web-app\node_modules\@stencil\core\compiler\stencil.js
Stencil: 4.19.2
TypeScript: 5.4.5
Rollup: 2.56.3
Parse5: 7.1.2
jQuery: 4.0.0-pre
Terser: 5.31.1

Steps to Reproduce

  1. Implement @scania/tegel framework
  2. Add require-trusted-types-for 'script' to your content-security-policy header
  3. Load the page

Code Reproduction URL

N/A

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions