Syncfusion Blazor Security

If you're deploying Syncfusion Blazor components and need to lock down Content Security Policy without breaking things, this walks you through the exact directives required. It covers the self-hosted Static Web Assets scenario and CDN delivery, explains why Syncfusion needs unsafe-inline for styles (dynamic sizing) and specific font-src rules (base64 icons), and tells you where to drop the meta tag in .NET 8+ projects. The table format makes it easy to copy-paste and adjust. Honest take: CSP with third-party component libraries is always fiddly, and having the directives spelled out with reasons saves a lot of trial and error in the browser console.

skills.sh installs: 382
GitHub stars: 4
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-security --agent claude-code

Installs into .claude/skills of the current project.

Files

Syncfusion Blazor Security

Content Security Policy (CSP) configuration for Syncfusion Blazor components in browser-hosted applications (.NET 8, 9, 10).

When to Use

Use this skill when you need to:

Add a CSP <meta> tag to App.razor or index.html for Syncfusion components
Configure CSP for self-hosted (Static Web Assets) script and style delivery
Configure CSP for CDN-hosted Syncfusion scripts and styles
Understand which CSP directives Syncfusion components require and why

Quick Reference

Full CSP guide: See content-security-policy.md

Required CSP Directives at a Glance

Directive	Value	Reason
`font-src`	`'self' data:`	Base64-encoded icon fonts
`style-src`	`'self' 'unsafe-inline'`	Inline styles for sizing/positioning
`script-src`	`'self'`	Dynamic code evaluation (animations, etc.)
`connect-src`	`'self' https: wss:`	WebSocket and HTTPS connections
`img-src`	`data: https:`	Inline images and remote assets
`object-src`	`'none'`	Block plugin content