Content Security Policy
20 Aug 20251 minute to read
Content Security Policy (CSP) is a browser security feature that helps prevent cross-site scripting (XSS) attacks and data injection by restricting the sources from which content may be loaded.
When using Syncfusion® React components with a strict CSP, certain browser features are disabled by default. To ensure proper rendering and functionality, include the following directives in your 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';andfont-src 'self' data:;directives in the meta tag as follows.
<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 theexternal fontreference to thestyle-srcandfont-srcdirectives 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.
<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-evaldirective has been eliminated from the CSP meta tag.