Content Security Policy

27 Jun 20252 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. JavaScript EJ2 ES5 controls support strict CSP mode without requiring the unsafe-eval directive, starting with Essential Studio 2023 Volume 2 release (v22.1.34). Additionally, with the 2025 Volume 1 update (v29.1.33), most inline style-related issues have been resolved, significantly reducing the dependency on the unsafe-inline directive in the style-src policy for a more secure and CSP-compliant environment.

Syncfusion^® controls are fully CSP-compliant, except for the Document Editor and PDF Viewer, which still require the unsafe-inline directive. Syncfusion^® controls use base64-encoded font icons for rendering, which are blocked on a strict CSP-enabled site. To allow them, add the 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';
    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.

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 release 2023 Vol2 - 22.1 version, the Content Security Policy for Syncfusion^® controls has been enhanced by implementing a function template approach for template properties to eliminate the usage of the unsafe-eval directive in the CSP meta tag.

View the JavaScript sample enabled with strict CSP in Github

Content Security Policy

See also