Skip to content

1018099: Updated csp documentation to reflect our strict csp implemen… #8005

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

Open
Athiswaran-SF3980 wants to merge 3 commits into
base: hotfix/hotfix-v33.1.44
Choose a base branch
from
Open

1018099: Updated csp documentation to reflect our strict csp implemen… #8005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5537bcb
1018099: Updated csp documentation to reflect our strict csp implemen…
Athiswaran-SF3980 Mar 26, 2026
f83fa15
1018099: Updated csp documentation to reflect our strict csp implemen…
Athiswaran-SF3980 Mar 26, 2026
9012dad
1018099: Updated csp documentation to reflect our strict csp implemen…
Athiswaran-SF3980 Mar 26, 2026
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
16 changes: 3 additions & 13 deletions blazor/circular-gauge/content-security-policy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Circular Gauge Strict CSP Feature Limitations

The Syncfusion® Blazor **Circular Gauge** component supports **strict CSP** for its core functionality, allowing most default operations such as rendering axes, ticks, labels, ranges, pointers, annotations, legends, tooltips, and multiple axes—without requiring `'unsafe-inline'` in the `style-src` directive.
The Syncfusion® Blazor **Circular Gauge** component supports **strict CSP** for its core functionality, allowing most default operations such as rendering axes, ticks, labels, ranges, pointers, annotations, legends, tooltips, and multiple axes without requiring `'unsafe-inline'` in the `style-src` directive.

However, animation-related features rely on dynamic runtime style manipulations (likely involving inline styles or CSS transitions applied via JavaScript) to achieve smooth sequential rendering effects, which are blocked under a fully strict CSP configuration.

Expand All @@ -19,7 +19,7 @@ This document outlines the specific animation features that require the `style-s

The following features in the Circular Gauge currently **require** `style-src 'unsafe-inline'` to function correctly:

**[Animation Features](./animations.md)**
**[Animation Features](./animations)**
All animation capabilities, controlled primarily via the `AnimationDuration` property (on the `SfCircularGauge` component) and optionally via `CircularGaugePointerAnimation` for individual pointers, depend on dynamic inline styles or style injections for smooth transitions.
When animation is enabled (`AnimationDuration > 0`), the component animates elements sequentially: axis line → ticks and labels → ranges → pointers → annotations. Pointers can have individual animation durations.
Disabling animation (default: `AnimationDuration = 0`) renders the gauge instantly without transitions.
Expand All @@ -45,8 +45,6 @@ Use this configuration when animation is not required (or can be disabled by set
upgrade-insecure-requests;">
```

>This policy ensures full strict CSP compliance for the Circular Gauge's primary visualization and data representation capabilities.

### Relaxed CSP Configuration (Full Feature Enabled)

Include 'unsafe-inline' in style-src to enable animation features:
Expand All @@ -64,12 +62,4 @@ Include 'unsafe-inline' in style-src to enable animation features:
upgrade-insecure-requests;">
```

> Use this configuration only when smooth loading animations or pointer-specific animations are essential to your application. This maintains strong overall protection while permitting the dynamic styling needed for animations.


### Future Improvements
- The security limitation related to the Notes field (Rich Text Editor formatting) will be addressed in future weekly security patch releases.

- Syncfusion® is actively working toward full strict CSP compatibility across all features of the Gantt Chart component, with the goal of eliminating the need for **'unsafe-inline'** entirely.

- Track the latest **Syncfusion® Blazor release notes and weekly patches for CSP-related updates and announcements.
>**Note:** Use this configuration only when smooth loading animations or pointer-specific animations are essential to your application. This maintains strong overall protection while permitting the dynamic styling needed for animations.
163 changes: 26 additions & 137 deletions blazor/common/content-security-policy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@ Syncfusion® Blazor components now offer improved support for strict **Content S

Now we have introduced **strict CSP compatibility** for **over 80 components**. Default functionalities across these components now operate seamlessly under a strict CSP configuration without requiring unsafe directives such as `'unsafe-eval'` or `'unsafe-inline'` in many scenarios.

This enhancement allows developers to enforce modern, secure browser policies more easily while retaining full component capabilities in Blazor Server, WebAssembly, and hybrid (Auto) render modes.
This enhancement allows developers to enforce modern, secure browser policies more easily while retaining full component capabilities in Blazor Web App (any render mode: Server, WebAssembly, or Auto) and Wasm standalone app.

### Recommended CSP Directives for Strict CSP implemented Syncfusion® Blazor Components

The following CSP configurations are **tested and recommended** for Syncfusion® Blazor components that support strict CSP (Refer Supported list below).
The following CSP configurations are **tested and recommended** for Syncfusion® Blazor components that support strict CSP.

#### For Blazor Interactive Server App

Expand Down Expand Up @@ -62,136 +62,43 @@ The following CSP configurations are **tested and recommended** for Syncfusion®
```
> **Note:** The [wasm-unsafe-eval](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src#unsafe_webassembly_execution) source expression is mandatory for Blazor WebAssembly and Blazor Web App applications, as it enables the browser to compile and execute WebAssembly modules required by the Blazor Mono runtime on the client. Without this directive, modern browsers will block WebAssembly execution, preventing the Blazor runtime from initializing correctly.

If your application includes Syncfusion® components that are not explicitly marked as Strict CSP implemented, you must include the **style-src 'unsafe-inline' directive** in your Content Security Policy.

Refer to the list of supported components to verify Strict CSP compatibility. We have also outlined the features that currently require additional CSP directives.

### Component Categories Overview

Below is an updated overview highlighting CSP compliance status based on the latest verification:

>**Important:** HTMLAttribute/InputAttributes Parameter Limitations Under Strict CSP
When using a strict Content Security Policy (CSP), support for inline style attributes is not currently available. Support for inline style attributes will be added in a future weekly patch release.
Please refer to upcoming Syncfusion® release notes for updates.



### Data Management

| Fully Strict CSP Compliant | HTML Attributes (Style Attributes Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
| DataGrid, Pager, Tree Grid, DataForm, Query Builder | ListView | [Pivot Table](../pivot-table/content-security-policy) |

---


### Scheduling & Calendars

| Fully Strict CSP Compliant | HTML Attributes (Inline Styles Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
| Scheduler, Calendar | DatePicker, DateRangePicker, DateTime Picker, TimePicker | [Gantt Chart](../gantt-chart/content-security-policy) |

---


### File Viewers & Editors & File Management

| Fully Strict CSP Compliant | HTML Attributes (Inline Styles Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
| File Upload | Imageditor |- |

---


### Layout Components

| Fully Strict CSP Compliant | HTML Attributes (Inline Styles Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
| Dashboard Layout, Timeline, Avatar, Media Query | Dialog, Predefined Dialog, Splitter, Tooltip | - |

---

### Notifications

| Fully Strict CSP Compliant | HTML Attributes (Inline Styles Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
|Toast, Spinner, Message, Skeleton, ProgressBar, Badge | - | - |

---

### Data Visualization, Diagram and Maps

| Fully Strict CSP Compliant |HTML Attributes (Inline Styles Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
| BarcodeGenerator, QRCodeGenerator, Linear Gauge, TreeMap | - | [Circular Gauge](../circular-gauge/content-security-policy), [Maps](../maps/content-security-policy), [Heatmap Chart](../heatmap-chart/content-security-policy) |

---

### Buttons and Actions

| Fully Strict CSP Compliant | HTML Attributes (Inline Styles Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
|SplitButton, Toggle Switch Button, Button Group, Button, Progress Button, Floating Action Button, Speed Dial | DropDown Menu, Chips | - |

---


### Dropdowns

| Fully Strict CSP Compliant | HTML Attributes (Inline Styles Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
|Mention, ListBox | MultiColumn Combobox, Dropdown List, AutoComplete, ComboBox, Multiselect Dropdown, Dropdown Tree | - |

---


### Inputs

| Fully Strict CSP Compliant | HTML Attributes (Inline Styles Not Supported) | Feature Limitation|
|----------------------------|------------------------|--------------------------|
| RangeSlider, Radio Button, Checkbox, Speech to text, Rating | In-Place Editor, TextBox, TextArea, Numeric TextBox, OtpInput, Inputmask, Color picker, Color palatte | - |

---


### Navigation & Actions

| Fully Strict CSP Compliant | HTML Attributes (Inline Styles Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
| Ribbon | Accordion, Stepper, Breadcrumb, AppBar, Carousal, Context Menu, Sidebar, MenuBar, Tabs, Toolbar, | [TreeView](../treeview/content-security-policy) |

---



### Smart Components
## Constraints and Considerations

| Fully Strict CSP Compliant | HTML Attributes (Inline Styles Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
| Smart Paste Button, Smart TextArea | - | - |
While Syncfusion® Blazor components are progressively moving toward full strict CSP compliance, certain scenarios still require the **`style-src 'unsafe-inline'`** directive. You must include this directive in your CSP configuration if your application falls into any of the following scenarios:

---
**Scenario 1: Components that require CSP relaxation**

### Interactive Chat
Certain components inherently rely on dynamic or inline style injection and cannot function under a strict CSP without `'unsafe-inline'`.

| Fully Strict CSP Compliant | HTML Attributes (Inline Styles Not Supported) | Feature Limitation |
|----------------------------|------------------------|--------------------------|
| AI Assist View| - | - |
#### Components Requiring CSP Relaxation

---
| Category | Components
|-------------------------------------------|---------------------------------------------------------------------------|
| **Data Visualization** | • Charts<br>• 3D Charts<br>• Stock Chart<br>• Bullet Chart<br>• Range Selector<br>• Sankey<br>• Sparkline Chart<br>• Smith Chart |
| **File Viewers & Editors** | • Block Editor<br>• Rich Text Editor |
| **Interactive Chat** | • Chat UI |
| **File Management** | • File Manager|
| **Layout** | • Card |
| **Diagrams and Maps** | • Diagram |
| **Kanban** | • Kanban |


## Constraints and Considerations

While Syncfusion® Blazor components are progressively moving toward full strict CSP compliance, certain scenarios still require the **`style-src 'unsafe-inline'`** directive. You must include this directive in your CSP configuration if your application falls into any of the following scenarios:

**Scenario 1: Components that require CSP relaxation**
**Scenario 2: Components with feature limitations**

Certain components inherently rely on dynamic or inline style injection and cannot function under a strict CSP without `'unsafe-inline'`. Refer to the **Components Requiring CSP Relaxation** table below for the complete list.
Some components are largely strict CSP-compliant, but specific features within them require inline styles. If your application uses any component listed in the **Feature-Limited Components** table below, the `'unsafe-inline'` directive is required.

**Scenario 2: Components with feature limitations**
#### Feature-Limited Components

Some components are largely strict CSP-compliant, but specific features within them require inline styles. If your application uses any such feature in Pivot Table, Gantt Chart, Circular Gauge, Maps, Heatmap Chart, or TreeView, the `'unsafe-inline'` directive is required. Refer to the **Feature Limitation** column in the Component Categories Overview for details.
| Category | Components |
|----------|------------|
| Data Management | • [Pivot Table](../pivot-table/content-security-policy) |
| Scheduling & Calendars | • [Gantt Chart](../gantt-chart/content-security-policy) |
| Data Visualization | • [Circular Gauge](../circular-gauge/content-security-policy)<br>• [Heatmap Chart](../heatmap-chart/content-security-policy) |
| Navigations| • [TreeView](../treeview/content-security-policy) |
| Diagrams and Maps | • [Maps](../maps/content-security-policy) |

**Scenario 3: Inline styles passed via `InputAttributes` or `HtmlAttributes`**

Expand Down Expand Up @@ -220,21 +127,3 @@ If your application falls under any of the above scenarios, apply the following
```

> **Note:** The [wasm-unsafe-eval](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src#unsafe_webassembly_execution) source expression is mandatory for Blazor WebAssembly and Blazor Web App applications. It enables the browser to compile and execute WebAssembly modules required by the Blazor Mono runtime. Without this directive, modern browsers will block WebAssembly execution, preventing the Blazor runtime from initializing correctly.

#### Components Requiring CSP Relaxation

| Category | Components
|-----------------------------------|----------------------------------------------------------------------------|
| **Charts & Advanced Visualizations** | Charts, 3D Charts, Stock Chart, BulletChart, Range Selector, Sankey,Sparkline Charts, Smith Chart, Diagram
| **Editors and Kanban** | Block Editor , RichtextEditor Kanban |
| **Interactive Chat** | Chat UI |
| **File Management and Card** | File Manager, Card |


>**Important:** CSP compliance remains a key security priority. We are actively working toward achieving complete Strict CSP compatibility for all components, and updates will be provided incrementally through upcoming security patch releases.

### Best Practices

- Apply the strictest CSP policy feasible for your application
- Avoid using 'unsafe-inline' unless explicitly required
- Track Syncfusion® release notes for CSP-related improvements
8 changes: 1 addition & 7 deletions blazor/gantt-chart/content-security-policy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Use this configuration when the rich **Notes** field is not required or can be d
upgrade-insecure-requests;">

```
>This policy ensures full strict CSP compliance for the Gantt Chart's primary project management and visualization capabilities.


### Relaxed CSP Configuration (Full Feature Enabled)

Expand All @@ -61,9 +61,3 @@ Include 'unsafe-inline' in style-src to enable rich formatting in the Notes fiel
font-src 'self' data:;
upgrade-insecure-requests;">
```

### Future Improvements
- The security limitation related to the Notes field (Rich Text Editor formatting) will be addressed in future weekly security patch releases.

- Syncfusion® is actively working toward full strict CSP compatibility across all features of the Gantt Chart component, with the goal of eliminating the need for **'unsafe-inline'** entirely.
Track the latest **Syncfusion® Blazor release notes and weekly patches for CSP-related updates and announcements.
12 changes: 2 additions & 10 deletions blazor/heatmap-chart/content-security-policy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Heatmap Strict CSP Feature Limitations

The Syncfusion® Blazor **Heatmap** component supports **strict CSP** for its core functionality, enabling most default operations—such as data binding (one-dimensional and two-dimensional), color mapping (palette, gradient, fixed), axis customization (labels, ticks, inversed, opposed), cell rendering, legends, tooltips, title/subtitle, border and cell spacing, RTL support, accessibility, keyboard navigation, and export (image/PDF)—without requiring `'unsafe-inline'` in the `style-src` directive.
The Syncfusion® Blazor **Heatmap** component supports **strict CSP** for its core functionality, enabling most default operations—such as data binding (one-dimensional and two-dimensional), color mapping (palette, gradient, fixed), axis customization (labels, ticks, inversed, opposed), cell rendering, legends, tooltips, title/subtitle, border and cell spacing, RTL support, accessibility, keyboard navigation, and export (image/PDF) without requiring `'unsafe-inline'` in the `style-src` directive.

However, interactive selection features rely on dynamic runtime style manipulations (typically for applying selection borders, background changes, opacity adjustments, focus indicators, or overlay effects via inline styles managed by JavaScript), which are blocked under a fully strict CSP configuration.

Expand Down Expand Up @@ -47,7 +47,6 @@ Use this configuration when selection interactivity is not required (or can be d
font-src 'self' data:;
upgrade-insecure-requests;">
```
>This policy ensures full strict CSP compliance for the Heatmap component's primary data visualization and representation capabilities.

### Relaxed CSP Configuration (Full Feature Enabled)

Expand All @@ -64,11 +63,4 @@ Include 'unsafe-inline' in style-src to enable single and multiple cell selectio
font-src 'self' data:;
upgrade-insecure-requests;">
```
>Use this configuration only when single or multiple cell selection is essential for user interaction, drill-down, or data exploration workflows. This maintains strong overall protection while permitting the dynamic styling needed for selection feedback.

### Future Improvements
- The security limitation related to the Notes field (Rich Text Editor formatting) will be addressed in future weekly security patch releases.

- Syncfusion® is actively working toward full strict CSP compatibility across all features of the Gantt Chart component, with the goal of eliminating the need for **'unsafe-inline'** entirely.

- Track the latest **Syncfusion® Blazor release notes and weekly patches for CSP-related updates and announcements.
> **Note:** Use this configuration only when single or multiple cell selection is essential for user interaction, drill-down, or data exploration workflows. This maintains strong overall protection while permitting the dynamic styling needed for selection feedback.
Loading