diff --git a/blazor/circular-gauge/content-security-policy.md b/blazor/circular-gauge/content-security-policy.md index 7eddd7a06f..8e49fdaff1 100644 --- a/blazor/circular-gauge/content-security-policy.md +++ b/blazor/circular-gauge/content-security-policy.md @@ -9,7 +9,7 @@ documentation: ug # Circular Gauge - Content Security Policy Limitations -## What's Supported Under Strict CSP? +## What's supported under strict CSP ? The Syncfusion® Blazor **Circular Gauge** component supports most features under strict Content Security Policy without needing `'unsafe-inline'`. You can safely use: @@ -20,11 +20,11 @@ The Syncfusion® Blazor **Circular Gauge** component supports most features unde - Annotations - Multiple axes -## What Requires *'unsafe-inline'*? +## What requires *'unsafe-inline'* ? **Animation Features** require the `style-src 'unsafe-inline'` directive. -### Why Do Animations Need `'unsafe-inline'`? +### Why do animations need *'unsafe-inline'* ? Animations work by applying dynamic inline CSS styles to make elements transition smoothly. This includes: @@ -32,13 +32,13 @@ Animations work by applying dynamic inline CSS styles to make elements transitio - Individual pointer animations (via `CircularGaugePointerAnimation`) - Sequential rendering: axis → ticks → labels → ranges → pointers → annotations -### How to Disable Animations +### How to disable animations ? If you don't need animations, set `AnimationDuration="0"` (this is the default) to render the gauge instantly without transitions. -## Recommended CSP Configurations +## Recommended CSP configurations -### Strict CSP (No Animations) +### Strict CSP (no animations) Use this configuration if you don't use animations (set `AnimationDuration="0"` or leave it unset): @@ -57,7 +57,7 @@ Use this configuration if you don't use animations (set `AnimationDuration="0"` This configuration maintains full security for the gauge's core visualization features. -### Relaxed CSP (With Animations) +### Relaxed CSP (with animations) Include `'unsafe-inline'` if you want smooth animations: diff --git a/blazor/common/content-security-policy.md b/blazor/common/content-security-policy.md index aa3666a5c3..fa936e27b9 100644 --- a/blazor/common/content-security-policy.md +++ b/blazor/common/content-security-policy.md @@ -9,30 +9,30 @@ documentation: ug # Syncfusion® Blazor Components With Strict Content Security Policy -## What is Content Security Policy (CSP)? +## What is content security policy (CSP) ? **Content Security Policy (CSP)** is a browser security feature that protects your application against malicious attacks like cross-site scripting (XSS) and data injection. It works by controlling where your application can load scripts, styles, images, fonts, and other resources from. -## Where to Add CSP Directives ? +## Where to add CSP directives ? Add CSP directives to the `` tag of your application's main HTML file: - **For .NET 8, 9, or 10 Blazor Web Apps** (Server, WebAssembly, or Auto modes): Add to `~/Components/App.razor` - **For Blazor WebAssembly Standalone Apps**: Add to `wwwroot/index.html` -## Syncfusion Support for Strict CSP +## Syncfusion support for strict CSP Syncfusion now provides **strict CSP compatibility** for **over 80 components**. This means most of your application's core functionality can work securely without needing unsafe directives like `'unsafe-eval'` or `'unsafe-inline'`. This makes it easier for you to enforce strong security policies while still having access to all component features. -## Recommended CSP Configurations +## Recommended CSP configurations The following CSP configurations are **recommended** for Syncfusion® Blazor components that support strict CSP (Refer Supported list below). -### Blazor Server App +{% tabs %} -```html +{% highlight html tabtitle="Blazor Server App" %} -``` +{% endhighlight %} -### Blazor Interactive WebAssembly App and Wasm Standalone App - -```html +{% highlight html tabtitle="Blazor WebAssembly" %} -``` +{% endhighlight %} + +{% endtabs %} -**Why `'wasm-unsafe-eval'` for WebAssembly?** +**Why `'wasm-unsafe-eval'` for WebAssembly ?** -WebAssembly requires the [`'wasm-unsafe-eval'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src#unsafe_webassembly_execution) directive to compile and run. Without it, your Blazor runtime won't start. This is different from `'unsafe-eval'` and is necessary for client-side WebAssembly applications. +WebAssembly requires the [`'wasm-unsafe-eval'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src#unsafe_webassembly_execution) directive to compile and run. This is different from `'unsafe-eval'` and is necessary for client-side WebAssembly applications. -## When You Need *'unsafe-inline'* ? +## When you need *'unsafe-inline'* ? Most Syncfusion components support strict CSP. However, some components or features still need the **`style-src 'unsafe-inline'`** directive. Read the sections below to determine if your application needs it. -### Scenario 1: Components That Always Require `'unsafe-inline'` +### Scenario 1: components that always require *'unsafe-inline'* The following components need inline styles to work and always require `'unsafe-inline'`: -| Category | Components | Reason for unsafe-inline Requirement | -|----------|------------|------------| -| **Data Visualization** | • Charts
• 3D Charts
• Stock Chart
• Bullet Chart
• Range Selector
• Sankey
• Sparkline Chart
• Smith Chart |• These components are independent of external Syncfusion theme files and rely on runtime-generated inline styles for precise SVG, Canvas, and DOM rendering.
• Dynamic calculation of axes, scales, gradients, data labels, and tooltips at runtime
• Inline styles ensure pixel‑perfect alignment and high‑performance redraws during zoom, pan, and real-time updates
| -| **File Viewers & Editors** | • Block Editor
• Rich Text Editor | • File editing components apply dynamic inline styles to render rich content accurately based on user input and stored markup.
• Formatting features (bold, italic, underline, font size, font color, background color, lists, links, alignment) require inline styles to reflect user intent precisely | -| **Interactive Chat** | • Chat UI |• Chat UI component is implemented using Blazor’s Virtualize component, which optimizes performance by rendering only the visible subset of messages within the viewport while representing the full dataset logically.
• Blazor’s virtualization mechanism relies on runtime-generated inline styles as an essential part of its layout and scrolling model - | -| **File Management** | • File Manager |• Uses inline styles for responsive grid/list views, selection highlights, drag indicators, and context menus.
• Inline styles allow immediate visual feedback during selection, resizing panes, and drag operations | -| **Layout** | • Card |• Card components dynamically adjust layout, elevation, spacing, and responsive breakpoints via inline styles.
• Enables adaptive layouts across different screen sizes and container widths.
• Supports dynamic styling scenarios such as hover effects, conditional emphasis | -| **Diagrams and Maps** | • Diagram | • Diagram components depend extensively on inline styles for interactive behaviors.
• Inline styles are used for node positioning, connectors, ports, annotations, and selection states
• Dragging, resizing, rotating, and snapping operations require continuous style updates at runtime | -| **Kanban** | • Kanban | Kanban boards use inline styles to provide fluid drag‑and‑drop interactions between columns and cards. | - -### Scenario 2: Components With Limited Features Requiring `'unsafe-inline'` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+Category + +Components + +Reason for unsafe-inline Requirement +
+Data Visualization + +
    +
  • Charts
    • +
  • Accumulation Chart
    • +
  • 3D Chart
    • +
  • Stock Chart
    • +
  • Bullet Chart
    • +
  • Range Selector
    • +
  • Sankey
    • +
  • Sparkline
    • +
  • Smith Chart
    • +
+		 +
    +
  • These components are independent of external Syncfusion theme files and rely on runtime-generated inline styles for precise SVG, Canvas, and DOM rendering.
    • +
  • Dynamic calculation of axes, scales, gradients, data labels, and tooltips at runtime.
    • +
  • Inline styles ensure pixel-perfect alignment and high-performance redraws during zoom, pan, and real-time updates.
    • +
+
+File Viewers & Editors + +
    +
  • Block Editor
    • +
  • Rich Text Editor
    • +
+		 +
    +
  • File editing components apply dynamic inline styles to render rich content accurately based on user input and stored markup.
    • +
  • Formatting features (bold, italic, underline, font size, font color, background color, lists, links, alignment) require inline styles to reflect user intent precisely.
    • +
+
+Interactive Chat + +
    +
  • Chat UI
    • +
+		 +
    +
  • Chat UI component is implemented using Blazor's Virtualize component, which optimizes performance by rendering only the visible subset of messages within the viewport while representing the full dataset logically.
    • +
  • Blazor's virtualization mechanism relies on runtime-generated inline styles as an essential part of its layout and scrolling model.
    • +
+
+File Management + +
    +
  • File Manager
    • +
+		 +
    +
  • Uses inline styles for responsive grid/list views, selection highlights, drag indicators, and context menus.
    • +
  • Inline styles allow immediate visual feedback during selection, resizing panes, and drag operations.
    • +
+
+Layout + +
    +
  • Card
    • +
+		 +
    +
  • Card components dynamically adjust layout, elevation, spacing, and responsive breakpoints via inline styles.
    • +
  • Enables adaptive layouts across different screen sizes and container widths.
    • +
  • Supports dynamic styling scenarios such as hover effects and conditional emphasis.
    • +
+
+Diagrams and Maps + +
    +
  • Diagram
    • + +
+		 +
    +
  • Diagram components depend extensively on inline styles for interactive behaviors.
    • +
  • Inline styles are used for node positioning, connectors, ports, annotations, and selection states.
    • +
  • Dragging, resizing, rotating, and snapping operations require continuous style updates at runtime.
    • +
+
+Kanban + +
    +
  • Kanban
    • +
+		 +
    +
  • Kanban boards use inline styles to provide fluid drag-and-drop interactions between columns and cards.
    • +
+
+ + + +### Scenario 2: components with limited features requiring *'unsafe-inline'* These components work under strict CSP for most features, but specific advanced features need `'unsafe-inline'`: @@ -96,7 +227,7 @@ These components work under strict CSP for most features, but specific advanced | Navigation | TreeView - [Click here for feature details](../treeview/content-security-policy) | | Maps | Maps -[Click here for feature details](../maps/content-security-policy) | -### Scenario 3: Passing Inline Styles via ComponentInputAttributes +### Scenario 3: passing inline styles via ComponentInputAttributes If you add `style` attributes directly through `InputAttributes` or `HtmlAttributes`, strict CSP will block them: @@ -120,7 +251,7 @@ If you add `style` attributes directly through `InputAttributes` or `HtmlAttribu This keeps your CSP strict while still achieving your styling goals. -## CSP Configuration With *'unsafe-inline'* +## CSP configuration with *'unsafe-inline'* If your application needs any of the above scenarios, use this configuration: diff --git a/blazor/gantt-chart/content-security-policy.md b/blazor/gantt-chart/content-security-policy.md index 334f91a821..86bd71a948 100644 --- a/blazor/gantt-chart/content-security-policy.md +++ b/blazor/gantt-chart/content-security-policy.md @@ -9,7 +9,7 @@ documentation: ug # Gantt Chart - Content Security Policy Limitations -## What's Supported Under Strict CSP? +## What's supported under strict CSP ? The Syncfusion® Blazor **Gantt Chart** component supports most features under strict Content Security Policy without needing `'unsafe-inline'`. You can safely use: @@ -20,11 +20,11 @@ The Syncfusion® Blazor **Gantt Chart** component supports most features under s - Data binding and filtering - Multiple views and interactions -## What Requires *'unsafe-inline'*? +## What requires *'unsafe-inline'* ? **Rich Text Formatting in Notes Field** requires the `style-src 'unsafe-inline'` directive. -### Why Does Rich Text Formatting Need `'unsafe-inline'`? +### Why does rich text formatting need *'unsafe-inline'* ? The Notes field supports rich text formatting (bold, italic, colors, lists, links, etc.). When you render formatted content, the Rich Text Editor applies dynamic inline styles to display the requested visual appearance, including: @@ -35,13 +35,13 @@ The Notes field supports rich text formatting (bold, italic, colors, lists, link These styles are applied at runtime and blocked under strict CSP. -### How to Use Plain Text Only ? +### How to use plain text only ? If you don't need rich text formatting in Notes, just use plain text. The rest of the Gantt Chart will work fully under strict CSP. -## Recommended CSP Configurations +## Recommended CSP configurations -### Strict CSP (Without RichTextEditor related Features) +### Strict CSP (without richtexteditor related features) Use this configuration if you don't use rich text formatting in Notes (or don't use the Notes field): @@ -60,7 +60,7 @@ Use this configuration if you don't use rich text formatting in Notes (or don't This configuration maintains full security for the Gantt Chart's project management and visualization features. -### Relaxed CSP (With Rich Text Notes) +### Relaxed CSP (with rich text notes) Include `'unsafe-inline'` if you want to use rich text formatting in the Notes field: diff --git a/blazor/heatmap-chart/content-security-policy.md b/blazor/heatmap-chart/content-security-policy.md index fc54d7683d..8c9bc2d06d 100644 --- a/blazor/heatmap-chart/content-security-policy.md +++ b/blazor/heatmap-chart/content-security-policy.md @@ -9,7 +9,7 @@ documentation: ug # Heatmap - Content Security Policy Limitations -## What's Supported Under Strict CSP? +## What's supported under strict CSP? The Syncfusion® Blazor **Heatmap** component supports most features under strict Content Security Policy without needing `'unsafe-inline'`. You can safely use: @@ -23,11 +23,11 @@ The Syncfusion® Blazor **Heatmap** component supports most features under stric - Keyboard navigation - Image/PDF export -## What Requires *'unsafe-inline'*? +## What requires *'unsafe-inline'* ? **Cell Selection** (single or multiple) requires the `style-src 'unsafe-inline'` directive. -### Why Does Selection Need `'unsafe-inline'`? +### Why does selection need *'unsafe-inline'*? When users click on cells to select them, the component applies dynamic inline styles to visually highlight the selected cells. This includes: @@ -38,13 +38,13 @@ When users click on cells to select them, the component applies dynamic inline s These visual indicators are applied in real-time during user interaction and blocked under strict CSP. -### How to Disable Selection ? +### How to disable selection ? If you don't need cell selection, set `SelectionMode="None"` or simply don't configure selection-related events. The rest of the Heatmap will work fully under strict CSP. -## Recommended CSP Configurations +## Recommended CSP configurations -### Strict CSP (No Cell Selection) +### Strict CSP (no cell selection) Use this configuration if you don't use cell selection (or don't want selection interactions): @@ -63,7 +63,7 @@ Use this configuration if you don't use cell selection (or don't want selection This configuration maintains full security for the Heatmap's data visualization capabilities. -### Relaxed CSP (With Cell Selection) +### Relaxed CSP (with cell selection) Include `'unsafe-inline'` if you want users to select cells for drill-down or data exploration: diff --git a/blazor/maps/content-security-policy.md b/blazor/maps/content-security-policy.md index 22900670aa..6d3dc5b087 100644 --- a/blazor/maps/content-security-policy.md +++ b/blazor/maps/content-security-policy.md @@ -9,7 +9,7 @@ documentation: ug # Maps - Content Security Policy Limitations -## What's Supported Under Strict CSP? +## What's supported under strict CSP ? The Syncfusion® Blazor **Maps** component supports most features under strict Content Security Policy without needing `'unsafe-inline'`. You can safely use: @@ -21,19 +21,19 @@ The Syncfusion® Blazor **Maps** component supports most features under strict C - Basic zoom and pan navigation - Static customizations -## What Requires *'unsafe-inline'*? +## What requires *'unsafe-inline'* ? The following features require the `style-src 'unsafe-inline'` directive: -### 1. OpenStreetMap (OSM) with Toolbar +### 1. OpenStreetMap (OSM) with toolbar When you use the OSM base layer with the built-in toolbar (zoom, pan, reset buttons), the toolbar applies dynamic inline styles for button states, icon rendering, responsive layout, and overlay management. -### 2. Click Interactions +### 2. Click interactions Single and double-click events that trigger custom actions or visual feedback may apply dynamic inline styles to visual elements. -### 3. Highlight Features +### 3. Highlight features These interactive highlight effects apply runtime inline styles: - Bubble Highlight (dynamic size and color) @@ -44,9 +44,9 @@ These interactive highlight effects apply runtime inline styles: > **Note:** Core features—including static shape rendering, data-bound color mapping, legends, tooltips, multiple layers, basic zooming/panning (without toolbar), annotations, and export (image/PDF)—operate fully under strict CSP without requiring `'unsafe-inline'`. -## Recommended CSP Configurations +## Recommended CSP configurations -### Strict CSP (Static Maps Only) +### Strict CSP (static maps only) Use this configuration if you don't need OSM with toolbar, click interactions, or highlight features: @@ -65,7 +65,7 @@ Use this configuration if you don't need OSM with toolbar, click interactions, o This configuration maintains full security for the Maps component's geographic data visualization. -### Relaxed CSP (With Interactive Features) +### Relaxed CSP (with interactive features) Include `'unsafe-inline'` if you need OSM with toolbar, click interactions, or highlight customizations: diff --git a/blazor/pivot-table/content-security-policy.md b/blazor/pivot-table/content-security-policy.md index e3eb3c29c5..101eaebc3f 100644 --- a/blazor/pivot-table/content-security-policy.md +++ b/blazor/pivot-table/content-security-policy.md @@ -9,7 +9,7 @@ documentation: ug # Pivot Table - Content Security Policy Limitations -## What's Supported Under Strict CSP? +## What's supported under strict CSP ? The Syncfusion® Blazor **Pivot Table** component supports most features under strict Content Security Policy without needing `'unsafe-inline'`. You can safely use: @@ -21,18 +21,18 @@ The Syncfusion® Blazor **Pivot Table** component supports most features under s - Field list integration - Keyboard navigation and accessibility -## What Requires *'unsafe-inline'*? +## What requires *'unsafe-inline'* ? The following features require the `style-src 'unsafe-inline'` directive: -### 1. Pivot Chart Integration +### 1. Pivot chart integration When you enable the integrated Pivot Chart view (via `ShowToolbar` Chart toggle or `DisplayOption="Chart"`), the chart applies dynamic inline styles for: - Chart rendering and positioning - Legends and tooltips - Responsive layout adjustments -### 2. Conditional Formatting +### 2. Conditional formatting Cell-level conditional formatting uses inline styles to dynamically apply: - Background colors @@ -40,17 +40,17 @@ Cell-level conditional formatting uses inline styles to dynamically apply: - Text colors - Visual indicators based on formatting rules -### 3. Advanced Number Formatting & Styling +### 3. Advanced number formatting & styling Custom number formatting combined with alignment, text wrapping, or theme overrides may apply runtime inline styles. -### How to Disable These Features +### How to disable these features ? If you don't need these advanced features, the rest of the Pivot Table works fully under strict CSP. -## Recommended CSP Configurations +## Recommended CSP configurations -### Strict CSP (Grid View Only) +### Strict CSP (grid view only) Use this configuration if you don't use Pivot Chart view, conditional formatting, or advanced number formatting: @@ -69,7 +69,7 @@ Use this configuration if you don't use Pivot Chart view, conditional formatting This configuration maintains full security for the Pivot Table's grid view functionality. -### Relaxed CSP (With Advanced Features) +### Relaxed CSP (with advanced features) Include `'unsafe-inline'` if you need Pivot Chart view, conditional formatting, or advanced number styling: diff --git a/blazor/treeview/content-security-policy.md b/blazor/treeview/content-security-policy.md index a71502a38a..348be30ade 100644 --- a/blazor/treeview/content-security-policy.md +++ b/blazor/treeview/content-security-policy.md @@ -9,7 +9,7 @@ documentation: ug # TreeView - Content Security Policy Limitations -## What's Supported Under Strict CSP? +## What's supported under strict CSP ? The Syncfusion® Blazor **TreeView** component supports most features under strict Content Security Policy without needing `'unsafe-inline'`. You can safely use: @@ -27,11 +27,11 @@ The Syncfusion® Blazor **TreeView** component supports most features under stri - Accessibility (ARIA/WCAG) - Keyboard navigation and export -## What Requires *'unsafe-inline'*? +## What requires *'unsafe-inline'* ? **UI Virtualization** requires the `style-src 'unsafe-inline'` directive. -### Why Does Virtualization Need `'unsafe-inline'`? +### Why does virtualization need *'unsafe-inline'* ? UI virtualization improves performance with large datasets by rendering only visible nodes. It uses dynamic inline styles for: - Container sizing and positioning @@ -42,13 +42,13 @@ UI virtualization improves performance with large datasets by rendering only vis These calculations happen in real-time as users scroll and are blocked under strict CSP. -### How to Disable Virtualization ? +### How to disable virtualization If you don't need virtualization, simply omit `EnableVirtualization="true"` or leave the Height unset. The rest of the TreeView works fully under strict CSP for large and small datasets. -## Recommended CSP Configurations +## Recommended CSP configurations -### Strict CSP (No Virtualization) +### Strict CSP (no virtualization) Use this configuration if you don't use virtualization (or handle smaller datasets): @@ -67,7 +67,7 @@ Use this configuration if you don't use virtualization (or handle smaller datase This configuration maintains full security for the TreeView's hierarchical data display and interactions. -### Relaxed CSP (With Virtualization) +### Relaxed CSP (with virtualization) Include `'unsafe-inline'` if you need virtualization for optimal performance with large datasets: