Link script without defer tag in app connect extension

Wappler Extensions How To
1

I'm building an app connect extension for Turnstile but I'm not able to link a script without the defer tag. Does someone know how to do that?

I tried:

linkFiles: [
        {
          src: 'js/turnstile/dmx-turnstile.js',
          type: 'js',
          defer: true
        },
        {
          src: 'https://challenges.cloudflare.com/turnstile/v0/api.js',
          type: 'js',
          defer: false
        }
      ],

linkFiles: [
        {
          src: 'js/turnstile/dmx-turnstile.js',
          type: 'js',
          defer: true
        },
        {
          src: 'https://challenges.cloudflare.com/turnstile/v0/api.js',
          type: 'js',
          defer: null
        }
      ],

linkFiles: [
        {
          src: 'js/turnstile/dmx-turnstile.js',
          type: 'js',
          defer: true
        },
        {
          src: 'https://challenges.cloudflare.com/turnstile/v0/api.js',
          type: 'js',
        }
      ],

But Wappler always adds this:

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" defer></script>
2

If you don't add the defer in the linkFiles it's still being added?

3

Yes I tried not adding it at all and setting it to null and false. But Wappler always adds defer.

4

Probably a stupid thought but is it because the link is to a CDN based asset? What happens if the link refers to a file within the local directory? Does this behavior still occur?

5

I just tested it with a local file and it behaves the same way.

1 Like
6

Was worth a shot Tobias.

1 Like
7

@George @patrick is this a bug?

8

Well it is not really a bug but by design decision. All App Connect addons are added with defer to make sure that app Connect is always loaded first as it is required.

Why wouldn’t you want to use a defer then?

9

Turnstile breaks if you defer this script. CF mentions that explicitly in their documentation. For now I will remove the script and add documentation for users of the extension to add it manually but it would be great to have the option to add scripts without defer.

10

There are many sites that use Turnstile that I cannot connect to. This is when I have my VPN turned on. In other words, I hate, with passion, Turnstile.

But to the point, Cloudflare itself uses async defer, as in

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
11

Another hair-brained thought... You could base64 encode the script tag hypothetically....

const scriptContent = '<script src="https://challenges.cloudflare.com/turnstile/v0/api.js"></script>';
const encodedScript = btoa(scriptContent);

const decodedScript = atob(encodedScript);
const scriptElement = document.createElement('script');
scriptElement.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
document.head.appendChild(scriptElement);

:slight_smile:

Actually may not even be any need with the above approach to encode the tag... But you get the idea.

12

@ben
Turnstile can be used to block site access or simply to protect forms. I'm using it only for the later so it won't prevent site access even if a visitor uses a VPN. It`s also possible to offer other verification options whenever a manual Turnstile verification fails. I've tested my integration in a production environment and there wasn't a single error during 50k plus clearances.

The docs where they use async/defer are a little outdated. They have more up to date docs via console.

@Cheese That would work but I might have found a cleaner solution. I will use this as a fallback though if my other solution does not work. Thank you!

1 Like
13

@George can we make a script async by default? I tried "async":true without success.

14

explain the defer and async script loading in connection to app connect

15

The async property is currently not supported within extensions. It seems that the defer was hardcoded to force it for some old extensions, but it should just respect the properties set with linkFiles and should not add it when defer is set to false. We can't fix it work for previous Wappler versions but will fix it in for future Wappler versions.

Why does Turnstile break when you defer the script, a defer will load the script async without blocking the html parser and executes the scripts in order just before DOM ready.

1 Like
16

Thanks @patrick
I already made the extension work with defer but now I want to add async as well. So it would be nice to have the options to add async, defer or none of these in future versions of Wappler.