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 as onclick. Blazor @onclick directives work as expected.
• Inline CSS in <style> tags and style attributes.
• Fonts and images that are embedded in stylesheets with data: URIs.
• Dynamic JavaScript code evaluation with 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 ('unsafe-inline') 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 (data:) for images that are embedded in the CSS themes. These images are used for styled checkboxes and radio buttons, Slider ticks, and others.
• (starting from version 6.0.0) Allow script evaluation ('unsafe-eval'), which is required by the Spreadsheet for cell validation and formula compilation. If you don't use the Spreadsheet component in your Blazor app, then check section Build CSP Compliant telerik-blazor.js below.
• Allow https://blazor.cdn.telerik.com as a source when using the Telerik CDN for styles or scripts.

The following items concern older product versions:

• (up to version 4.4.0) Allow unsafe-eval to use Chart label templates. These templates used to rely on eval(). Since version 4.5.0, the Chart labels support a different template mechanism, which doesn't require unsafe-eval.
• (up to version 4.6.0) Allow data: URIs for font-src to use font icons. Later versions use a separate file for the WebComponentsIcons icon font. This font file is referenced by the font icon stylesheet.

Example

The CSP policy directives below ensure that the Telerik Blazor components 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 6.2.0

<meta http-equiv="Content-Security-Policy" content="
      script-src 'self' 'unsafe-eval' 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;
" />

Build CSP Compliant telerik-blazor.js

If strict CSP compliance is a hard requirement and your Blazor app is not using the Spreadsheet component, then you can rebuild the telerik-blazor.js file without the Spreadsheet component.