This is a migrated thread and some comments may be shown as answers.

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

7 Answers 1961 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Paul Wood
Top achievements
Rank 1
Paul Wood asked on 06 Jun 2017, 06:08 AM

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?

7 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 08 Jun 2017, 06:39 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Paul Wood
Top achievements
Rank 1
answered on 23 Jun 2017, 07:27 AM

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

0
Tsvetina
Telerik team
answered on 26 Jun 2017, 02:31 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Natasa
Top achievements
Rank 1
answered on 09 Dec 2020, 01:26 PM

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.

0
Aleksandar
Telerik team
answered on 11 Dec 2020, 09:06 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Natasa
Top achievements
Rank 1
answered on 11 Dec 2020, 09:14 AM

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! :)

0
Aleksandar
Telerik team
answered on 15 Dec 2020, 08:30 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Paul Wood
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Paul Wood
Top achievements
Rank 1
Natasa
Top achievements
Rank 1
Aleksandar
Telerik team
Share this question
or