I just set up a Cloudflare Worker domain, but do not fully understand what it can do. I have a problem I would like to resolve. My static website loads an external script file that inserts a store within my static page (Ecwid provides the store script). That one external script then loads other additional external scripts for various other things, some needed and some not. My question is whether or not Cloudflare Workers could “intercept” one of those other external scripts, or the url it is being retrieved from, and block it from ever executing / downloading. that way, when the user visits my page, it is one less resource that needs to be downloaded. I hope that made sense. Thanks for any insight.
Not sure what you’re trying to stop, Ecwid has HTML, JS and CSS in separate requests in the the static page response. For the Ecwid store layout to work, you need both the CSS and the JS, or you’ll see plain html.
If you’re like me and don’t want the enormous 1.5MB CSS file to load twice, jumping the CPU to 100%, there’s no way to reliably do that (and still keep static page layout) unfortunately, since the CSS is always loaded via the JS widget and it’s nested in the script.
I’ve already submitted this as an issue to Ecwid, but I doubt they’ll care.
Thank you so much for your thoughts. I have discovered over time and lots of playing around, that I am able to download their primary script and a few other of their scripts locally on my machine successfully without issue versus having then all run externally from ecwid and cloudfront. It was cool and all, but to run a cron that downloads the primary script like every minute (or less) to check for any changes in it, so that I can then also download all the newly changed script files, just isnt really feasible. But there is one script that I could add to my own JS file and run local without issue, and then there is another one called i.js that downloads from “ecomm.events” that’s doesnt seem needed. Was just hoping that there was a way to block these two from ever being downloaded with Workers.
Unfortunately there isn’t any future-safe way to check for such changes, since it’s the initial ecwid script that load all of the extra scripts. You could of course monkey-patch the script, you can do that even in the client where you include it, but like you say, it would break the second that Ecwid makes any changes to the script functions that you’re patching.
Personally, I think Ecwid should focus on de-bloating their scripts and CSS, I’m quite sure it could be at least half the size. It would be even better if they would make it into modules, so we can choose what parts we need and don’t need.
Agreed 100% on all your points with Ecwid. It was a fun project playing with the files locally while it lasted … So though, the question still stands, on whether Cloudflare Workers is capable of intercepting (for the lack of a better word) an external js file being loaded and block it? Is that possible or not in the realm of what Workers can do? I thought I saw somewhere that it could combine multiple resource requests into one request (which would also be sweet if it could do this for Ecwid’s files), so it sort of sounded like it could pull something like blocking a specific script file from loading, but dunno.
You can only block things from the source, like HTML, you cannot control what JS scripts do.
… Any other thoughts on any way to accomplish my mission? Again as example, the main ecwid script file loads a script called i.js from https://ecomm.events.i.js
Any method of stopping/blocking this specific js file from loading via any other means at all? I tried firewall rules to block referers / urls / hosts / IPs to no avail so far. I am obviously a newbie at this, so taking any and all ideas.
It is the client that is fetching the file (Browser) which means you cannot block it from loading.
You can only use workers to control requests to your Cloudflare domain.
Therefore, if you can express what you want to do to the code you’re referring to in “find X text and replace with Y” type terms then you can do it quite easily by rewriting the script URL to point to a URL on your domain which executes a worker. That worker you would then write to fetch the external code and modify (e.g. find/replace) it on the fly before returning it to the browser.
This can be a rabbithole though, as you may run into CORS issues so you really need to understand the external code and how it behaves really well, and also beware that with it being external they could introduce breaking changes that could cause you issues.
Thank you for the input. The terminology is getting the best of me, so here is exactly what Workers would have to do:
Ecwid provides me a script snippet for me to plug in to my HTML page to make their store appear. The snippet looks like this:
That snippet goes external to their server and grabs their 1 primary js file that controls everything. Then that one primary js file goes out and grabs about 6 other script files, also from external sources, to perform other duties.
All I want to be able to do is make a modification/tweak to the primary js file before it goes out to snag all the other js files and/or before the end user gets the files. For example, it would be awesome if right after the primary js file is retrieved from Ecwid, Workers could somehow do a text search/replace within that primary file to remove links to the un-needed js files. This way they do not get downloaded by the end user. I do not need all the js files it wants to retrieve, so it wastes resources and bandwidth.
Hope that made sense. Possible? Pipe dream?
If you know exactly which scripts/resources you need and do not need, you can use
Content-Security-Policy within your Worker which only allows specific scripts to load. You can do this using a
sha256 hash of the script/s you want to use, thereby excluding all others from being able to run on your site. Take the script itself, not the URL from which it’s loaded, and use this tool by Scott Helme:
Then, use the
script-src 'sha256-976wfYeAHI/3sepfji9FH3LvOUzir1Qcdgn+daZa1Dw=' ''sha256-fnUhyj97k7zTUEaPkYzNmSL27ZFeEw+dtoNfFxaMMZI=' within your policy. That’s assuming you’re using two of the scripts. If it’s one you’d have only one sha256 hash in your policy. Only the script/s matching the exact hash/es you’ve got listed will function.
I think it’s better to download the main script in a worker, do regexp replace on the script URI you want to block and point it to an empty JS file (on your server or in a worker, but it has to be a JS file). And then hope that the main script doesn’t use anything from that file (If it does, you’ll get an error).
And then you return the main, modified script into the browser to use as the Ecwid script replacement.
I did play with CSP a little with htaccess with some success but ran into problem due to the way that Ecwid manipulates the files. IT would get through most of the files successfully, but then error on something else that it was trying to load that did not have a reference url for me to whitelist. At least not that I could figure out. Would probably be the same problem using Workers. I might re-investigate.
Now this sounds like what I was hoping for. So you feel like this is doable, and if so, would you be willing to have a go at it if I paid you? I am under no impression that I could pull this off in any way. I would love you help.
Honestly, this is a wild goose-chase, you might get it to work but it will break eventually.
I like chasing geese …I am willing to give it a shot. By the way, just as an example of a change that I made while testing local files, there is a line of code inside the primary js file that looks like this (if you are running ecwid too, I’d be curious if it is in yours too):
When I was running this primary js locally, I simply went in there and removed the link between the quotes making it:
This solved my problem of loading this un-necessary js file. The site runs perfectly fine without it. Any way to do that with your method?
So you want to disable Heap Analytics?
Keep in mind that modifying Ecwid core files like this, is not allowed in their Terms and Conditions.
Which is why I cannot help you get this working.
Hmmm…didnt realize it was against there ToS. Never really read through them. In that case, I probably wont mess with this stuff then. I do appreciate all your input and thoughts.
There’s usually a limit where tinkering goes over the border to reverse-engineering, I’d consider this such a case and when that happens, there’s always ToS to consider
One last question in that regard then. Would I be violating ToS if I was able to block things from loading via CSP. In that scenario, I am not modifying their code, but simply blocking it from loading, and at the same time making my site more secure in the process? Maybe with enough tinkering, I could make CSP work somehow. Just a thought. Also, do I really need heap analytics? I recently eliminated GA which has not hurt my rankings so far and improved my GTMetrix scores quite a bit as well due to not loading the extra stuff.