Third party workers - async on all third-party URL's?

[amitkoth]

This question may seem noob-ish (apologies in advance).

In this Worker: https://github.com/cloudflare/worker-examples/tree/master/examples/third-party-scripts ... does every matching third-party script URL load async as each specified domain is discovered from the origin URL?

I'm unsure about the flow of how this works, exactly. Does the initial first-byte through to end of the body seed the third-party URL's which are then replaced with URL's in your own root domain, avoiding the round-trip to the third-party URL?

Unrelated - but do you consider the above script "production-ready"? I saw various TO-DO items in the code, and wondered when this might be safe for prime-time use.

I'm thinking of implementing this strategy of proxy-driven loading (which is smart) to get rid of tons of external service connections outside our root domain tallyfy.com for both our website and our SPA (Single Page App)/Angular app.

Is there any flags/gotchas with using such an approach for a SPA, rather than a website?

FYI - this is my draft domain array at the top of the script, in case it adds context.

const SCRIPT_URLS = [
    // Tallyfy public website needs these
    '/ajax.aspnetcdn.com/',
    '/ajax.cloudflare.com/',
    '/ajax.googleapis.com/ajax/',
    '/cdn.jsdelivr.net/',
    '/cdnjs.com/',
    '/cdnjs.cloudflare.com/',
    '/code.jquery.com/',
    '/maxcdn.bootstrapcdn.com/',
    '/netdna.bootstrapcdn.com/',
    '/oss.maxcdn.com/',
    '/stackpath.bootstrapcdn.com/',
    '/cdn.bibblio.org/',
    '/fonts.gstatic.com/',
    '/fonts.googleapis.com/',
    '/player.vimeo.com/',
    '/cdn.onesignal.com/',
    '/www.usefomo.com/',
    '/i.vimeocdn.com/',
    '/f.vimeocdn.com/',
    '/vimeo.com/',
    '/fresnel.vimeocdn.com/',
    '/cdn.firstpromoter.com/',
    '/w.chatlio.com/',
    '/api.chatlio.com/',
    '/stats.g.doubleclick.net/',
    // Tallyfy SPA Angular app (served off Cloudfront) needs these
    '/cdn.trackjs.com/',
    '/assets.calendly.com/',
    '/cdn.embedly.com/',
    '/cdn.mxpnl.com/',
    '/beacon-v2.helpscout.net/',
    '/usage.trackjs.com/',
    '/api.mixpanel.com/',
    '/cdn.ywxi.net/',
    '/cloudfront.net/',
    '/heapanalytics.com/',
    '/amazonaws.com/',
    '/www.mcafeesecure.com/',
    '/static.hotjar.com/',
    '/script.hotjar.com/',
    '/in.hotjar.com/',
    '/connect.facebook.net/',
    '/inspectlet.com/',
    // Popular scripts (can be site-specific)
    '/css3-mediaqueries-js.googlecode.com/svn/',
    '/html5shim.googlecode.com/svn/',
    '/html5shiv.googlecode.com/svn/',
    '/pagead2.googlesyndication.com/pagead/js/',
    '/platform.twitter.com/widgets.js',
    '/www.google.com/recaptcha/api.js',
    '/www.google-analytics.com/analytics.js',
    '/www.googletagmanager.com/gtag/js',
    '/www.googletagmanager.com/gtm.js',
    '/www.googletagservices.com/tag/js/gpt.js'
];

[pmeenan]

The scripts are not loaded async in the browser unless they were tagged as async originally. The URL in the HTML is just changed to point to your domain for the script. The edge will fetch the script when it is requested (if it is not in the edge cache). Technically that is a blocking operation for that specific fetch but it doesn't block any other requests that are in-flight (just like fetching a file normally).

The script should work fine as-is. The TODO's are mostly for theoretical potential optimizations but not enough to make a difference. It's worth noting that the script can only proxy requests that are actually in the HTML since that's what it modifies. If you have scripts injected by other scripts (like a full chain of 3rd-party requests or using a tag manager) then it won't see the other scripts. It should also only be used for static scripts that don't depend on user cookies. It's functionally equivalent to copting the script to your server.

You'll also want to be VERY aware of any security risks involved with serving the 3rd-party scripts from your origin since it will break any CSP protections you might be relying on.

It shouldn't matter for SPA or Website except that a SPA is much more likely to not have the 3rd-party scripts in the actual HTML template.

[lauragift21]

Closing this issue as the templates have now moved to workers-sdk monorepo located here: https://github.com/cloudflare/workers-sdk/tree/main/templates