Syncfusion® Blazor Components With Strict Content Security Policy

7 Jul 20266 minutes to read

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.

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

<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';
               font-src 'self' data:;
               upgrade-insecure-requests;">
<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' 'wasm-unsafe-eval';
               style-src 'self';
               font-src 'self' data:;
               upgrade-insecure-requests;">

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 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 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
  • 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.
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.

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
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
ChatUI ChatUI -Click here for feature details

Scenario 3: passing inline styles via component properties

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.

See also