fix: Fix script injection issues

Fix #32
marsidev · Aug 31, 2023 · 56fe707 · 56fe707
1 parent c209682
commit 56fe707
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/packages/lib/src/lib.tsx b/packages/lib/src/lib.tsx
@@ -45,9 +45,9 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
  const scriptLoaded = useObserveScript(scriptId)
  const containerId = id ?? DEFAULT_CONTAINER_ID
 
- const onLoadCallbackName = `${
- scriptOptions?.onLoadCallbackName || DEFAULT_ONLOAD_NAME
- }#${containerId}`
+ const onLoadCallbackName = scriptOptions?.onLoadCallbackName
+ ? `${scriptOptions.onLoadCallbackName}#${containerId}`
+  : DEFAULT_ONLOAD_NAME
 
  const renderConfig = useMemo(
  (): RenderOptions => ({
@@ -187,10 +187,10 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
  and set turnstileLoaded to true. Different from the case when handle the injection,
  where we set turnstileLoaded in the script.onload callback */
  useEffect(() => {
- if (!injectScript && scriptLoaded && !turnstileLoaded && window.turnstile) {
+ if (scriptLoaded && !turnstileLoaded && window.turnstile) {
  setTurnstileLoaded(true)
  }
- }, [injectScript, turnstileLoaded, scriptLoaded])
+ }, [turnstileLoaded, scriptLoaded])
 
  useEffect(() => {
  if (!siteKey) {

diff --git a/packages/lib/src/use-observe-script.ts b/packages/lib/src/use-observe-script.ts
@@ -6,8 +6,7 @@ export default function useObserveScript(scriptId = DEFAULT_SCRIPT_ID) {
 
  useEffect(() => {
  const checkScriptExists = () => {
- const script = isScriptInjected(scriptId)
- if (script) {
+ if (isScriptInjected(scriptId)) {
  setScriptLoaded(true)
  }
  }

diff --git a/packages/lib/src/utils.ts b/packages/lib/src/utils.ts
@@ -2,8 +2,8 @@ import { ContainerSizeSet, InjectTurnstileScriptParams, RenderOptions } from './
 
 export const SCRIPT_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
 export const DEFAULT_SCRIPT_ID = 'cf-turnstile-script'
-export const DEFAULT_ONLOAD_NAME = 'onloadTurnstileCallback'
 export const DEFAULT_CONTAINER_ID = 'cf-turnstile'
+export const DEFAULT_ONLOAD_NAME = `onloadTurnstileCallback#${DEFAULT_CONTAINER_ID}`
 
 /**
  * Function to check if script has already been injected
@@ -26,6 +26,10 @@ export const injectTurnstileScript = ({
 }: InjectTurnstileScriptParams) => {
  const scriptId = id || DEFAULT_SCRIPT_ID
 
+ if (isScriptInjected(scriptId)) {
+ return
+ }
+
  const script = document.createElement('script')
  script.id = scriptId