Apply a CSP in non-Development environments

dotnet · Nov 22, 2023 · 18b4ebc · 18b4ebc
1 parent ccb00a2
commit 18b4ebc
Showing 1 changed file with 113 additions and 45 deletions.
diff --git a/aspnetcore/blazor/security/content-security-policy.md b/aspnetcore/blazor/security/content-security-policy.md
@@ -139,6 +139,68 @@ Use a `<meta>` tag to apply the policy:
 
 The following sections show example policies. These examples are versioned with this article for each release of Blazor. To use a version appropriate for your release, select the document version with the **Version** dropdown selector on this webpage.
 
+### Server-side Blazor apps
+
+In the [`<head>` content](xref:blazor/project-structure#location-of-head-and-body-content), apply the directives described in the *Policy directives* section:
+
+:::moniker range=">= aspnetcore-6.0"
+
+```html
+<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';
+               upgrade-insecure-requests;">
+```
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0"
+
+```html
+<meta http-equiv="Content-Security-Policy" 
+      content="base-uri 'self';
+               default-src 'self';
+               img-src data: https:;
+               object-src 'none';
+               script-src https://stackpath.bootstrapcdn.com/ 
+                          'self';
+               style-src https://stackpath.bootstrapcdn.com/
+                         'self' 
+                         'unsafe-inline';
+               upgrade-insecure-requests;">
+```
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-5.0"
+
+```html
+<meta http-equiv="Content-Security-Policy" 
+      content="base-uri 'self';
+               default-src 'self';
+               img-src data: https:;
+               object-src 'none';
+               script-src https://stackpath.bootstrapcdn.com/ 
+                          'self' 
+                          'sha256-34WLX60Tw3aG6hylk0plKbZZFXCuepeQ6Hu7OqRf8PI=';
+               style-src https://stackpath.bootstrapcdn.com/
+                         'self' 
+                         'unsafe-inline';
+               upgrade-insecure-requests;">
+```
+
+:::moniker-end
+
+Add additional `script-src` and `style-src` hashes as required by the app. During development, use an online tool or browser developer tools to have the hashes calculated for you. For example, the following browser tools console error reports the hash for a required script not covered by the policy:
+
+> Refused to execute inline script because it violates the following Content Security Policy directive: " ... ". Either the 'unsafe-inline' keyword, a hash ('sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='), or a nonce ('nonce-...') is required to enable inline execution.
+
+The particular script associated with the error is displayed in the console next to the error.
+
 ### Client-side Blazor apps
 
 In the [`<head>` content](xref:blazor/project-structure#location-of-head-and-body-content), apply the directives described in the *Policy directives* section:
@@ -243,67 +305,73 @@ Add additional `script-src` and `style-src` hashes as required by the app. Durin
 
 The particular script associated with the error is displayed in the console next to the error.
 
-### Server-side Blazor apps
+:::moniker range=">= aspnetcore-8.0"
 
-In the [`<head>` content](xref:blazor/project-structure#location-of-head-and-body-content), apply the directives described in the *Policy directives* section:
+## Apply a CSP in non-Development environments
 
-:::moniker range=">= aspnetcore-6.0"
+When a CSP is applied to a Blazor app's `<head>` content, it interferes with local testing in the Development environment. For example, [Browser Link](xref:client-side/using-browserlink) and the browser refresh script fail to load. The following examples demonstrate how to apply the CSP's `<meta>` tag in non-Development environments.
 
-```html
-<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';
-               upgrade-insecure-requests;">
+> [!NOTE]
+> The examples in this section don't show the full `<meta>` tag for the CSPs. The complete `<meta>` tags are found in the subsections of the [Apply the policy](#apply-the-policy) section.
+
+Two approaches are available for server-side and client-side Blazor Apps:
+
+* Apply the CSP via the `App` component, which applies the CSP to all layouts of the app.
+* Apply the CSP to the app's layout files using the [`<HeadContent>` tag](xref:blazor/components/control-head-content). For complete effectiveness, every app layout file must adopt the approach.
+
+### Blazor Web App approaches
+
+In the `App` component (`Components/App.razor`), inject <xref:Microsoft.Extensions.Hosting.IHostEnvironment>:
+
+```razor
+@inject IHostEnvironment Env
 ```
 
-:::moniker-end
+In the `App` component's `<head>` content, apply the CSP when not in the Development environment:
 
-:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0"
+```razor
+@if (!Env.IsDevelopment())
+{
+    <meta ...>
+}
+```
 
-```html
-<meta http-equiv="Content-Security-Policy" 
-      content="base-uri 'self';
-               default-src 'self';
-               img-src data: https:;
-               object-src 'none';
-               script-src https://stackpath.bootstrapcdn.com/ 
-                          'self';
-               style-src https://stackpath.bootstrapcdn.com/
-                         'self' 
-                         'unsafe-inline';
-               upgrade-insecure-requests;">
+Alternatively, apply the CSP in every app layout file in the `Components/Layout` folder:
+
+```razor
+@inject IHostEnvironment Env
+
+@if (!Env.IsDevelopment())
+{
+    <HeadContent>
+        <meta ...>
+    </HeadContent>
+}
 ```
 
-:::moniker-end
+### Blazor WebAssembly app approaches
 
-:::moniker range="< aspnetcore-5.0"
+In the `App` component (`App.razor`), inject <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment>:
 
-```html
-<meta http-equiv="Content-Security-Policy" 
-      content="base-uri 'self';
-               default-src 'self';
-               img-src data: https:;
-               object-src 'none';
-               script-src https://stackpath.bootstrapcdn.com/ 
-                          'self' 
-                          'sha256-34WLX60Tw3aG6hylk0plKbZZFXCuepeQ6Hu7OqRf8PI=';
-               style-src https://stackpath.bootstrapcdn.com/
-                         'self' 
-                         'unsafe-inline';
-               upgrade-insecure-requests;">
+```razor
+@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
+@inject IWebAssemblyHostEnvironment Env
 ```
 
-:::moniker-end
+In the `App` component's `<head>` content, apply the CSP when not in the Development environment:
 
-Add additional `script-src` and `style-src` hashes as required by the app. During development, use an online tool or browser developer tools to have the hashes calculated for you. For example, the following browser tools console error reports the hash for a required script not covered by the policy:
+```razor
+@if (!Env.IsDevelopment())
+{
+    <HeadContent>
+        <meta ...>
+    </HeadContent>
+}
+```
 
-> Refused to execute inline script because it violates the following Content Security Policy directive: " ... ". Either the 'unsafe-inline' keyword, a hash ('sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='), or a nonce ('nonce-...') is required to enable inline execution.
+Alternatively, use the preceding code but apply the CSP in every app layout file in the `Layout` folder.
 
-The particular script associated with the error is displayed in the console next to the error.
+:::moniker-end
 
 ## Meta tag limitations