Can you surpass Content Security Policy for kendo libraries without setting 'unsafe-inline/eval'?

[Thomas]

We are trying to update our React web app's Content Security Policy header to include default-src 'self'. This results in the web app failing, stating that the @progress/kendo-font-icons/dist/index.css style sheet refused to load. In other forum questions, similar issues have gotten the response to add 'unsafe-inline' or 'unsafe-eval' to the CSP configuration. This is a highly unsafe practice that would bring us out of compliance with our computer security service.

Is there any way to get Kendo stylesheets to work with CSP configurations without using unsafe-inline or unsafe-eval?

[Vessy]

Hello, Thomas,

You can use KendoReact stylesheets and components with a strict Content Security Policy (CSP) that does not include 'unsafe-inline' or 'unsafe-eval'. Here are the key steps and considerations:

• Import the precompiled CSS files for KendoReact themes directly in your project, rather than injecting them dynamically or using inline <style> tags.

• If you use Kendo Font Icons, ensure that the font files are served from an allowed source. Update your CSP to allow font loading with a rule like:

  font-src 'self' data:;
  

• Make sure the CSS referencing the fonts is loaded from a trusted, CSP-allowed source.

To enable the loading of font icons, allow 'data:' sources for font-src. You can aslo try allowing the https://kendo.cdn.telerik.com as a source for stylesheets:

<meta http-equiv="Content-Security-Policy"
    content="
        default-src 'self' https://demos.telerik.com;
        style-src-elem 'self' https://unpkg.com/@progress;
        style-src 'self'; 
        script-src 'self'; 
        font-src 'self' data:;
        img-src 'self' data:;
    "
/>

I hope the provided information will be helpful.

Regards,
Vessy
Progress Telerik