fix: duplicate script injection when using multiple components

chore: add test for duplicate script injection fix
verto-health · Jul 4, 2024 · 718b085 · 718b085
1 parent 3deb99b
commit 718b085
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/cypress/e2e/ngx-turnstile.cy.ts b/cypress/e2e/ngx-turnstile.cy.ts
@@ -12,4 +12,23 @@ describe('tests the ngx-turnstile library', () => {
     cy.wait(3000);
     cy.contains('Value: XXXX.DUMMY.TOKEN.XXXX');
   });
+
+  // visits multiple routes and makes sure script is not injected multiple times
+  it('Passes Visiting Multiple Routes Example', () => {
+    cy.visit(Cypress.env('reactiveFormUrl'));
+    cy.wait(3000);
+    cy.contains('Value: XXXX.DUMMY.TOKEN.XXXX');
+
+    cy.visit(Cypress.env('templateDrivenFormUrl'), {
+      onBeforeLoad(win) {
+        cy.spy(win.console, 'warn').as('consoleWarn');
+      },
+    });
+    cy.wait(3000);
+    cy.contains('Value: XXXX.DUMMY.TOKEN.XXXX');
+    cy.get('@consoleWarn').should(
+      'not.be.calledWith',
+      '[Cloudflare Turnstile] Turnstile already has been loaded. Was Turnstile imported multiple times?.',
+    );
+  });
 });
diff --git a/projects/ngx-turnstile/src/lib/ngx-turnstile.component.ts b/projects/ngx-turnstile/src/lib/ngx-turnstile.component.ts
@@ -27,6 +27,7 @@ declare global {
   }
 }
 
+const SCRIPT_ID = 'ngx-turnstile';
 const CALLBACK_NAME = 'onloadTurnstileCallback';
 type SupportedVersion = '0';
 
@@ -83,8 +84,6 @@ export class NgxTurnstileComponent implements AfterViewInit, OnDestroy {
       },
     };
 
-    const script = document.createElement('script');
-
     window[CALLBACK_NAME] = () => {
       if (!this.elementRef?.nativeElement) {
         return;
@@ -96,7 +95,14 @@ export class NgxTurnstileComponent implements AfterViewInit, OnDestroy {
       );
     };
 
+    if (this.scriptLoaded()) {
+      window[CALLBACK_NAME]();
+      return;
+    }
+
+    const script = document.createElement('script');
     script.src = `${this._getCloudflareTurnstileUrl()}?render=explicit&onload=${CALLBACK_NAME}`;
+    script.id = SCRIPT_ID;
     script.async = true;
     script.defer = true;
     document.head.appendChild(script);
@@ -114,4 +120,8 @@ export class NgxTurnstileComponent implements AfterViewInit, OnDestroy {
       window.turnstile.remove(this.widgetId);
     }
   }
+
+  public scriptLoaded(): boolean {
+    return !!document.getElementById(SCRIPT_ID);
+  }
 }