Syncfusion AI Assistant

How can I help you?

Content Security Policy in JavaScript PDF Viewer

12 Feb 20262 minutes to read

Content Security Policy (CSP) is a browser security feature that helps mitigate attacks such as cross-site scripting (XSS) and data injection by restricting the sources from which content can load.

When strict Content Security Policy (CSP) is enabled, several browser capabilities are disabled by default. To run the Syncfusion PDF Viewer control under strict CSP, include the following directives in the CSP meta tag. These directives can also be provided by the HTTP Content-Security-Policy response header from the server; the examples below show client-side meta tag usage.

<meta http-equiv="Content-Security-Policy" content="default-src 'self';
    style-src 'self' 'unsafe-inline';
    font-src 'self'  data:;" />
  • The Syncfusion material and tailwind built-in themes reference the Roboto external font, which strict CSP also blocks. Permit these external fonts by adding their URLs to both the style-src and font-src directives in the meta tag.

The resulting meta tag must be placed within the <head> element to resolve CSP violations when using the Syncfusion PDF Viewer control with the 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>
<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

Starting with the 2023 Vol 2 (v22.1) release, the Content Security Policy for the Syncfusion PDF Viewer control was improved by using a function template approach for template properties, which eliminates the need for the unsafe-eval directive in the CSP meta tag. For older releases (pre-v22.1) that use previous template patterns, the unsafe-eval directive may still be required.

View the sample on GitHub