Content Security Policy

If the strict Content-Security-Policy (CSP) mode is enabled, some browser features are disabled by default:

Inline JavaScript, such as <script> ... </script> or DOM event attributes like onclick, is blocked. All script code must reside in separate files, served from a whitelisted domain.
Dynamic code evaluation via eval() and string arguments for both setTimeout and setInterval are blocked.

Kendo UI uses eval() calls. This is how the Kendo UI templates work internally. Therefore, Kendo UI does not currently support the 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:

<meta http-equiv="Content-Security-Policy" content="script-src 'unsafe-eval' 'self' https://kendo.cdn.telerik.com;">

When Kendo widgets are initialized from Html helpers there are inline scripts that are automatically injected. When Content-Security-Policy (CSP) is enabled the following error will be thrown:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' 'self' https://kendo.cdn.telerik.com".

Solution

Use the Deferred initialization

@(Html.Kendo().PanelBar()
    .Name("IntroPanelBar")
    .Items(items =>
    {
    ...
    })
    .Deferred()
)

Render the initialization logic in a script using nonce

<script type="text/javascript" nonce="kendoInlineScript">
    @Html.Kendo().DeferredScripts(false)
</script>

Extend the Content-Security-Policy meta tag to include the unsafe-eval keyword and the nonce 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;">

Content Security Policy

See Also

Getting Started

Support Resources

Community