Syncfusion AI Assistant

How can I help you?

Use strict CSP in Blazor SfPdfViewer

12 Feb 20264 minutes to read

Content Security Policy (CSP) is a browser security mechanism that mitigates attacks such as cross-site scripting (XSS) and data injection by restricting the allowed sources for loaded content.

When enforcing a strict Content Security Policy (CSP), some browser features are blocked by default. To use the Blazor SfPdfViewer with a strict CSP, add the directives below to your CSP meta tag.

Include the following meta tag inside the <head> element to address CSP violations when using the SfPdfViewer with material and tailwind themes.

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self';
    frame-src 'self' blob:;
    script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://cdn.syncfusion.com blob:;
    style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com;
    img-src 'self' blob: data:;
    worker-src 'self' blob:;
    connect-src 'self' https://cdn.syncfusion.com data:;
    font-src 'self' data: https://fonts.googleapis.com/ https://fonts.gstatic.com/;" />
</head>

NOTE

The SfPdfViewer component requires specific Content Security Policy (CSP) directives to function properly in Blazor WebAssembly applications.

  • In .NET 9.0, include 'wasm-unsafe-eval' in the script-src directive to support WebAssembly operations.
  • In .NET 8.0, you must also include 'unsafe-eval' in the script-src directive to avoid runtime errors caused by restricted dynamic JavaScript execution.
  • Ensure the worker-src directive includes 'self' and blob: to enable web worker functionality.
    These directives are essential for correct behavior under strict CSP environments.

Directive usage

Directive Usage
default-src 'self'; Sets the default policy for loading resources. 'self' means only allow resources from the same origin (same domain).
script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://cdn.syncfusion.com blob:; Defines where JavaScript code can come from. 'self' allows scripts from the same origin. 'unsafe-inline' allows inline scripts. 'wasm-unsafe-eval' allows eval() operations for WebAssembly in .NET 9.0. 'unsafe-eval' allows eval() operations for WebAssembly in .NET 8.0. blob: allows loading scripts from Blob URLs.
worker-src 'self' blob:; Controls where workers can be loaded from. 'self' allows same-origin workers. blob: allows blob-based workers, common in PDF viewers and heavy JS applications.
connect-src 'self' https://cdn.syncfusion.com data:; Controls where the application can make network requests, such as fetch(), XHR, and WebSockets. 'self' restricts to the same origin, with additional allowances for Syncfusion CDN and data URLs.
style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com; Defines the sources for stylesheets. 'self' restricts to the same origin. 'unsafe-inline' allows inline styles. blob: allows dynamically generated styles. External font CDNs are also allowed.
font-src 'self' data: https://fonts.googleapis.com/ https://fonts.gstatic.com/; Controls where fonts can be loaded from. 'self' allows local fonts. data: allows inline fonts (base64 embedded), and the URLs allow loading from external font CDNs.
img-src 'self' blob: data:; Controls where images can be loaded from. 'self' restricts to the same origin. blob: allows blob-based images. data: allows inline images (base64).
frame-src 'self' blob:; Controls where frames can be loaded from. 'self' allows same-origin frames. blob: allows blob-based frames, which may be used by the PDF Viewer for certain operations.

View the strict CSP sample on GitHub.