Kendo and CSP. got error "This document requires 'TrustedHTML' assignment."

[Levon]

How to deal with strict rules at Content security policy are.

Using Angular 20 and Kendo 20 Version. 
Currently just importing "CheckBoxModule" (only) in NgModule of application got error in console

This document requires 'TrustedHTML' assignment.
Uncaught TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment

When removing the error disappear and application works.

[Zornitsa]

Hi Levon,

I performed some testing and was able to reproduce the described error message ("This document requires 'TrustedHTML' assignment") only when I enabled the require-trusted-types-for 'script' directive in the application. In general, this setting enforces the use of Trusted Types for DOM updates that involve HTML, such as assignments to innerHTML.

After additional troubleshooting, the error seems to also reproduce in a standalone Angular application with the require-trusted-types-for 'script' directive set, and when importing the KENDO_CHECKBOX (or KENDO_INPUTS) utility array.

On that note, it appears that the error is not directly related to the Kendo UI for Angular packages, but it emerges from the @progress/kendo-drawing package, which is a dependency of the Kendo UI for Angular Inputs:

• https://www.telerik.com/kendo-angular-ui/components/inputs/installation/dependencies-and-utils#kendo-angular-inputs-dependencies

This means that the error also emerges when importing any other Kendo UI for Angular package in the project, which depends on @progress/kendo-drawing (e.g., KENDO_GRID, KENDO_CHARTS).

With the above being said, I logged the following bug report in our public GitHub repository:

• https://github.com/telerik/kendo-angular/issues/4727

Feel free to subscribe to the above issue in order to stay notified of any updates regarding the resolution process of this bug. The issue can be used for tracking purposes, as it will be updated when there is any progress on the kendo-drawing bug. 

As a small token of gratitude for reproting this bug, I have updated the Telerik points of your account.

I hope the provided information clears up the matter.

Regards,
Zornitsa
Progress Telerik

[Levon]

Thank you very much for reviewing the mentioned issue deeply. 
I would like to be informed about estimation/version fix would included.

[Zornitsa]

Hi Levon,

I am happy to announce that a fix for the discussed bug has been released in v1.22.2 of the @progress/kendo-drawing package.

The version with the fix has been tested locally, and the CSP error no longer emerges. Feel free to test it out on your side as well, and see whether the error is now resolved.

Regards,
Zornitsa
Progress Telerik

[Levon]

Sorry, cannot aprove still got same error a bunch of This document requires 'TrustedHTML' assignment. while using (in m example) kendo grid.

here are header for CSP

default-src 'none';
font-src 'self';
script-src 'nonce-our-value' 'strict-dynamic' 'report-sample';
style-src 'nonce-our-value';
img-src 'self';
frame-src 'none';
frame-ancestors 'none';
connect-src 'self' our-domain.com;
object-src 'none';
base-uri 'self';
upgrade-insecure-requests;
require-trusted-types-for 'script';
trusted-types angular;



Is there anything extra needed o be setted up in kendo area?

[Levon]

I wonder, does Kendo (KendoAngular)  fully supports strict CSP/Trusted Types?

[Zornitsa]

Hi Levon, 

I tested the `require-trusted-types-for 'script'; trusted-types angular;` CSP configuration in the attached project using v1.22.2 of the @progress/kendo-drawing package, and I was unable to observe any "This document requires 'TrustedHTML' assignment" errors when importing KENDO_GRID (or GridModule) in the project.

With the above being said, can you please provide an isolated runnable example with your setup and the particular CSP configuration where the described error is still reproduced when using v1.22.2 of the @progress/kendo-drawing package and importing the Grid? This will help me further troubleshoot the configuration and provide more valuable assistance on the matter. 

As for your additional inquiry, in general, the Kendo UI for Angular components comply with the strict CSP standards:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP#strict_csp

The below article explains in more detail the CSP compliance of the Kendo UI for Angular components and the existing limitations:

• https://www.telerik.com/kendo-angular-ui/components/troubleshooting/csp

Please check out the attached project and let me know if I am missing something. 

Regards,
Zornitsa
Progress Telerik

[Levon]

Here is replicatable project.
take a look at Readme.md whre steps are described.

 

[Zornitsa]

Hi Levon, 

Thank you for taking the time to create a project for the reproduction of the errors.

Indeed, I was able to observe the errors in the attached project and identified that they do come from the internal logic of the Grid component. In this line of thought, I further discussed this matter with our development team, and below I will clarify our current internal implementation and the outcome of the discussion.

Current Implementation

To be more comprehensive, the logic for our Kendo UI for Angular components uses innerHTML in specific scenarios, including setting placeholder content during virtualization and dynamic content rendering for icons, indicators, and other UI elements.

Nevertheless, I want to assure you that the content set via innerHTML is entirely controlled and generated by our components. We only use safe, predefined HTML entities and markup (such as  ) that are guaranteed to be secure and pose no XSS risk.

Next Steps

With the above being said, we will make sure to update our CSP compliance article to explain our safe use of innerHTML, clarify that our internal content is secure, and offer guidance for Trusted Types integration.

Furthermore, we recognize that full Trusted Types support would provide the best developer experience for applications with strict security requirements. Thus, I logged the following feature request regarding this matter and upvoted it on your behalf:

• https://feedback.telerik.com/kendo-angular-ui/1702012-trusted-types-support-for-kendo-ui-for-angular

You can track the progress of the feature request by following the linked Feedback Portal item.

With the above enhancement, we will research and implement the best approach to provide Trusted Types compliance. This may include using Angular's DomSanitizer service to mark our internal content as trusted via the respective methods and evaluating whether we can replace innerHTML usage:

• https://angular.dev/best-practices/security#trusting-safe-values

As of now, to use our components in an environment with a strict Trusted Types policy, what I can suggest is adjusting the application's CSP to allow the necessary operations for our components to function properly. Alternatively, the developer may create a Trusted Types policy that allows our controlled innerHTML usage:

• https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API#the_default_policy

We understand this requires additional configuration on your side, and we apologize for the inconvenience caused. We appreciate your feedback since it helps us improve the quality of our components. As a small token of gratitude for your feedback, I have updated the Telerik points of your account.

Let me know if you have any additional questions on this matter.

Regards,
Zornitsa
Progress Telerik

[Levon]

Thanks for this kind of deep evolving into context of the mentioned question.

Will follow the logged feature request.

My regards