Skip to content

[7.0.0] docs(common): Update CSP documentation #2455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 24, 2024
Merged

[7.0.0] docs(common): Update CSP documentation #2455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -673,10 +673,10 @@ baseurl: /blazor-ui
enable_blazorRepl: true

## Latest UI for Blazor version. Used in some articles
uiForBlazorLatestVersion: "6.2.0"
uiForBlazorLatestVersion: "7.0.0"

## Compatible theme version for CDN URLs
themesVersion: "8.2.1"
themesVersion: "9.1.0"

## Product
product: "Telerik UI for Blazor"
Expand Down
33 changes: 22 additions & 11 deletions troubleshooting/csp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,31 +28,42 @@ Telerik UI for Blazor components need the following exceptions to strict CSP. So

* 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]({%slug themes-overview%}). 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]({%slug spreadsheet-overview%}) 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](#build-csp-compliant-telerik-blazorjs) below.
* Allow `https://blazor.cdn.telerik.com` as a source when using [the Telerik CDN]({%slug common-features-cdn%}) for styles or scripts.
* (optional) Allow `https://blazor.cdn.telerik.com` as a source when using [the Telerik CDN]({%slug 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>.

### Legacy Settings

The following items concern older product versions:

* *(up to version 4.4.0)* Allow `unsafe-eval` to use [Chart label templates]({%slug components/chart/label-template-format%}). 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`.
* *(for versions 6.x)* Allow script evaluation (`'unsafe-eval'`), which is required by the [Spreadsheet]({%slug 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]({%slug common-kb-remove-components-from-telerik-blazor-js%}).
* *(up to version 4.6.0)* Allow `data:` URIs for `font-src` to use [font icons]({%slug common-features-icons%}). Later versions use a separate file for the `WebComponentsIcons` icon font. This font file is referenced by the [font icon stylesheet]({%slug common-features-icons%}#font-icon-stylesheet).
* *(up to version 4.4.0)* Allow `unsafe-eval` to use [Chart label templates]({%slug components/chart/label-template-format%}). 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`.

## Example
## Examples

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.
The CSP policy directives below ensure that the Telerik Blazor components work as expected.

>caption CSP for Telerik UI for Blazor {{site.uiForBlazorLatestVersion}}
>caption CSP for Telerik UI for Blazor {{site.uiForBlazorLatestVersion}} with SVG icon support and without CDN

<div class="skip-repl"></div>

````HTML
<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;
script-src 'self';
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
font-src 'self' https://blazor.cdn.telerik.com;
" />
````

## Build CSP Compliant telerik-blazor.js
>caption CSP for Telerik UI for Blazor {{site.uiForBlazorLatestVersion}} with CDN and font icon support

<div class="skip-repl"></div>

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]({%slug common-kb-remove-components-from-telerik-blazor-js%}).
````HTML
<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;
" />
````
Loading