Content Security Policy

4 Dec 20242 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 limits the sources from which content can be loaded on a web page.

To enable strict Content Security Policy (CSP), certain browser features are disabled by default. In order to use Syncfusion^® controls with strict CSP mode, it is essential to include following directives in the CSP meta tag.

Syncfusion^® controls are rendered with calculated inline styles and base64 font icons, which are blocked on a strict CSP-enabled site. To allow them, add the style-src 'self' 'unsafe-inline'; and font-src 'self' data:; directives in the meta tag as follows.

~/_Layout.cshtml
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
    script-src 'self' 'unsafe-inline'  https://cdn.syncfusion.com;
    style-src 'self' 'unsafe-inline';
    font-src 'self'  data:;" />

Syncfusion^® material and tailwind built-in themes contain a reference to the Roboto’s external font, which is also blocked. To allow them, add the external font reference to the style-src and font-src directives in the above meta tag.

The resultant meta tag is included within the <head> tag and resolves the CSP violation on the application’s side when utilizing Syncfusion^® controls with material and tailwind themes.

~/_Layout.cshtml
<head>
    ...
    <meta http-equiv="Content-Security-Policy" content="default-src 'self';
    script-src 'self' 'unsafe-inline'  https://cdn.syncfusion.com;
    style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';
    font-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ data:;" />
</head>

NOTE

The unsafe-eval directive needs to be added in script-src for controls which uses the templates.