Content Security Policy
This article describes how Telerik UI for Blazor conforms to Content-Security-Policy
(CSP) and what policy configuration it may need.
Introduction
In general, a strict CSP can disable web app features, such as:
- Scripts, styles, and images from untrusted domains.
- Inline JavaScript in
<script>
tags and legacy DOM attributes such asonclick
. Blazor@onclick
directives work as expected. - Inline CSS in
<style>
tags andstyle
attributes. - Fonts and images that are embedded in stylesheets with
data:
URIs. - Dynamic code evaluation via
eval()
.
Policy Configuration
Telerik UI for Blazor components need the following exceptions to strict CSP. Some of them depend on the product version or product usage.
- Allow inline styles to use component parameters such as
Width
,Height
,RowHeight
,ItemHeight
,Top
,Left
, etc. In addition, some components rely on inline styles for their rich functionality and UX. - Allow
data
URIs for images that are embedded in the CSS themes. These images are used for styled checkboxes and radio buttons, Slider ticks, and others. - Allow
https://blazor.cdn.telerik.com
as a source when using the Telerik CDN for styles or scripts. -
(up to version 4.4.0 only) Allow
unsafe-eval
to use Chart label templates. These templates used to rely oneval()
. Since version 4.5.0, the Chart labels support a different template mechanism, which doesn't requireunsafe-eval
. -
(up to version 4.6.0 only) Allow
data
URIs forfont-src
to use font icons. Later versions use a separate file for theWebComponentsIcons
icon font. This font file is referenced by the font icon stylesheet.
Example
The CSP policy directives below ensure that the Telerik Blazor components look and work as expected. You can remove the Telerik domain or font-src
if you don't use our CDN or font icons.
CSP for Telerik UI for Blazor
<meta http-equiv="Content-Security-Policy" content="
script-src 'self' https://blazor.cdn.telerik.com;
style-src 'self' 'unsafe-inline' https://blazor.cdn.telerik.com;
img-src 'self' data:;
font-src 'self' https://blazor.cdn.telerik.com;
" />