Blazor Stop Requiring unsafe-inline in CSP

src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectDisplay.ts

@@ -37,10 +37,26 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
     ];
 
     this.modal.style.cssText = modalStyles.join(';');
-    this.modal.innerHTML = '<h5 style="margin-top: 20px"></h5><button style="margin:5px auto 5px">Retry</button><p>Alternatively, <a href>reload</a></p>';
-    this.message = this.modal.querySelector('h5')!;
-    this.button = this.modal.querySelector('button')!;
-    this.reloadParagraph = this.modal.querySelector('p')!;
+
+    this.message = this.document.createElement('h5') as HTMLHeadingElement;
+    this.message.style.cssText = 'margin-top: 20px';
+
+    this.button = this.document.createElement('button') as HTMLButtonElement;
+    this.button.style.cssText = 'margin:5px auto 5px';
+    this.button.textContent = 'Retry';
+
+    const link = this.document.createElement('a');
+    link.addEventListener('click', () => location.reload());
+    link.textContent = 'reload';
+
+    this.reloadParagraph = this.document.createElement('p') as HTMLParagraphElement;
+    this.reloadParagraph.textContent = 'Alternatively, ';
+    this.reloadParagraph.appendChild(link);
+
+    this.modal.appendChild(this.message);
+    this.modal.appendChild(this.button);
+    this.modal.appendChild(this.reloadParagraph);
+
     this.loader = this.getLoader();
 
     this.message.after(this.loader);
@@ -63,7 +79,6 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
         this.failed();
       }
     });
-    this.reloadParagraph.querySelector('a')!.addEventListener('click', () => location.reload());
   }
 
   show(): void {
@@ -98,16 +113,34 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
     this.button.style.display = 'block';
     this.reloadParagraph.style.display = 'none';
     this.loader.style.display = 'none';
-    this.message.innerHTML = 'Reconnection failed. Try <a href>reloading</a> the page if you\'re unable to reconnect.';
-    this.message.querySelector('a')!.addEventListener('click', () => location.reload());
+
+    const errorDescription = this.document.createTextNode('Reconnection failed. Try ');
+
+    const link = this.document.createElement('a');
+    link.textContent = 'reloading';
+    link.setAttribute('href', '');
+    link.addEventListener('click', () => location.reload());
+
+    const errorInstructions = this.document.createTextNode(' the page if you\'re unable to reconnect.');
+
+    this.message.replaceChildren(errorDescription, link, errorInstructions);
   }
 
   rejected(): void {
     this.button.style.display = 'none';
     this.reloadParagraph.style.display = 'none';
     this.loader.style.display = 'none';
-    this.message.innerHTML = 'Could not reconnect to the server. <a href>Reload</a> the page to restore functionality.';
-    this.message.querySelector('a')!.addEventListener('click', () => location.reload());
+
+    const errorDescription = this.document.createTextNode('Could not reconnect to the server. ');
+
+    const link = this.document.createElement('a');
+    link.textContent = 'Reload';
+    link.setAttribute('href', '');
+    link.addEventListener('click', () => location.reload());
+
+    const errorInstructions = this.document.createTextNode(' the page to restore functionality.');
+
+    this.message.replaceChildren(errorDescription, link, errorInstructions);
   }
 
   private getLoader(): HTMLDivElement {

src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts

@@ -209,6 +209,8 @@ function addGlobalModuleScriptTagsToDocument(callback: () => void) {
   // The callback is put in the global scope so that it can be run after the script is loaded.
   // onload cannot be used in this case for non-file scripts.
   window['__wasmmodulecallback__'] = callback;
+
+  // Note: Any updates to the following script will require updating the inline script hash if using CSP
   scriptElem.text = 'var Module; window.__wasmmodulecallback__(); delete window.__wasmmodulecallback__;';
 
   document.body.appendChild(scriptElem);

src/Components/Web.JS/tests/DefaultReconnectDisplay.test.ts

@@ -76,7 +76,7 @@ describe('DefaultReconnectDisplay', () => {
         expect(display.loader.style.display).toBe('none');
     });
 
-    it('update message with current attempt', () => { 
+    it('update message with current attempt', () => {
         const maxRetires = 6;
         const display = new DefaultReconnectDisplay('test-dialog-id', maxRetires, testDocument, NullLogger.instance);