PrimeNG doesn't work with Content-security-Policies that enforce trusted-types

[gerjon-eatch]

Describe the feature you would like to see added

PrimeNG has multiple issues that make it incompatible with Content-security-Policies that enforce trusted-types. Most companies I work for have (for good reason) security policies in place that require a CSP that enforces trusted-types. That means, PrimeNG is not allowed to be used with such companies.

This has been reported before, see e.g this closed issue: https://github.com/primefaces/primeng/issues/11050

Mostly this is because PrimeNG makes assignments to innerHTML all over the code base. In most cases this could be replaced relatively easily with textContent (if it is just textual content that is assigned, also possyble for style elements).

Is your feature request related to a problem?

The problem is that PrimeNG is incompatible with a COntent-Security-Policy that enforces trusted-types.

Describe the solution you'd like

Make PrimeNG compatible witrh stricter security policies

Describe alternatives you have considered

No alternative

Additional context

No response

[rwilliamsBBM]

I'm using primeng version 14, and I get this issue in Chrome trying to use the pTooltip. Of course updating my current project to the latest version of primeng is part of the scope of my current project and my hope is that the issue will be fixed in the latest version. Quickly Perusing the latest source, it looks like it might still have the same 'TrustedHTML' issue if not using a template for the tooltip? Here's what I found in version 14. In the tooltip source file on or around line 220:

updateText() {
        if (this.getOption('escape')) {
            this.tooltipText.innerHTML = '';

            this.tooltipText.appendChild(document.createTextNode(this.getOption('tooltipLabel')));
        }
        else {
            this.tooltipText.innerHTML = this.getOption('tooltipLabel');
        }

I updated this to:

updateText() {
        if (this.getOption('escape')) {
            const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
                createHTML: (string) => string.replace(/>/g, "<"),
              });

            this.tooltipText.innerHTML = escapeHTMLPolicy.createHTML('');
            this.tooltipText.appendChild(document.createTextNode(escapeHTMLPolicy.createHTML(this.getOption('tooltipLabel'))));
        }
        else {
            this.tooltipText.innerHTML = this.getOption('tooltipLabel');
        }

And it now works in Chrome. But in the latest source I see (starting around line 386 of primeng/fesm2022/prime-tooltip.msj):

updateText() {
        const content = this.getOption('tooltipLabel');
        if (content instanceof TemplateRef) {
            const embeddedViewRef = this.viewContainer.createEmbeddedView(content);
            embeddedViewRef.detectChanges();
            embeddedViewRef.rootNodes.forEach((node) => this.tooltipText.appendChild(node));
        }
        else if (this.getOption('escape')) {
            this.tooltipText.innerHTML = '';
            this.tooltipText.appendChild(document.createTextNode(content));
        }
        else {
            this.tooltipText.innerHTML = content;
        }
    }

this.tooltipText.innerHTML = ''; is the problem in Version 14 and I appears to still currently be there in Beta?

I pulled down the latest version and tested in https in local, tooltip seems to be working as expected.

[rwilliamsBBM]

Update. Actual project upgraded to latest versions of Angular 16.xx and Prime NG 16.xx .

Running in local, simple text tooltips still throw the TrustedHTML error. Tooltips using templates work fine.

I pulled down the primeng code (16.7.2) and ran it in local both in http and https, in the samples the simple text tooltip seems to work, but in my project they do not (my project is now using 16.8.0).

While not a huge deal, having to use a template for pTooltip="Enter First Name" seems a little excessive, but I'm glad I at least have the option and the tooltips do work well...

I thought about fixing this and doing a pull request, but it's working in the sample project so I don't know if I'm just doing something wrong in my project?

[jfbarahonag]

Hi everybody.

I'm working with Angular V16 and OWASP ZAP scanner is reporting

Is the usage of PrimeNG the root of this alert?