ERROR EvalError: Content Security Policy

Question

Hello Syncfusion Support,I want to use the ejs-multiselect component with custom text like this.<ejs-multiselect  ...  [selectAllText]="'select all custom'"  [unSelectAllText]="'un select all custom'">ejs-multiselect>Unfortunately I run into the following error:ERROR EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'".With adding 'unsafe-eval' to the CSP script-src I get it to work. But

'unsafe-eval' is like the word itself says unsave and evil :)Do you have a solution for this error without opening the CSP? RegardRenéAttachment: syncfusionmultiselectcsp_23615dee.zip

UdhayaKumar Duraisamy · Answer

Hi René,We
have recreated a sample based on the shared project. Unfortunately, we couldn’t
reproduce the reported issue. We have attached the recreated sample below and
we request you modify the sample. Which will help us to validate the issue
further and provide you with a better solution.Sample
: https://stackblitz.com/edit/angular-41nldv?file=app.component.html,app.component.tsRegards,Udhaya Kumar D

René Fabel · Answer

Helloyou have to add a content security policy (CSP) in html headers like I did in the example.<meta      http-equiv="Content-Security-Policy"      content="default-src 'self' 'unsafe-inline';               script-src 'self' 'unsafe-inline';               img-src 'self' data:;               font-src 'self' data: https://fonts.gstatic.com;               style-src-elem 'self' 'unsafe-inline' https://fonts.googleapis.com;               "    />https://stackblitz.com/edit/angular-41nldv-ichxrq?file=app.component.html,index.html RegardsRené

René Fabel · Answer

You can find more info about content security police is here:

https://web.dev/csp/

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

To get my sample to work just write npm intall && npm start in console.

If you remove the selectAllText and unSelectAllText from the template the sample works.

UdhayaKumar Duraisamy · Answer

Hi René,Syncfusion
EJ2 components will not require “unsafe-eval” if it is used without the Template
feature. But, if we use Template in our application with EJ2 components, we
need to include “unsafe-eval” since the template is compiled and included using eval
or new Function.  Regards,Udhaya Kumar D.

René Fabel · Answer

Hello Udhaya,you dont have any plans to rewrite you components? "unsafe-evel" is from security perspective hard to acceptable.RegardsRené

UdhayaKumar Duraisamy · Answer

Hi René,We
are validating the requirement. We will update the further details in two
business days (3rd June 2022).Regards,Udhaya Kumar D.

UdhayaKumar Duraisamy · Answer

Hi René,We have considered the reported issue
as a bug from our end and will be fixed in our June 21st patch
release. You can track the status of the issue by the below feedback link.Feedback Link : https://www.syncfusion.com/feedback/35436/getting-csp-error-in-multiselect-with-template-is-used
Disclaimer: “Inclusion of this solution in the weekly
release may change due to other factors including but not limited to QA checks
and works reprioritization.”Regards,Udhaya Kumar D.

René Fabel · Answer

Hello,I get access denied when I want to follow the provided link.Regards,René

UdhayaKumar Duraisamy · Answer

Hi René,Sorry for the inconvenience caused.Now you can access the feedback.Regards,Udhaya Kumar D.

UdhayaKumar Duraisamy · Answer

Hi René,We are
facing complexity to resolve this issue. We will include it in Vol-2 2022 main
release. The Vol-2 2022 will be released at end of June. Sorry for the
inconvenience caused on your end.Regards,Udhaya Kumar D.

René Fabel · Answer

Hello Udhaya Kumar,thank you for the update.RegardsRené

UdhayaKumar Duraisamy · Answer

Hi René,When using ej2 JavaScript
components with a strict Content-Security-Policy (CSP) mode enabled, some
browser features are disabled. Since we’re using the following browser
features, they are disabled by default.Syncfusion component uses
base64 as a font icon and it is not allowed in strict CSP enabled site. To overcome
this, it’s necessary to add the font-src data: in the meta tag.For the built in themes and
styles, we use the inline styles and Roboto’s external font, which is also
blocked. To allow them style-src ‘self’ unsafe-inline must be included in the
meta tag.The new() and the eval() are
blocked, which evaluates the Dynamic code evaluation while only the template is
applied to the Syncfusion components. You must utilize the script-src ‘self’
unsafe-eval in the meta tag for enabling.So, we recommend you to use
the meta tag mentioned in the below documentation.Documentation: https://ej2.syncfusion.com/javascript/documentation/common/Troubleshoot/content-security-policy/#content-security-policy
Regards,
Udhaya Kumar D.

UdhayaKumar Duraisamy · Answer

Hi René,Please find the sample below, Sample Link: https://stackblitz.com/edit/angular-41nldv-vrqacg?file=app.component.html,index.htmlRegards,Udhaya Kumar D

Paulo Lima · Answer

Hello Udhaya Kumar D,If I understand correctly, can I confirm that version 20.1.57 of @syncfusion/ej2-angular-richtexteditor solves the issues concerning unsafe-eval?Regars,Paulo Lima

UdhayaKumar Duraisamy · Answer

Hi Paulo,Greetings from Syncfusion support.We have included the fix for the issue "Content security issue on Rich Text Editor toolbar" with our patch release version 20.1.48 (feedback link). So please upgrade your package to the latest to resolve the issue from your end. If you still facing the same error, We have suggested you use the below solution in the meta tag as provided below and revert us whether the issue still occurs after applying the below solution.Regards,Udhaya Kumar DIf this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.