CSP and EditorTemplates in Grids

[Beatrice]

Hi everybody,

I'm using .net Core 3.1 and Kendo for Aspnetcore and I'm very happy so far with it.

But I have a question regarding the usage of Editor Templates in Kendo Grids in combination with an active CSP (inline scripts not allowed).

Using .Deferred() is already working to show my Grid, but I'm facing an issue when I try to use editor templates. Editor templates are not rendered because of a violation of the CSP.

Is there any way to edit lines in a Kendo Grid while inline-scripting is restricted by a CSP?

Thanks!

Beatrice

[Aleksandar]

Hi Beatrice,

You mentioned you are using .Deferred() and the editor templates are not rendering. I would assume that you have followed the guideline:

https://docs.telerik.com/aspnet-core/troubleshoot/troubleshooting-content-security-policy

and have any scripts related to the templates in a script element using nonce, is that correct?

Following the above guideline, I am able to Create a Grid with InLine editing and use a DropDownList as a custom EditorTemplate:

@(Html.Kendo().Grid <TelerikAspNetCoreApp262.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
        columns.Bound(p => p.Category).ClientTemplate("#=myTemplate(data)#");
        columns.Command(c => c.Edit());
    })
    .Pageable()
    .Editable(e=>e.Mode(GridEditMode.InLine))
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(m=>m.Id(i=>i.OrderID))
        .Read(read => read.Action("Orders_Read", "Grid"))
        .Update(read => read.Action("Orders_Update", "Grid"))
        )
    .Deferred()
)

<script type="text/javascript" nonce="kendoInlineScript">
    @Html.Kendo().DeferredScripts(false)
</script>
<script type="kendo-template" id="my-template" nonce="kendoInlineScript">
    #=Category.CategoryName#
</script>
<script nonce="kendoInlineScript">
    var myTemplate = kendo.template($('#my-template').html());
</script>

EditorTemplate:

@model TelerikAspNetCoreApp262.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
            .DataValueField("CategoryID")
            .DataTextField("CategoryName")
            .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)

Here is a screencast of the above configuration where you can see the Editor is rendered as expected. Attached to the answer is a sample application that you can review.

Regards,
Aleksandar
Progress Telerik

[Beatrice]

Hi Aleksandar, thanks for your answer. The sample application helped me a lot. It seems like the issue is related to the jquery version. When I'm using the https://kendo.cdn.telerik.com/2021.2.511/js/jquery.min.js (v1.12.4) everything works fine with your solution, but we updated to 3.5.1 (should be supported according to https://docs.telerik.com/kendo-ui/intro/supporting/jquery-support) because of vulnerabilities in older jquery versions. And when I'm switching to 3.5.1 it does not render the editor templates anymore (also in your sample application). Do you have any idea how to solve it?

[Aleksandar]

I was able to observe the issue when using jQuery v3.5.1 and we are looking into it. I will post back once a solution is available.

[Aleksandar]

The observed behavior appears to be related to the changes introduced with jQuery v3.1.1. I have logged an issue in our public repository here: 

https://github.com/telerik/kendo-ui-core/issues/6456

The behavior appears as the nonce statement is not affecting the initialization scripts of the widgets, used for initialization of the Editor Templates thus they are flagged as content violating the CSP policy.

If using jQuery v3.5.1 is mandatory I can suggest considering using Kendo UI for jQuery instead of the HTML Helpers until the issue is resolved, as in this scenario you can add a nonce to the script elements. If you desire to use the HTML Helpers you can use the jQuery version distributed with Telerik UI for ASP.NET Core or jQuery versions up to 2.2.4, until the issue linked above is resolved.