Syncfusion Blazor Components with Strict Content Security Policy (CSP)

19 Jan 20243 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 Web App, inside the <head> of ~/Components/App.razor file.
  • For Blazor Server application, inside the <head> of
    • ~/Pages/_Host.cshtml file for .NET 7.
    • ~/Pages/_Layout.cshtml for .NET 6.
  • For Blazor WebAssembly App, inside the <head> of wwwroot/index.html file.
<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.

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

See also