Content Security Policy

25 Apr 20251 minute 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^® Vue components with strict CSP mode, it is Essential^® to include following directives in the CSP meta tag.

Syncfusion^® components 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'; and 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' '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 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^® Vue components 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 2023 Vol2 - 22.1 release onwards, the Content Security Policy for Syncfusion^® Vue components has been enhanced. The usage of the unsafe-eval directive has been eliminated from the CSP meta tag.

View the Vue sample enabled with strict CSP in Github

Content Security Policy

See also