Add HeadOutlet to TestServer app, use meta tag for setting CSP in reconnect test

oroztocil · oroztocil · commit 16d0cf8b7b79 · 2025-02-14T15:58:52.000+01:00
diff --git a/src/Components/test/E2ETest/ServerExecutionTests/ServerReconnectionCustomUITest.cs b/src/Components/test/E2ETest/ServerExecutionTests/ServerReconnectionCustomUITest.cs
@@ -14,11 +14,11 @@
 
 namespace Microsoft.AspNetCore.Components.E2ETest.ServerExecutionTests;
 
-public class ServerReconnectionCustomUITest : ServerTestBase<BasicTestAppServerSiteFixture<ServerStartupWithCsp>>
+public class ServerReconnectionCustomUITest : ServerTestBase<BasicTestAppServerSiteFixture<ServerStartup>>
 {
     public ServerReconnectionCustomUITest(
         BrowserFixture browserFixture,
-        BasicTestAppServerSiteFixture<ServerStartupWithCsp> serverFixture,
+        BasicTestAppServerSiteFixture<ServerStartup> serverFixture,
         ITestOutputHelper output)
         : base(browserFixture, serverFixture, output)
     {
@@ -38,7 +38,7 @@ protected override void InitializeAsyncCore()
     /// JS fallback code (see 'DefaultReconnectDisplay.ts').
     /// </summary>
     [Fact]
-    public void CustomReconnectUIIsDisplayed()
+    public void ReconnectionUI_CustomDialog_IsDisplayed()
     {
         Browser.Exists(By.Id("increment")).Click();
 
@@ -66,7 +66,7 @@ public void CustomReconnectUIIsDisplayed()
     /// Tests that when the custom reconnect UI is used, there are no style-related CSP errors.
     /// </summary>
     [Fact]
-    public void StyleSrcCSPIsNotViolated()
+    public void ReconnectionUI_WorksWith_StrictStyleCspPolicy()
     {
         var js = (IJavaScriptExecutor)Browser;
         js.ExecuteScript("Blazor._internal.forceCloseConnection()");
diff --git a/src/Components/test/testassets/BasicTestApp/Reconnection/ReconnectionComponent.razor b/src/Components/test/testassets/BasicTestApp/Reconnection/ReconnectionComponent.razor
@@ -25,6 +25,13 @@
 
 @if (useCustomReconnectModal)
 {
+    // We set stricter CSP for styles as we want to check that the application is CSP compliant
+    // when using a custom reconnect modal.
+    // (We know that it is not compliant with the JS-created default reconnect UI.)
+    <HeadContent>
+        <meta http-equiv="Content-Security-Policy" content="style-src 'self';">
+    </HeadContent>
+
     <dialog id="components-reconnect-modal">
         Rejoining the server...
     </dialog>
diff --git a/src/Components/test/testassets/Components.TestServer/Pages/_ServerHost.cshtml b/src/Components/test/testassets/Components.TestServer/Pages/_ServerHost.cshtml
@@ -12,6 +12,7 @@
     <!-- Used by ExternalContentPackage -->
     <link href="_content/TestContentPackage/styles.css" rel="stylesheet" />
     <link href="Components.TestServer.styles.css" rel="stylesheet" />
+    <component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" render-mode="Server" />
 </head>
 <body>
     <root><component type="typeof(BasicTestApp.Index)" render-mode="Server" /></root>
diff --git a/src/Components/test/testassets/Components.TestServer/ServerStartupWithCsp.cs b/src/Components/test/testassets/Components.TestServer/ServerStartupWithCsp.cs
