Content Security Policy

29 Jul 20231 minute 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 React components with strict CSP mode, it is essential to include following directives in the CSP meta tag.

Syncfusion components 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.

HTML
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
    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 React components with material and tailwind themes.

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

NOTE

From the 2023 Vol2 - 22.1 release onwards, the Content Security Policy for Syncfusion React components has been enhanced. The usage of the unsafe-eval directive has been eliminated from the CSP meta tag.

View the React sample enabled with strict CSP in Github

Content Security Policy

See also