Contact Support
Content Security Policy
16 May 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. In order to use Syncfusion PDF Viewer control with strict CSP mode, it is essential to include following directives in the CSP meta tag.
- Syncfusion PDF Viewer control 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 font
reference to thestyle-src
andfont-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 PDF Viewer control 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>
- Syncfusion PDF Viewer control when images are added as blob and base64, which are blocked on a strict CSP-enabled site.To overcome this restriction, it is necessary to add the img-src data: directive in the meta tag. To allow them, add the
style-src 'self' 'unsafe-inline';
andimg-src 'self' data:;
directives as follows.
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:;
font-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ data: 'unsafe-inline';
style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
img-src 'self' data:"/>
</head>
NOTE
From the release 2023 Vol2 - 22.1 version, the Content Security Policy for Syncfusion PDF Viewer control 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.