Support enhanced nav updates to link tag integrity (#55163)

Author: SteveSandersonMS

src/Components/Web.JS/src/Rendering/DomMerging/AttributeSync.ts

@@ -7,6 +7,13 @@ export function synchronizeAttributes(destination: Element, source: Element) {
 
  // Skip most of the work in the common case where all attributes are unchanged and are even still in the same order
  if (!attributeSetsAreIdentical(destAttrs, sourceAttrs)) {
+ // Certain element types may have special rules about how to update their attributes,
+ // or might require us to synchronize DOM properties as well as attributes
+ if (destination instanceof HTMLLinkElement || destination instanceof HTMLScriptElement) {
+ destination.integrity = (source as HTMLLinkElement | HTMLScriptElement).integrity;
+ }
+
+ // Now do generic unordered attribute synchronization
  const remainingDestAttrs = new Map<string, Attr>();
  for (const destAttr of destination.attributes as any) {
  remainingDestAttrs.set(destAttr.name, destAttr);

src/Components/test/E2ETest/ServerRenderingTests/EnhancedNavigationTest.cs

@@ -643,6 +643,25 @@ public void CanReceiveNullParameterValueOnEnhancedNavigation(string renderMode)
  Assert.DoesNotContain(logs, log => log.Message.Contains("Error"));
  }
 
+ [Fact]
+ public void CanUpdateHrefOnLinkTagWithIntegrity()
+ {
+ // Represents issue https://github.com/dotnet/aspnetcore/issues/54250
+ // Previously, if the "integrity" attribute appeared after "href", then we'd be unable
+ // to update "href" because the new content wouldn't match the existing "integrity".
+ // This is fixed by ensuring we update "integrity" first in all cases.
+
+ Navigate($"{ServerPathBase}/nav/page-with-link-tag/1");
+
+ var originalH1Elem = Browser.Exists(By.TagName("h1"));
+ Browser.Equal("PageWithLinkTag 1", () => originalH1Elem.Text);
+ Browser.Equal("rgba(255, 0, 0, 1)", () => originalH1Elem.GetCssValue("color"));
+
+ Browser.Exists(By.LinkText("Go to page with link tag 2")).Click();
+ Browser.Equal("PageWithLinkTag 2", () => originalH1Elem.Text);
+ Browser.Equal("rgba(0, 0, 255, 1)", () => originalH1Elem.GetCssValue("color"));
+ }
+
  private void AssertEnhancedUpdateCountEquals(long count)
  => Browser.Equal(count, () => ((IJavaScriptExecutor)Browser).ExecuteScript("return window.enhancedPageUpdateCount;"));
 

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageWithLinkTag1.razor

@@ -0,0 +1,9 @@
+@page "/nav/page-with-link-tag/1"
+
+<h1>PageWithLinkTag 1</h1>
+
+<p>The header should be red</p>
+
+<a href="nav/page-with-link-tag/2">Go to page with link tag 2</a>
+
+<link rel="stylesheet" href="css/cssfile1.css" integrity="sha384-8mci8UV9AaVJGRJs90vuFCcaqfnGDVJaH+Uh1YRQk0Imw3L4+hBzIc4qL+FmyiF0" />

src/Components/test/testassets/Components.TestServer/RazorComponents/Pages/EnhancedNav/PageWithLinkTag2.razor

@@ -0,0 +1,9 @@
+@page "/nav/page-with-link-tag/2"
+
+<h1>PageWithLinkTag 2</h1>
+
+<p>The header should be blue</p>
+
+<a href="nav/page-with-link-tag/1">Go to page with link tag 1</a>
+
+<link rel="stylesheet" href="css/cssfile2.css" integrity="sha384-sfRwKnaRYdL1d+7xYj26gW0zWRIfmw+134w0KCaG6tGHXTkP+duQxbC9Ouukgv32" />

src/Components/test/testassets/Components.TestServer/wwwroot/css/.gitattributes

@@ -0,0 +1,2 @@
+cssfile1.css eol=lf
+cssfile2.css eol=lf

src/Components/test/testassets/Components.TestServer/wwwroot/css/cssfile1.css

@@ -0,0 +1,4 @@
+/* Used by PageWithLinkTag1 */
+h1 {
+ color: rgba(255, 0, 0, 1);
+}

src/Components/test/testassets/Components.TestServer/wwwroot/css/cssfile2.css

@@ -0,0 +1,4 @@
+/* Used by PageWithLinkTag2 */
+h1 {
+ color: rgba(0, 0, 255, 1);
+}