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 likeonclick
, is blocked. All script code must reside in separate files, served from a whitelisted domain. - Dynamic code evaluation via
eval()
and string arguments for bothsetTimeout
andsetInterval
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 or Tag 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;">
See Also
- Common Issues in Kendo UI
- JavaScript Errors
- Performance Issues
- Content Security Policy in Kendo UI
- Common Issues in Kendo UI Excel Export
- Common Issues in Kendo UI Charts
- Performance Issues in Kendo UI Widgets for Data Visualization
- Common Issues in Kendo UI ComboBox
- Common Issues in Kendo UI Diagram
- Common Issues in Kendo UI DropDownList
- Common Issues in Kendo UI Editor
- Common Issues in Kendo UI MultiSelect
- Common Issues in Kendo UI Scheduler
- Common Issues in Kendo UI Upload
- Common Issues Related to Styling, Appearance, and Rendering