First, check out how incredibly easy it is to write a Cloudflare Worker to proxy another URL:
addEventListener("fetch", (event) => {
event.respondWith(
fetch("https://css-tricks.com")
);
});
It doesn’t have any error handling or anything, but hey, it works:
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/10/proxy.png?resize=1902%2C1380&ssl=1)
Now imagine how some websites give you a URL to JavaScript in order to do stuff. CodePen does this for our Embedded Pens feature.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/10/CleanShot-2021-10-21-at-15.24.33@2x.png?resize=2210%2C2102&ssl=1)
That URL is:
https://cpwebassets.codepen.io/assets/embed/ei.js
I can proxy that URL just as easily:
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/10/proxy-js.png?resize=2196%2C1688&ssl=1)
Doing nothing special, it even serves up the right content-type
header and everything:
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/10/CleanShot-2021-10-21-at-15.25.39@2x.png?resize=2196%2C1688&ssl=1)
Cloudflare Workers gives you a URL for them, which is decently nice, but you can also very easily “Add a Route” to a worker on your own website. So, here I’ll make a URL on CSS-Tricks to serve up that Worker. Lookie lookie, it does just what it says it’s going to do:
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/10/Screen-Shot-2021-10-21-at-3.29.28-PM.png?resize=1916%2C1410&ssl=1)
So now, I could do….
<script src="/super-real-url/codepen-embeds.js"></script>
Right from css-tricks.com
and it’ll load that JavaScript. It will look to the browser like first-party JavaScript, but it will really be proxied third-party JavaScript.
Why? Well nobody is going to block your first-party JavaScript. If you were a bit slimy, you could run all your scripts for ads this way to avoid ad blockers. I have mixed feelings there. I feel like if you wanna block ads you should be able to block ads without having to track down specific scripts on specific sites to do that. On the other hand, proxying some third-party resources sometimes seems kinda fine? Like if it’s your own site and you’re just trying to get around some CORS issue… that would be fine.
More in the middle is something like analytics. I recently blogged “Comparing Google Analytics and Plausible Numbers” where I discussed Plausible, a third-party analytics service that “is built for privacy-conscious site owners.” So, ya know, theoretically trustable and not third-party JavaScript that is terribly worrisome. But still, it doesn’t do anything to really help site visitors and is in the broad category of analytics, so I could see it making its way onto blocklists, thus giving you less accurate information over time as more and more people block it.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/10/CleanShot-2021-10-21-at-15.51.11@2x.png?resize=1968%2C1862&ssl=1)
But as we talked about, very few people are going to block first-party JavaScript, so proxying would theoretically deliver more accurate information. In fact, they have docs for proxying. It’s slightly more involved, and it’s over my head as to exactly why, but hey, it works.
I’ve done this proxying as a test. So now I have data from just using the third-party JavaScript directly (from the last article):
Metric | Plausible (No Proxy) | Google Analytics |
---|---|---|
Unique Visitors | 973k | 841k |
Pageviews | 1.4m | 1.5m |
Bounce Rate | 82% | 82% |
Visit Duration | 1m 31s | 1m 24s |
And can compare it to an identical-in-length time period using the proxy:
Metric | Plausible (Proxy) | Google Analytics |
---|---|---|
Unique Visitors | 1.32m | 895k |
Pageviews | 2.03m | 1.7m |
Bounce Rate | 81% | 82% |
Visit Duration | 1m 35s | 1m 24s |
So the proxy really does highly suggest that doing it that way is far less “blocked” than even out-of-the-box Plausible is. The week tested was 6%ยน busier according to the unchanged Google Analytics. I would have expected to see 15.7% more Unique Visitors that week based on what happened with the non-proxied setup (meaning 1.16m), but instead I saw 1.32m, so the proxy demonstrates a solid 13.8% increase in seeing unique visitors versus a non-proxy setup. And comparing the proxied Plausible setup to Google Analytics directly shows a pretty staggering 32% more unique visitors.
With the non-proxied setup, I actually saw a decrease in pageviews (-6.6%) on Plausible compared to Google Analytics, but with the proxied setup I’m seeing 19.4% more pageviews. So the numbers are pretty wishy-washy but, for this website, suggest something in the ballpark of 20-30% of users blocking Google Analytics.
- I always find it so confusing to figure out the percentage increase between two numbers. The trick that ultimately works for my brain is
(final - initial) / final * 100
.
Are there ethical considerations here; Bypassing blocks people might be expecting to keep their privacy secure… How do you apply this with those considerations in play, allowing some sort of opt-in/out or as part of a privacy configuration.
Having a same-origin proxy for ads is not just slimy, as you named it. It’s outright dangerous, as you will bypass all cross-origin protections. Please don’t do this, ever.
While ads are especially subsceptible for running malicious code, it’s probably best to avoid this in general.
Yeah, this is not a great idea. Apart from obvious slimyness of hiding ads on your origin, this is an XSS vector waiting to happen, with full access to your JS local data and with 0 CORS protection in there.
Sorry but if the script is a third party script would have full access too; isnt’it?
I can see some quite useful use-cases for this in development environments. But in production it is very slimy indeed.
CORS exists for a reason, and this negates it completely. Awful idea.
Great ideas, better tracking of the users is always a plus and while the ads part may be a security issue it can be minimized, it depends on the website.
Adjacent to this, GA4 offers server-side tracking via Google Tag Manager. It is worth a gander.
I don’t think ad tracking works when it’s proxied.
I have used Amazon Lambda, not these Workers yet.
Nice article many thanks!
A related article i read was this:
https://web.dev/efficiently-load-third-party-javascript/
In particular the last 2 section.
I don’t understand the article comments about the security concern.
Who wrote the comments could give more details about security, with real example.
I don’t see difference beetwen first party and third party scripts in terms of security