Content Security Policy
- 2 minutes to read
A Content Security Policy (CSP) is a built-in browser mechanism that helps you to prevent certain types of attacks on your web application, including Cross-Site Scripting (XSS), clickjacking, and data injection attacks. CSP is supported in 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 with CSP directives, such as allowed scripts and styles, and external domains to load resources.
The Blazor framework declares two lists of CSP directives: for Blazor WebAssembly and Blazor Server. The DevExpress Blazor components require almost the same policies with the following differences:
- Our components do not require Bootstrap scripts and styles delivered by the Bootstrap CDN. You can exclude the
https://stackpath.bootstrapcdn.com/host source from thescript-srcandstyle-srcdirectives. - In some scenarios, Blazor requires you to specify additional directives. For more information see the following section: Additional Requirements.
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'
'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='
'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, BI Dashboard, or Reports. Refer to the following topics for more information: