search

verto-health / ngx-turnstile

Cloudflare Turnstile for Angular
https://ngx-turnstile.pages.dev/
MIT License
62 stars 13 forks source link

Duplicate Script Injection in Head Tag When Using ngx-turnstile Component #29

Closed khaperets closed 4 months ago

khaperets commented 4 months ago

Every time the ngx-turnstile component is used, a script tag is added to the head section of the HTML. This leads to multiple script tags being injected, which can cause performance issues and potential conflicts.

Reproduction Steps:

  1. Add the ngx-turnstile component to a page or component.
  2. Inspect the head section of the HTML document.
  3. Observe the script tag: <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&amp;onload=onloadTurnstileCallback" async="" defer=""></script>
  4. Navigate to another page or component where ngx-turnstile is used.
  5. Inspect the head section again and notice the duplication of the script tag.

Expected Behavior: The script tag should be added to the head section only once, regardless of how many times the ngx-turnstile component is used.

Actual Behavior: Each use of the ngx-turnstile component results in an additional script tag being injected into the head section.

Possible Solution: Implement a check to ensure the script is only added once to the head section, regardless of how many times the ngx-turnstile component is instantiated.

Error in console: [Cloudflare Turnstile] Turnstile already has been loaded. Was Turnstile imported multiple times?.

AleksanderBodurri commented 4 months ago

Thanks for reporting this @khaperets. Will cut a release later today with the fix from #31

khaperets commented 4 months ago

Thanks!!!