# Content Security Policy

This article describes how Telerik UI for Blazor conforms to [`Content-Security-Policy` (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) 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](https://www.telerik.com/blazor-ui/documentation/styling-and-themes/overview). These images are used for styled checkboxes and radio buttons, Slider ticks, and others.
* (optional) Allow `https://blazor.cdn.telerik.com` as a source when using [the Telerik CDN](https://www.telerik.com/blazor-ui/documentation/common-features/cdn) for styles or scripts.
* (optional) Allow `https://unpkg.com` as a source when using it as a <a href="https://www.telerik.com/design-system/docs/themes/get-started/introduction/#available-themes" target="_blank">CDN for styles</a>.
* When using the [ImageEditor](https://www.telerik.com/blazor-ui/documentation/components/imageeditor/overview), allow `worker-src 'self' blob:`. The component uses a pool of Web Workers for filters, color adjustments, blur, and pixelate operations to keep sliders and canvas gestures responsive. The worker script is part of `telerik-blazor.js` and starts from a Blob URL, so there is no additional file to deploy. When workers are not available, the ImageEditor runs the same operations on the main thread and produces identical results without an error.

### Legacy Settings

The following items concern older product versions:

* *(for versions 6.x)* Allow script evaluation (`'unsafe-eval'`), which is required by the [Spreadsheet](https://www.telerik.com/blazor-ui/documentation/components/spreadsheet/overview) for cell validation and formula compilation. If you don't use the Spreadsheet component in your Blazor app, you can [build a CSP compliant `telerik-blazor.js` file without the Spreadsheet](https://www.telerik.com/blazor-ui/documentation/knowledge-base/common-remove-components-from-telerik-blazor-js).
* *(up to version 4.6.0)* Allow `data:` URIs for `font-src` to use [font icons](https://www.telerik.com/blazor-ui/documentation/common-features/icons). Later versions use a separate file for the `WebComponentsIcons` icon font. This font file is referenced by the [font icon stylesheet](https://www.telerik.com/blazor-ui/documentation/common-features/icons#font-icon-stylesheet).
* *(up to version 4.4.0)* Allow `unsafe-eval` to use [Chart label templates](https://www.telerik.com/blazor-ui/documentation/components/chart/labels-template-and-format) and [Map templates](https://www.telerik.com/blazor-ui/documentation/components/map/overview#content-security-policy). These templates used to rely on `eval()`. Starting with version 4.5.0, the Chart and Map templates support a different template mechanism, which doesn't require `unsafe-eval`.

## Examples

The CSP policy directives below ensure that the Telerik Blazor components work as expected.

> caption CSP for Telerik UI for Blazor 16.0.0 with SVG icon support and without CDN

```HTML.skip-repl
<meta http-equiv="Content-Security-Policy" content="
      script-src 'self';
      style-src 'self' 'unsafe-inline';
      img-src 'self' data:;
      worker-src 'self' blob:;
" />
```

> caption CSP for Telerik UI for Blazor 16.0.0 with CDN and font icon support

```HTML.skip-repl
<meta http-equiv="Content-Security-Policy" content="
      script-src 'self' https://blazor.cdn.telerik.com https://unpkg.com;
      style-src 'self' 'unsafe-inline' https://blazor.cdn.telerik.com https://unpkg.com;
      img-src 'self' data:;
      font-src 'self' https://blazor.cdn.telerik.com https://unpkg.com;
      worker-src 'self' blob:;
" />
```