Contact Support
Content Security Policy
5 Apr 20251 minute to read
Content Security Policy (CSP) is a pivotal security feature deployed by web browsers to mitigate risks such as cross-site scripting (XSS) and data injection attacks. CSP controls the allowed sources from which content can be loaded on a web page, thereby enhancing security.
To activate a strict Content Security Policy (CSP), some browser functionalities are disabled by default. When utilizing Syncfusion® Angular components in a strict CSP environment, it is crucial to integrate the following directives in the CSP meta tag:
- Syncfusion® components use computed inline styles and base64 encoded font icons, which are typically blocked by strict CSP. To permit their usage, include the directives
style-src 'self' 'unsafe-inline';
andfont-src 'self' data:;
in your meta tag as demonstrated:
<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 font
reference to thestyle-src
andfont-src
directives in the above meta tag.
Integrate the following meta tag within your <head>
directive to resolve CSP violations when using Syncfusion® Angular components with these 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® Angular components has been enhanced. The usage of the
unsafe-eval
directive has been eliminated from the CSP meta tag.