Content Security Policy
This article describes how the Kendo UI for Angular suite conforms to string Content Security Policy (CSP) and what policy configuration it may need.
Strict Content Security Policy(CSP) and What it Affects?
If a strict CSP mode is enabled, some browser features are disabled, such as:
- Inline JavaScript in the form of
<script>
tags or legacy DOM attributes such asonclick
, are blocked. All script code must live in separate files, served from a whitelisted domain. - Inline CSS in the form of
<style>
tags andstyle
attributes. - Fonts and images from Base64
data:
portions in stylesheets. - Dynamic code evaluation via
eval()
.
Policy Configuration
These limitations can affect the Kendo UI for Angular components, because they need the following:
-
To enable the loading of font icons, allow
'data:'
sources forfont-src
. Sincev14.0.0
introduced in the R3 2023 (October 2023) release Kendo UI for Angular components use SVG icons by default. -
If you use our CDN, you must also allow it as a source for stylesheets.
html<meta http-equiv="Content-Security-Policy" content=" style-src 'self' 'unsafe-inline' https://kendo.cdn.telerik.com; style-src-elem 'self' 'unsafe-inline' https://kendo.cdn.telerik.com; font-src 'self' data:; img-src 'self' data:" />
-
Allow
'unsafe-inline'
forstyle-src
to enable Angular components to load encapsulated styles when using the Editor in encapsulated mode. -
Allow
'unsafe-eval'
forscript-src
when using the Spreadsheet component. The primary engine of the Kendo UI for Angular Spreadsheet relies on evaluating functions using theFunction()
method. Modifying the component's logic would result in many significant breaking changes. The rest of the Kendo UI for Angular components and internal processes have been redesigned to eliminate the need foreval()
andnew Function()
calls.
A sample application is available on the Kendo UI for Angular public GitHub repo.
To enable CSP, your application needs to use Ahead of Time Compilation (AOT). The Just-in-Time (JIT) compiler is not suitable as it generates dynamic scripts at runtime.