TASK: Call the Turnstile API on form interaction only

tmsdev · Feb 21, 2023 · e19be88 · e19be88
1 parent 1ba52aa
commit e19be88
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git a/Configuration/Settings.Cloudflare.Turnstile.yaml b/Configuration/Settings.Cloudflare.Turnstile.yaml
@@ -2,6 +2,8 @@ Tms:
   Cloudflare:
     Turnstile:
       enabled: true
+      lazyload: true
+      autoIncludeLazyloadScript: true
 
       # Turnstile endpoint & credentials
       endpoint: 'https://challenges.cloudflare.com/turnstile/v0/siteverify'

diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ Tms:
       secretKey: '%env:CLOUDFLARE_TURNSTILE_SECRET_KEY%'
 ```
 
-**Note:** In `Development` context we automatically set a [test key pair](https://developers.cloudflare.com/turnstile/frequently-asked-questions/#are-there-sitekeys-and-secret-keys-that-can-be-used-for-testing)
+> **Note:** In `Development` context the package automatically set a [test key pair](https://developers.cloudflare.com/turnstile/frequently-asked-questions/#are-there-sitekeys-and-secret-keys-that-can-be-used-for-testing)
 
 5.) Add the Turnstile form element to your form configuration or use the Turnstile content element in your node-based forms
 
@@ -44,6 +44,19 @@ prototype(Vendor.PackageName:MyForm) < prototype(Neos.Form.Builder:Form) {
 }
 ```
 
+## Notes
+
+By default, the Turnstile API is called on form interaction. Set `lazyload: false` to call the API on page load.
+
+```yaml
+# Configuration/Settings.yaml
+Tms:
+  Cloudflare:
+    Turnstile:
+      lazyload: true
+```
+
+
 ## Acknowledgments
 
 Development sponsored by [tms.development - Online Marketing and Neos CMS Agency](https://www.tms-development.de/)
diff --git a/Resources/Private/Fusion/Override.Page.fusion b/Resources/Private/Fusion/Override.Page.fusion
@@ -5,7 +5,22 @@ prototype(Neos.Neos:Page) {
             @if.inLiveWorkspace = ${!node.context.inBackend && node.context.workspaceName == 'live'}
             tagName = 'script'
             attributes {
-                src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
+                src = ${!Configuration.setting('Tms.Cloudflare.Turnstile.lazyload') && 'https://challenges.cloudflare.com/turnstile/v0/api.js'}
+                data-src = ${Configuration.setting('Tms.Cloudflare.Turnstile.lazyload') && 'https://challenges.cloudflare.com/turnstile/v0/api.js'}
+                data-cf-turnstile-api = true
+                async = true
+                defer = true
+            }
+        }
+        cloudflareTurnstileLazyload = Neos.Fusion:Tag {
+            @if.enabled = ${Configuration.setting('Tms.Cloudflare.Turnstile.enabled')}
+            @if.lazyload = ${Configuration.setting('Tms.Cloudflare.Turnstile.lazyload') && Configuration.setting('Tms.Cloudflare.Turnstile.autoIncludeLazyloadScript')}
+            @if.inLiveWorkspace = ${!node.context.inBackend && node.context.workspaceName == 'live'}
+            tagName = 'script'
+            attributes {
+                src = Neos.Fusion:ResourceUri {
+                    path = 'resource://Tms.Cloudflare.Turnstile/Public/JavaScript/Turnstile.js'
+                }
                 async = true
                 defer = true
             }

diff --git a/Resources/Public/JavaScript/Turnstile.js b/Resources/Public/JavaScript/Turnstile.js
@@ -0,0 +1,13 @@
+function cfTurnstileLazyload() {
+    let scriptTag = document.querySelector('[data-cf-turnstile-api]');
+    if (scriptTag) {
+        let forms = document.querySelectorAll('form');
+        Array.prototype.forEach.call(forms, function (form) {
+            form.addEventListener('input', function () {
+                let src = scriptTag.getAttribute('data-src');
+                scriptTag.setAttribute('src', src);
+            });
+        });
+    }
+}
+cfTurnstileLazyload();