Syncfusion Blazor Security

Name: Syncfusion Blazor Security
Author: syncfusion

syncfusion/blazor-ui-components-skills

230 installs
4 repo stars
Updated July 28, 2026
syncfusion/blazor-ui-components-skills

Use syncfusion-blazor-security for development tasks

About

syncfusion-blazor-security: A skill for development. This provides functionality for development workflows.

syncfusion-blazor-security

Syncfusion Blazor Security by the numbers

230 all-time installs (skills.sh)
+13 installs in the week ending Jul 27, 2026 (Skillselion tracking)
Ranked #1,668 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
Data as of Jul 29, 2026 (Skillselion catalog sync)

npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-security

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/syncfusion/blazor-ui-components-skills/syncfusion-blazor-security.svg)](https://skillselion.com/skills/syncfusion/blazor-ui-components-skills/syncfusion-blazor-security)

Installs	230
repo stars	★ 4
Last updated	July 28, 2026
Repository	syncfusion/blazor-ui-components-skills ↗

What it does

Use syncfusion-blazor-security for development tasks

Files

SKILL.mdMarkdownGitHub ↗

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

CDN users: also append https://cdn.syncfusion.com/blazor/ to script-src and style-src.

Where to Add the CSP Tag

Project Type	File
Blazor Web App (.NET 8/9/10) any render mode	`~/Components/App.razor`
Blazor WebAssembly Standalone	`wwwroot/index.html`

Content Security Policy (CSP) for Syncfusion Blazor Components

Applies to: Syncfusion Blazor Components

Framework: .NET 8, .NET 9, .NET 10 with Blazor Web App

Reference: Official Syncfusion Documentation

---

1. Overview 2. Required CSP Directives 3. Implementation

Example: Self-Hosted Resources
Example: CDN-Hosted Resources

---

Overview

Content Security Policy (CSP) is a browser security feature that helps protect against cross-site scripting (XSS) and data injection by limiting the allowed sources for scripts, styles, images, fonts, and other resources.

When enforcing a strict CSP, some browser features are blocked by default. To use Syncfusion Blazor components under a strict CSP, you must include specific directives in the CSP policy to ensure required runtime behaviors continue to work.

Required CSP Directives

Include the following directives in the CSP policy for Syncfusion Blazor components:

`font-src data:` – Allows base64-encoded font icons.
`style-src 'self' 'unsafe-inline'` – Permits inline styles. Some components use inline styling for sizing, positioning, and dynamic UI behavior.
`connect-src 'self' https: wss:` – Enables WebSockets and HTTPS connections.
`script-src 'self'` – Permits dynamic code evaluation required by certain features (for example, animation logic).

Implementation

Basic CSP Configuration

These directives should be included in the <head> tag of your application's webpage:

For .NET 8, 9, and 10 Blazor Web Apps (any render mode: Server, WebAssembly, or Auto):

Add to the <head> of ~/Components/App.razor

For Blazor WebAssembly Standalone Apps:

Add to the <head> of wwwroot/index.html

NOTE If the App.razor or index.html contains <ImportMap /> or <script type="importmap"></script> then remove that and don't consider that.

Example: Self-Hosted Resources

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

Example: CDN-Hosted Resources

If referencing scripts and styles from a CDN (such as Syncfusion CDN), add the CDN domain to the CSP policy under script-src and style-src:

<head>
    ...
    <meta http-equiv="Content-Security-Policy"
        content="base-uri 'self';
        default-src 'self';
        connect-src 'self' https: wss:;
        img-src data: https:;
        object-src 'none';
        script-src 'self' https://cdn.syncfusion.com/blazor/;
        style-src 'self' https://cdn.syncfusion.com/blazor/;
        font-src 'self' data:;
        upgrade-insecure-requests;">
    ...
</head>