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:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';
    style-src 'self' 'unsafe-inline';
    font-src 'self'  data:;" />

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.

View the Angular sample enabled with strict CSP in Github

See also