Syncfusion Blazor Components with Strict Content Security Policy (CSP)

24 Jan 20235 minutes to read

Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It does this by limiting the sources from which certain types of content can be loaded on a webpage.

When enabling strict Content Security Policy (CSP), some browser features are disabled by default. In order to use Syncfusion blazor components with strict CSP mode, certain directives must be included in the CSP meta tag. These directives allow to use certain features that are necessary for Syncfusion blazor components to function properly.

To use Syncfusion blazor components with strict CSP mode, the following directives must be included in the CSP meta tag:

font-src data: - This directive allows for the use of base64 encoded font icons.
style-src 'self' unsafe-inline - This directive allows for the use of inline styles and external fonts.
connect-src 'self' https: wss: - This directive enables web sockets.
script-src 'self' unsafe-eval - This directive allows for the use of the new() and eval() functions. Used in animation enabled Syncfusion components.

These directives should be included in the <head> tag of the application’s webpage, typically

For Blazor Server application, inside the <head> of
- ~/Pages/_Host.cshtml file for .NET Core 3.X, .NET 5 and .NET 7.
- ~/Pages/_Layout.cshtml for .NET 6.

.NET 6 (~/_Layout.cshtml)
.NET 3.X, .NET 5 and .NET 7 (~/_Host.cshtml)
<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' 'unsafe-eval';
        style-src 'self' 'unsafe-inline';
        font-src 'self' data:;
        upgrade-insecure-requests;">
    ...
</head>
<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' 'unsafe-eval';
        style-src 'self' 'unsafe-inline';
        font-src 'self' data:;
        upgrade-insecure-requests;">
    ...
</head>

For Blazor WebAssembly App, inside the <head> of wwwroot/index.html file.

~/index.html
<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' 'unsafe-eval';
        style-src 'self' 'unsafe-inline';
        font-src 'self' data:;
        upgrade-insecure-requests;">
    ...
</head>

if you are referencing script and style references from CDN, then add CDN domain reference in CSP meta tag.

Blazor Server App

.NET 6 (~/_Layout.cshtml)
.NET 3.X, .NET 5 and .NET 7 (~/_Host.cshtml)
<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' 'unsafe-eval' https://cdn.syncfusion.com/blazor/;
        style-src 'self' 'unsafe-inline' https://cdn.syncfusion.com/blazor/;
        font-src 'self' data:;
        upgrade-insecure-requests;">
    ...
</head>
<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' 'unsafe-eval' https://cdn.syncfusion.com/blazor/;
        style-src 'self' 'unsafe-inline' https://cdn.syncfusion.com/blazor/;
        font-src 'self' data:;
        upgrade-insecure-requests;">
    ...
</head>

Blazor WebAssembly App

~/index.html
<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' 'unsafe-eval' https://cdn.syncfusion.com/blazor/;
        style-src 'self' 'unsafe-inline' https://cdn.syncfusion.com/blazor/;
        font-src 'self' data:;
        upgrade-insecure-requests;">
    ...
</head>

Syncfusion Blazor Components with Strict Content Security Policy (CSP)

See also