Content Security Policy
4 Dec 20242 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. In order to use Syncfusion® controls with strict CSP mode, it is essential to include following directives in the CSP meta tag.
- Syncfusion® controls 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';
script-src 'self' 'unsafe-inline' https://cdn.syncfusion.com;
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® controls with material and tailwind themes.
<head>
...
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src 'self' 'unsafe-inline' https://cdn.syncfusion.com;
style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';
font-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ data:;" />
</head>NOTE
The
unsafe-evaldirective needs to be added inscript-srcfor controls which uses the templates.