Content Security Policy issues: script and style - unsafe-inline

[Paul Wood]

In my project, I used Kendo Editor, Kendo DateTimePicker, Kendo Sortable and Kendo Upload. I want to apply the Content Security Policy for my site. And I met some problem about it.

According to the link: http://docs.telerik.com/kendo-ui/troubleshoot/content-security-policy, I have to use the 'unsafe-eval'.

But after I added the 'unsafe-eval', there still are errors about inline style, inline script and script URL. Please check the attached files.

After I added the 'unsafe-inline' to script-src and style-src, then all errors disappeared.

Just want to ask if the 'unsafe-inline' for script and style must be used for Kendo UI? Will Kendo UI support the strict Content Security Policy in the future?

[Tsvetina]

Hello Paul,

Do these errors occur in an MVC application using the UI for ASP.NET MVC wrappers? If so, the problem is expected. As explained here, the widget initialization scripts are rendered immediately after the widget declaration in the View, resulting in inline scripts. If this is the case, consider using the non-MVC Kendo UI widgets. 

Vanilla HTML/JavaScript Kendo UI widgets provide full control over the placement of the initialization scripts - server wrappers render the widgets' initialization scripts right after the widget's HTML output. Even if you use deferred initialization, the scripts are still kept in the View. When using plain (non-wrapper) Kendo UI widgets, you write the initialization scripts yourself and can move them to external script files.

As for supporting strict content security policy, this is not in the near-future planning for the Kendo UI library, as it would require completely reworking the templating engine and other changes in the framework. If you want, you can log it as a feature request in the feedback portal to let other developers vote for it as well.

Regards,
Tsvetina
Progress Telerik

[Paul Wood]

Hi Tsvetina,

Thanks for reply. I didn't use the MVC wrappers. I am using the external kendo widgets: kendo.all.min.js, kendo.common.min.css, kendo.default.min.css, kendo.default.mobile.min.css.

For the inline style error: I tried to load kendo.all.min.js to a page that never used it, there is still inline style error even after I added 'unsafe-eval' for script-src.

After I allowed unsafe-inline style, there is no error for the page only using the kendoSortable(), but there is js error for the pages using the other functions, like kendoEditor().

Thanks

[Tsvetina]

Hi Paul,

The unsafe-inline-related error could happen if you actually write your own script in the given page. I tried loading Kendo UI from local references and putting my JS into a separate local script file and all works well. You can find my test page attached to this message.
If you move the script from app.js into a script tag in index.html, it will start causing CSP errors.

Regards,
Tsvetina
Progress Telerik

[Natasa]

Hi, I am using KendoUI for AngularJS, I experience issues when removing unsafe-inline from style-src, for example I have kendo pallete instantiated with this html: <div id="palette" kendo-color-palette k-options="colorPalette" ng-model="color1">. This is working perfectly fine when 'unsafe-inline' is present in style-src CSP, but since we need to go with more strict CSP, after removing 'unsafe-inline', kendo color pallete does not load correctly since some inline styles are prevented from loading.

Attaching screenshots with and without unsafe-inline. Please advise, this is a major issue for our team.

[Aleksandar]

Hello Natasa,

Kendo UI Templates are used internally by Kendo widgets. Thus internally Kendo UI uses eval() calls as this is how templates work. Therefore, Kendo UI does not currently support strict CSP mode. If CSP mode is enabled for a Kendo UI application, the unsafe-eval keyword should be added as part of the meta tag used for enabling the CSP mode. You can read more on this in the documentation section below:

https://docs.telerik.com/kendo-ui/troubleshoot/content-security-policy

That said, we are aware of the issues this is causing and I can also suggest monitoring this Feature Request for further details on the matter:

https://feedback.telerik.com/kendo-jquery-ui/1359789-csp-support

Regards,

Aleksandar
Progress Telerik

[Natasa]

Hi, thank you for the quick response! Just to be clear I am aware that I have to use 'unsafe-eval', but here I am asking about 'unsafe-inline' for style-src tag. Please read carefully my previous answer and let me know if there is a workaround.

 

Thanks in advance! :)

[Aleksandar]

Hi Natasa,

To allow inline styles, 'unsafe-inline' a nonce-source that matches the inline-block can be specified. That said you can try specifying a nonce for the inline-style to allow for their rendering.

Regards,
Aleksandar
Progress Telerik