Skip to content

content-security-policy.md

Latest commit

 

History

History
273 lines (231 loc) · 8.4 KB

content-security-policy.md

File metadata and controls

273 lines (231 loc) · 8.4 KB
layout post
title Content Security Policy (CSP) - Syncfusion
description Learn how to use Syncfusion Blazor components with a strict Content Security Policy (CSP) in Blazor Web App, Blazor WebAssembly (WASM), and Blazor Server.
platform Blazor
control Common
documentation ug

Syncfusion® Blazor Components With Strict Content Security Policy

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 ?

Add CSP directives to the <head> 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 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

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

{% tabs %}

{% highlight html tabtitle="Blazor Server App" %} {% endhighlight %}

{% highlight html tabtitle="Blazor WebAssembly" %} {% endhighlight %}

{% endtabs %}

Why 'wasm-unsafe-eval' for WebAssembly ?

WebAssembly requires the 'wasm-unsafe-eval' directive to compile and run. This is different from 'unsafe-eval' and is necessary for client-side WebAssembly applications.

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'

The following components need inline styles to work and always require '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':

Category Components
Data Management Pivot Table - Click here for feature details
Scheduling Gantt Chart - Click here for feature details
Charts Circular Gauge - Click here for feature details
Heatmap Chart - Click here for feature details
Navigation TreeView - Click here for feature details
Maps Maps -Click here for feature details

Scenario 3: passing inline styles via ComponentInputAttributes

If you add style attributes directly through InputAttributes or HtmlAttributes, strict CSP will block them:

@* This won't work under strict CSP *@
<SfTextBox InputAttributes='@(new Dictionary<string, object> { { "style", "width:200px;" } })' />

Better approach: Use component properties instead:

@* Use built-in properties like Width instead *@
<SfTextBox Width="200px" />

@* Or apply CSS classes to style the component *@
<style>
    .my-textbox { width: 200px; }
</style>
<SfTextBox CssClass="my-textbox" />

This keeps your CSP strict while still achieving your styling goals.

CSP configuration with 'unsafe-inline'

If your application needs any of the above scenarios, use this configuration:

<meta http-equiv="Content-Security-Policy"
      content="base-uri 'self';
               default-src 'self';
               connect-src 'self' https: ws: wss:;
               img-src 'self' data: https:;
               object-src 'none';
               script-src 'self';
               style-src 'self' 'unsafe-inline';
               font-src 'self' data:;
               upgrade-insecure-requests;">

This allows inline styles while keeping the rest of your security policy strict.