Content Security Policy (CSP)
- 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 their mobile versions.
To enable CSP protection, specify a Content-Security-Policy header (recommended approach) 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 WASM and Server/Web Apps. These same directives allow you to use DevExpress Blazor UI components in applications. In certain usage scenarios, DevExpress requires you to specify additional directives. For information on these requirements, review sections below.
Note
The wasm-unsafe-eval source expression is required for all Blazor WebAssembly and Blazor Web App applications because it allows the Blazor Mono runtime to run on the client. Refer to the following help topic for additional information: Enforce a Content Security Policy for ASP.NET Core Blazor.
Blazor Server and Blazor Web App
Apply the following directives to the <head> content of the Pages/_Host.cshtml, Pages/_Layout.cshtml, or Components/App.razor page (depends on the project template used):
<meta http-equiv="Content-Security-Policy"
content="base-uri 'self';
default-src 'self';
img-src 'self' data: https:;
object-src 'none';
script-src 'self' 'wasm-unsafe-eval' 'unsafe-hashes'
'sha256-qnHnQs7NjQNHHNYv/I9cW+I62HzDJjbnyS/OFzqlix0=';
style-src 'self' https:;
connect-src 'self' http: ws: wss:;
upgrade-insecure-requests;">
Alternatively, you can configure the web server to return the Content-Security-Policy header with the directives listed above.
Blazor WebAssembly
Apply the following directives to the <head> content of the wwwroot/index.html or Components/App.razor page (depends on project template used):
<meta http-equiv="Content-Security-Policy"
content="base-uri 'self';
default-src 'self';
img-src 'self' data: https:;
object-src 'none';
script-src 'self' 'wasm-unsafe-eval';
style-src 'self';
connect-src 'none';
upgrade-insecure-requests;">
Alternatively, you can configure the web server to return the Content-Security-Policy header with the directives listed above.
Limitations and Additional Considerations
Important
To safeguard your application, always validate inline CSS styles defined in application code. Do not include user input into inline styles without proper escaping/validation. Such inline styles may expose data and introduce security-related risks.
DevExpress Blazor components require the style-src: unsafe-inline directive in the following cases:
- You use Rich Text Editor in your application.
- You use the
Styleproperty in the Grid.CustomizeElement/TreeList.CustomizeElement event handler. Consider using theCssClassevent argument instead. - You use the Style property in the Scheduler.HtmlCellDecoration event handler. Consider using the CssClass event argument instead.
CSP Directives for Chart Export
If you call the ExportAsync method for a Chart, Pie Chart, or Polar Chart, add the following hash to the style-src directive:
<meta http-equiv="Content-Security-Policy"
content="...
style-src 'self'
'sha256-UP0QZg7irvSMvOBz9mH2PIIE28+57UiavRfeVea0l3g=';">
CSP Directives for Map Integrations
Google Maps, Azure Maps, and Bing Maps API require the following CSP directives. Add these directives if you use the DevExpress Blazor Map component.
<!-- Bing maps -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' https://*.bing.com https://*.virtualearth.net https://ssl.gstatic.com;
style-src 'self' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net;
img-src 'self' data: https://*.bing.com https://*.virtualearth.net;
font-src 'self' data:;
connect-src 'self' https://*.bing.com"
/>
<!-- Google maps -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self' https://*.googleapis.com/ https://*.gstatic.com;
script-src 'unsafe-inline' 'unsafe-eval' 'self' https://*.googleapis.com/ https://*.gstatic.com;
style-src 'unsafe-inline' 'self' https://*.googleapis.com/ https://*.gstatic.com;
img-src 'self' data: https://*.googleapis.com/ https://*.gstatic.com;"
/>
<!-- Azure maps -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self' https://atlas.microsoft.com;
script-src 'self' 'unsafe-eval' 'unsafe-inline' blob: https://atlas.microsoft.com;
style-src 'unsafe-inline' https://atlas.microsoft.com/;
img-src data: blob:;
connect-src https://js.monitor.azure.com https://atlas.microsoft.com;"
/>
CSP Directives for Related DevExpress Product Lines
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: