Kendo widgets does not work when CSP is enabled - security

Question

I have ASP.NET Core application and i am using Telerik's UI for ASP.NET Core framework for certain widgets like Date, DropDownList, Charts etc.
Application is loading all javascripts, images, css from its own server. So i have enabled CSP policy as below
script-src 'self' 'unsafe-eval';
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
font-src 'self';
media-src 'none';
object-src 'none';
child-src https://xxxx.yyyy.com;
report-uri http://myapplication/csp/report;
However when the page load i see error in chrome's console
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'self' 'unsafe-eval'".
Either the 'unsafe-inline' keyword, a hash
('sha256-oii70XYoqukWS9204nbwatxgYOYcr06+rftc4egdfUk='), or a nonce
('nonce-...') is required to enable inline execution
this error is repeated for several Kendo widgets that i'm using on that page. For example date widget. In cshtml i have configured date as below
#(Html.Kendo().DatePicker()
.Name("sbDate")
.HtmlAttributes(new { #class = "mydate" }))
which gets render in html as
<input class="mydate" id="sbDate" name="sbDate" type="date" value="" /><script>jQuery(function(){jQuery("#sbDate").kendoDatePicker({"format":"M/d/yyyy","footer":false});});</script>
I have already gone through Telerik's suggestion here and here for CSP. And as per the suggestion i only i have to add unsafe-eval to get widgets working. However looks like that is not true. I also have to add unsafe-inline to get widgets working.
But the whole point of enabling CSP is to not allow inline scripts.
Questions
Is there any way to solve this issue?
Update 1
Widgets only works in IE 11 without adding unsafe-inline. In chrome and IE edge widget requires unsafe-inline to work.

Answer 1

The solution below might work (i have not tried yet)
1> Add Deferred method for each kendo widget. Like
#(Html.Kendo().DatePicker().Name("BeginDate").Deferred())
2> In each view that is using Kendo control, at the bottom add the script tag
<script asp-add-nonce="true">
#Html.Kendo().DeferredScripts(false)
</script>
Note that asp-add-nonce is not out of the box from asp.core. You have to install Joonasw.AspNetCore.SecurityHeaders nuget library. I found this article from the author that shows how to configure CSP for .net core application and also how to generate new nonce for each request.
3>Dont configure CSP policy in web.config because we need different nonce value for each request, instead configure the CSP policy using Joonasw.AspNetCore.SecurityHeaders middleware as mentioned in the article.
4>I thinks we don't need to add unsafe-inline if we use random nonce (unless you are targeting to older browsers)

Answer 2

I can't really tell if this would solve your issue, but in our Application, we are using the Deferring feature, but for other reasons. Our reason is that we load all scripts (esp. jquery.js) at the end of the page. But the side effect is that no jQuery script calls are rendered into the page anymore. You can control the place to generate all scripts by executing #Html.Kendo().DeferredScripts() (but you will find more help in the docs above). Anyway, probably in the context of CSP, even that <script> block at the very end of the page is still considered "inline". But give it a try.