Content Security Policy
- 3 minutes to read
Content Security Policy (CSP) is a built-in browser mechanism designed to mitigate security-related risks (including Cross-Site Scripting (XSS), clickjacking, and data injection attacks). CSP is supported by most modern browsers, including Chrome, Edge, Firefox, Opera, Safari, and mobile browsers.
To enable CSP protection, specify a Content-Security-Policy header or use the <meta> tag and explicitly define authorized functionality using CSP directives (such as allowed scripts/styles and external domains used to load resources).
Microsoft’s Blazor framework declares two lists of CSP directives: for Blazor WebAssembly and Blazor Server. DevExpress Blazor UI components require the same policies with the following differences:
- Our Blazor UI components require the
style-src 'unsafe-inline'directive. - In certain usage scenarios, Blazor requires you to specify additional directives. For additional information, review the following section of this help topic: Additional Requirements.
Why ‘unsafe-inline’ Style Source is Required
DevExpress Blazor UI components generate inline styles at runtime. For instance, our Blazor Grid component calculates column width and assigns corresponding CSS styles on the client. To mitigate security-related risks, the DevExpress Blazor Grid validates these inline styles before applying them.
Inline styles are common for Blazor components. Although the Blazor framework does not require the 'unsafe-inline' directive, some Microsoft Blazor components (Virtualize and QuickGrid) generate inline styles. If an application’s content security policy disallows inline styles, these components will throw CSP-related warnings.
DevExpress inline styles are safe, but we cannot guarantee the same for custom (non-DevExpress) styles. If user input is included in inline styles without proper escaping/validation, these styles may expose user data. To safeguard your application, always validate inline CSS styles defined in application code.
Blazor WebAssembly
Apply the following directives to the <head> content of the wwwroot/index.html page:
<meta http-equiv="Content-Security-Policy"
content="base-uri 'self';
default-src 'self';
img-src data: https:;
object-src 'none';
script-src 'self'
'wasm-unsafe-eval';
style-src 'self'
'unsafe-inline';
upgrade-insecure-requests;">
Alternatively, you can configure the web server to return the Content-Security-Policy header with the directives listed above.
Blazor Server
Apply the following directives to the <head> content of the Pages/_Host.cshtml page:
<meta http-equiv="Content-Security-Policy"
content="base-uri 'self';
default-src 'self';
img-src data: https:;
object-src 'none';
script-src 'self';
style-src 'self'
'unsafe-inline';
upgrade-insecure-requests;">
Alternatively, you can configure the web server to return the Content-Security-Policy header with the directives listed above.
Additional Requirements
You need to specify additional directives if your Blazor application includes DevExtreme UI components, DevExpress BI Dashboard, or DevExpress Reports. Refer to the following topics for additional information/guidance: