TreeGrid throws 'unsafe-eval' error when Content Security Policy (CSP) is enabled

[Anthony]

I have found that when I enable Content Security Policy (CSP) in my Angular application, my TreeGrid doesn't load. When I check the browser console I see the error messages shown in the attached screenshot. If I disable CSP, by removing the CSP meta tag in my index.html, the TreeGrid loads successfully.

I have recreated the error in the following StackBlitz: https://stackblitz.com/edit/angular-8ntuw36w?file=index.html

In the StackBlitz, if you remove the CSP meta tag in the index.html, the TreeGrid will load. I need it to load with CSP enabled, just like other Syncfusion components.

Attachment: Screenshot_20250902_162103_6d158a8e.png

[Shek Mohammed Asiq Abdul Jabbar]

Hi Anthony,

Greetings from Syncfusion support.

We were able to replicate the issue using the sample you shared. The problem appears to be caused by the Content Security Policy (CSP) blocking external scripts used in Syncfusion/StackBlitz previews.

To resolve this, you can modify the server’s CSP header to allow specific domains. Please refer to the updated meta tag below:

<meta

      http-equiv="Content-Security-Policy"

      content="

    default-src 'self';

    style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';

    img-src 'self' data:;

    font-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ data:;

    script-src 'self' 'unsafe-eval';

  "

    />

 

Modified sample:

https://stackblitz.com/edit/angular-8ntuw36w-udrxzkjv?file=index.html

Local Sample for Reference:

https://drive.google.com/file/d/1zcJTMXGJR49brA6xGg9mQVAeYLzPKnIH/view?usp=sharing

To run the local sample, please follow these steps:

1. Run npm install
2. Run npm start

For more details, refer to the documentation below:

https://ej2.syncfusion.com/angular/documentation/common/troubleshooting/content-security-policy

If you need further assistance, please feel free to reach out.

Regards,

Shek

[Anthony]

Hi Shek:

This solution is not correct, based on Syncfusion's own documentation (https://ej2.syncfusion.com/angular/documentation/common/troubleshooting/content-security-policy#troubleshooting-csp-issues):

As you can see in your documentation, the requirement to use 'unsafe-eval' was supposed to have been eliminated in the 2023 Vol2 - 22.1 release because it is a security risk. I cannot use 'unsafe-eval' in the meta tag because of the security concerns.

[Anthony]

Please consider this issue to be closed. I have not resolved the issue on my end, but, the issue doesn't appear to be related to the TreeGrid.

[Shek Mohammed Asiq Abdul Jabbar]

Hi Anthony,

We are glad to know that the issue has been resolved. We will close this forum. Please contact us for further assistance.

Regards,

Shek