Content Security Policy
Content Security Policy (CSP) is a supplementary security approach which helps you detect and handle specific security attacks such as Cross-Site Scripting (XSS) and data-injection ones.
If the strict CSP mode is enabled, some browser features are disabled by default:
Inline JavaScript, such as
<script></script>
, or DOM event attributes, such asonclick
, are blocked. All script code must reside in separate files that are served from a white-listed domain.Dynamic code evaluation through
eval()
and string arguments for bothsetTimeout
andsetInterval
are blocked.
(For R1 2023 SP1 and Later) Working with Telerik UI for ASP.NET Core Components
As of R1 2023 release, the Kendo UI scripts address the unsafe-eval
directive for all components except for the Spreadsheet. For the bigger part of its core engine, the Kendo UI for jQuery Spreadsheet uses the Function
evaluation, and rewriting the logic of the component will lead to a great number of breaking changes.
The rest of the Kendo UI components and internal mechanisms have been completely rewritten to discard the usage of the eval()
and new Function()
calls.
When Kendo UI components are initialized from HTML helpers or Tag Helpers, inline scripts are generated automatically after each component HTML markup. When the CSP is enabled, you will get the following error:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self' https://kendo.cdn.telerik.com.
To resolve the issue and prevent the components from being dependent on the unsafe-eval
directive, the R1 2023 SP1 release introduces the following features:
Deferring Scripts to File
The DeferredScriptFile
method simulates loading the initialization scripts as a JS
file through middleware to ensure strict CSP compliance. You can either use the global deferred initialization functionality to configure all Telerik UI for ASP.NET Core components as deferred globally or defer each component separately by using the Deferred
method.
Call the method after all components declarations to serialize the deferred initialization scripts as a JS
file.
@Html.Kendo().DeferredScriptFile()
Creating Content Security Policy Templates
Most of the components support templating options, which use the Kendo UI Templates syntax, for example, Grid templates, DropDownList templates, and more. To avoid using the inline and external Kendo UI templates and remove the unsafe-eval
keyword from the meta
tag of your Telerik UI for ASP.NET Core application, you can define functional templates. For more information on the CSP-compatible templates, refer to the CSP-compatible templates section.
The example below demonstrates how to define a CSP-compatible client detail template of a Grid.
@(Html.Kendo().Grid<KendoGridClientHierarchy.Models.Category>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(product => product.CategoryID);
columns.Bound(product => product.CategoryName);
})
.Pageable()
.ClientDetailTemplateHandler("clientDetailTemplateHandler")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Categories_Read", "Home"))
)
)
@Html.Kendo().DeferredScriptFile()
@addTagHelper *, Kendo.Mvc
<kendo-grid name="grid" detail-template-handler="clientDetailTemplateHandler">
<columns>
<column field="CategoryID"/>
<column field="CategoryName"/>
</columns>
<pageable enabled="true"/>
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
<schema>
<model id="CategoryID">
<fields>
<field name="CategoryID" type="number"></field>
<field name="CategoryName" type="string"></field>
</fields>
</model>
</schema>
<transport>
<read url="@Url.Action("Categories_Read","Home")"/>
</transport>
</datasource>
</kendo-grid>
function clientDetailTemplateHandler(data) {
return `<p>${data.CategoryDetails}</p>`
}
function clientDetailTemplateHandler(data) {
return `<p>${data.CategoryDetails}</p>`
}
The engine for the inline and external templates will remain available. However, if you are using the previous template syntax, you must include the usafe-eval
directive in the meta
tag.
(Prior to R1 2023 SP1) Working with Telerik UI for ASP.NET Core Components
The Telerik UI for ASP.NET Core releases prior to the R1 2023 SP1 one does not support the strict CSP mode. Thus, in these previous versions, if the Content Security Policy (CSP) is enabled, you could set the script-src
policy as follows:
-
Defer the individual components:
@(Html.Kendo().PanelBar() .Name("IntroPanelBar") .Items(items => { ... }) .Deferred() )
<kendo-panelbar name="IntroPanelBar" deferred="true"> <items> ... </items> </kendo-panelbar>
-
Render the initialization logic in a script using
nonce
.<script type="text/javascript" nonce="kendoInlineScript"> @Html.Kendo().DeferredScripts(false) </script>
-
Extend the
meta
CSP tag to include theunsafe-eval
keyword and thenonce
signature for enabling the CSP mode:<meta http-equiv="Content-Security-Policy" content="script-src 'unsafe-eval' 'self' 'nonce-kendoInlineScript' https://kendo.cdn.telerik.com;">