Cloudflare Is Breaking My SVGs?(lloydatkinson.net)
lloydatkinson.net
Cloudflare Is Breaking My SVGs?
https://www.lloydatkinson.net/posts/2024/stupid-problems-require-stupid-solutions-cloudflare-is-breaking-my-svgs/
55 comments
Might this happen if the author did not have the Mime type set correctly when serving his .svg assets?
Based on the article, it's happening before anything gets served, it's specifically happening during the Astro build phase, but only on the Cloudflare build machines. So by the time it comes to serve the assets, stuff is already broken.
My guess would be that there is some specific bit of information set during the build that triggers this incorrect build in Astro, and this information is set only by the Cloudflare build process. But here the people from Cloudflare are struggling to reproduce that effect, so it looks very specific to this person's setup.
My guess would be that there is some specific bit of information set during the build that triggers this incorrect build in Astro, and this information is set only by the Cloudflare build process. But here the people from Cloudflare are struggling to reproduce that effect, so it looks very specific to this person's setup.
Did you get a reply from the author? I've been nerd-sniped so I'm very keen to know what the problem actually was.
So this is not Cloudflare, the hosting service, renaming SVG attributes as they are served, but the Cloudflare Pages build process hooked to the developer's Git repo.
Weird behaviour. I'm interested in reading the actual reason that build ends up doing this.
(Side note: I really wish people would leave out the image memes when writing something like this. The animated one at the end even makes it hard to read the final paragraph.)
Weird behaviour. I'm interested in reading the actual reason that build ends up doing this.
(Side note: I really wish people would leave out the image memes when writing something like this. The animated one at the end even makes it hard to read the final paragraph.)
Yeah, really weird. I'm raising this internally to figure out WTF. OP can email me (jgc@cloudflare) with account details but I'm doing my own test right now on jgc.org.
EDIT: OP please drop me an email. Three of us internally at Cloudflare have tried to reproduce this and failed and we need to chat with you about what's in your build process so we can try to narrow this down. Cheers!
I made a simple test: https://jgc.org/svg and we made a couple more using Astro: https://misty-mouse-d370.pages.dev/hello and https://cec6e042.laz-svg-test-assets.pages.dev/.
EDIT: OP please drop me an email. Three of us internally at Cloudflare have tried to reproduce this and failed and we need to chat with you about what's in your build process so we can try to narrow this down. Cheers!
I made a simple test: https://jgc.org/svg and we made a couple more using Astro: https://misty-mouse-d370.pages.dev/hello and https://cec6e042.laz-svg-test-assets.pages.dev/.
Did you get a reply from the author? I've been nerd-sniped so I'm very keen to know what the problem actually was.
Turn on reader mode.
I really empathize with the author, having dealt with many similar weird issues myself. To Cloudflare's credit however, since most of the Pages/Workers stuff is open source, one can usually find the problem in the source code and submit a fix oneself.
It's an example of a product that's well designed, generous in its free-tier, yet occasionally confounding, probably due to the speed their team moves.
Also wanted to add that I appreciate the author writing about the bug and their debugging process. That's definitely something I wish I had done more of, instead of thinking at the time 'I filed the issue, does the whole world need to know about this?'
(Sometimes daily reading of HN can have this effect, I think)
Then months go by, the issue I filed was moved or something happened to it, and I lost a way of tracking it... So I think it's important to a.) file the issues but b.) document the issue in your own way while everything's fresh in your mind.
It's an example of a product that's well designed, generous in its free-tier, yet occasionally confounding, probably due to the speed their team moves.
Also wanted to add that I appreciate the author writing about the bug and their debugging process. That's definitely something I wish I had done more of, instead of thinking at the time 'I filed the issue, does the whole world need to know about this?'
(Sometimes daily reading of HN can have this effect, I think)
Then months go by, the issue I filed was moved or something happened to it, and I lost a way of tracking it... So I think it's important to a.) file the issues but b.) document the issue in your own way while everything's fresh in your mind.
Thank you for your kind words. I found myself wishing I wrote more of how I debug while I wrote it and will be doing more of it. As you say, issue trackers (even GitHub) sometimes suffer from being swamped and neglected.
Did you end up filing an issue?
I think the Cloudflare folks in this thread are being very polite; but this is bug report is missing key details. It's reminiscent of taking a screenshot of a build error.
I investigate a lot of esoteric bugs at work and I always push people for a https://sscce.org/.
In this case what would have helped massively:-
- A minimal astro page with the a broken svg hosted on CF pages (using npm create astro@latest -- --template minimal)
- The same hosted on Netlify
- a public github repo that contains the minimal repro.
- A link to your internal build output that the CF folks could look at internally
- Exactly how you are including the SVG in the Astro build (I played with it and it appears there are 2-3 ways)
I always try and put myself in the place of receiving a bug report and this is the kind of thing I end up including in the bug report.
I investigate a lot of esoteric bugs at work and I always push people for a https://sscce.org/.
In this case what would have helped massively:-
- A minimal astro page with the a broken svg hosted on CF pages (using npm create astro@latest -- --template minimal)
- The same hosted on Netlify
- a public github repo that contains the minimal repro.
- A link to your internal build output that the CF folks could look at internally
- Exactly how you are including the SVG in the Astro build (I played with it and it appears there are 2-3 ways)
I always try and put myself in the place of receiving a bug report and this is the kind of thing I end up including in the bug report.
Do you have html/js/css minification turned on in your cloudflare account/domain?
It seems from the articles conclusion that it shouldn't be related. But I had similar issues with SVG and css when I first deployed my nuxt app to CF pages. I only thought to try turning off CF minification because there was some tiny footnote about it being an issue on CF somewhere in the nuxt docs or maybe GH issues.
It seems from the articles conclusion that it shouldn't be related. But I had similar issues with SVG and css when I first deployed my nuxt app to CF pages. I only thought to try turning off CF minification because there was some tiny footnote about it being an issue on CF somewhere in the nuxt docs or maybe GH issues.
I forgot to mention that. No, I have all of that turned off. Turns out it’s being deprecated soon anyway.
> Sorry, you have been blocked
> You are unable to access lloydatkinson.net
shrug
shrug
Don't you just love internet balkanization?
Hey, at least here cloudflare isn't inserting captchas into json (turns out Roundcube webmail breaks horribly when someone does that!)
Cloudflare and its captchas are the scourge of the modern internet. Especially if you run a VPN on your router. The amount of times I’ve been in seemingly endless click-the traffic-light loops is just ridiculous.
Many of the times I’ll just refuse to use the site, but some things I need to endure.
They clearly have no incentive to be better either. The pain falls entirely on the visitor.
If you can’t tell I’m human then you’re doing it wrong.
Many of the times I’ll just refuse to use the site, but some things I need to endure.
They clearly have no incentive to be better either. The pain falls entirely on the visitor.
If you can’t tell I’m human then you’re doing it wrong.
> If you can’t tell I’m human then you’re doing it wrong.
I'm gonna go out on a limb and say that if multiple multi-billion dollar companies struggle with it, then it's less of a solved problem than you're implying.
> Especially if you run a VPN on your router.
Very few people do this, and almost all of them are also using ad blockers. If using Cloudflare protects a site from thousands of bot attacks while inconviencing a few real users with esoteric setups, that tradeoff is well worth it for most site owners.
I've set up Cloudflare on hundreds of websites and when you look at the amount of nasty stuff it blocks, it quickly becomes clear why it's needed. If you want to blame someone, blame the Russian and Chinese governments (among others) for doing little to nothing about their unfathomably massive botnets.
I'm gonna go out on a limb and say that if multiple multi-billion dollar companies struggle with it, then it's less of a solved problem than you're implying.
> Especially if you run a VPN on your router.
Very few people do this, and almost all of them are also using ad blockers. If using Cloudflare protects a site from thousands of bot attacks while inconviencing a few real users with esoteric setups, that tradeoff is well worth it for most site owners.
I've set up Cloudflare on hundreds of websites and when you look at the amount of nasty stuff it blocks, it quickly becomes clear why it's needed. If you want to blame someone, blame the Russian and Chinese governments (among others) for doing little to nothing about their unfathomably massive botnets.
Most abuse on the internet comes over VPNs, so why is it surprising when website operators make you jump through hoops if you choose to blend in with low quality VPN traffic?
Also, why would it be easy to tell that your request is from one of the good guys?
Also, why would it be easy to tell that your request is from one of the good guys?
[deleted]
Cloudflare definitely used to replace JavaScript by an HTML Captcha page, which obviously went well. But it's been a while since that last happened to me.
I've been using cloudflare pages like two years now and all svg icons are doing normal they're supposed to. I use Sveltekit.
So I think, it's between your framework and cloudflare pages.
So I think, it's between your framework and cloudflare pages.
CloudFlare is cancer: Sorry, you have been blocked
You are unable to access lloydatkinson.net
Why have I been blocked?
This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.
That is some site owner that has configured Cloudflare to block you. It's the same thing as an establishment hiring security guards to block access.
That is some site owner who wanted free cdn/ddos protection, accepted the default settings, and has no way of knowing which the blocked users are blocked wrongly.
I used to use cloudflare on my static website and I had no idea I was blocking all tor users until someone on HN let me know.
Cancer is too strong a word though. It’s more like a bad case of jock itch IMHO.
I used to use cloudflare on my static website and I had no idea I was blocking all tor users until someone on HN let me know.
Cancer is too strong a word though. It’s more like a bad case of jock itch IMHO.
I use Cloudflare Pages, and having heard these sorts of stories from HN and other places, I did spend some time exploring the settings to ensure the largest number of people could access the site. My impression was that the default settings were pretty much the loosest options around. In particular, for Tor, I would have needed to manually enable to block (it's off by default), and even then, Cloudflare automatically generates a magnet link for each site they host, and allow Tor browser users to automatically redirect to those magnet links.
I agree that it's a bit opaque, but I think that comes with the territory. If Cloudflare could tell you exactly which groups were getting blocked, then DDOS protection wouldn't be so big a problem in the first place - you just select all the bad actors and block them, and you're fine.
I agree that it's a bit opaque, but I think that comes with the territory. If Cloudflare could tell you exactly which groups were getting blocked, then DDOS protection wouldn't be so big a problem in the first place - you just select all the bad actors and block them, and you're fine.
I agree, default "Medium" firewall setting is the very first thing I change on a new site.
What error code specifically you get?
>and asking around on the Cloudflare Discord
How was that? Last time I tried to submit a bug report there the experience was terrible ...
How was that? Last time I tried to submit a bug report there the experience was terrible ...
The Cloudflare Discord is interesting. It's mostly maintained by community volunteers (Champs and MVPs), with team participation varying drastically from team to team. The community does a great job when they can, but it doesn't feel like most teams are empowered to help people there. There are some fantastic employees who do help regularly though, but as far as I know, most employees are doing this out of kindness, since it's not actually part of their role (whether Cloudflare should make this a part of some folks roles is definitely something they should think about heavily).
The best way in Discord is to post in a forum channel like #pages-help or #general-help. There's tooling the community has to actively monitor and reply to those, vs a fast-moving text channel where things can be buried quickly. This is one of the reasons Discord isn't a great platform for offering support.
Community Champs / MVPs have the ability to escalate some things, but posting on HN will always get more attention. We've been raising issues around some things that are impacting lots of people every single day (wrangler.toml + Pages config breaking projects regularly for example), but if you want something fixed quickly, making some noise on social media is always going to be the quickest way, sadly.
The best way in Discord is to post in a forum channel like #pages-help or #general-help. There's tooling the community has to actively monitor and reply to those, vs a fast-moving text channel where things can be buried quickly. This is one of the reasons Discord isn't a great platform for offering support.
Community Champs / MVPs have the ability to escalate some things, but posting on HN will always get more attention. We've been raising issues around some things that are impacting lots of people every single day (wrangler.toml + Pages config breaking projects regularly for example), but if you want something fixed quickly, making some noise on social media is always going to be the quickest way, sadly.
Hi. We definitely don’t want anyone to have a bad experience on Discord and are working on a project to improve it.
Please let me know what you think we should improve (either here or email me [email protected])
Please let me know what you think we should improve (either here or email me [email protected])
In the past very helpful for different issues. This time around, still helpful but I noticed a lot of (alleged) Cloudflare employees (based on their username colour) were talking at the time and none of them seemed very interested.
I'm interested: [email protected].
Can you email the details?
Sure thing!
Thank you. I am happy to hear all your difficulties and complaints and get them to the right people.
Sounds like some OS dependency / shared library problem. Maybe caused by MUSL libc vs Glibc or different versions of e.g. libpcre2.
At least if it is not something as simple as an uncomitted file.
Disclaimer: I have never used CloudFlare Pages or Netlify.
Disclaimer: I have never used CloudFlare Pages or Netlify.
Not sure if it's related, I had to disable Cloudflare's "Rocket Loader" feature 3 days ago. It suddenly started breaking the hamburger menu / menu accordion ~4-5 days ago.
Title should be cloudflare pages, as the CDN doesn’t cause this issue.
> The easy approach would be to run a string replacement over the build output, but this is far too destructive and error-prone. It would also stop me from writing this post!
Tell me you refuse to learn awk/sed (even Windows compatible versions such as from Git Bash, WSL, or Cygwin) without telling me you refuse to learn awk/sed.
Tell me you refuse to learn awk/sed (even Windows compatible versions such as from Git Bash, WSL, or Cygwin) without telling me you refuse to learn awk/sed.
This isn't a solution, because then you'd run into problems the moment those keywords are used in a different context, for example in this blog post describing the bug. Any language you may fancy has a parser readily available these days, there's no reason not to use it.
That is exactly why I used an actual parser not some glorified regex. Thank for you rebutting their ridicilous remark. I even literally said in their quote.
Why anyone would think a glorified regex is a solution to updating deeply nested HTML elements is beyond me, is the famous "HTML regex"[1] answer not enough? As bad a sugesting Chrome should just be a wrapper for sed/awk.
[1]: https://stackoverflow.com/questions/1732348/regex-match-open...
Why anyone would think a glorified regex is a solution to updating deeply nested HTML elements is beyond me, is the famous "HTML regex"[1] answer not enough? As bad a sugesting Chrome should just be a wrapper for sed/awk.
[1]: https://stackoverflow.com/questions/1732348/regex-match-open...
You've invoked the canonical rant: https://stackoverflow.com/a/1732454/2640937
It's been a while since that one's crossed my browser. This is the first time I've noticed the moderator's note at the bottom:
"Moderator's Note
This post is locked to prevent inappropriate edits to its content. The post looks exactly as it is supposed to look - there are no problems with its content. Please do not flag it for our attention."
"Moderator's Note
This post is locked to prevent inappropriate edits to its content. The post looks exactly as it is supposed to look - there are no problems with its content. Please do not flag it for our attention."
If you're using a meme to make a point, you should probably just make your point and see if your comment is worthwhile once it's not relying on a rhetorical gimmick.
I'll try: "You could've used awk/sed". Great comment?
I'll try: "You could've used awk/sed". Great comment?
For image processing, use a proper SaaS dedicated to it: https://www.gumlet.com/image-optimization/
An important note: React-based frameworks tend to use camelCase attributes vs. hyphen-case (which is the output) in components: including the icon library being used here. Something during the build process is not converting them to hyphen-case.
* I've pasted a decently complex SVG exported from Figma into a Remix component verbatim (hyphen-attributes) and it renders fine: https://9b14a265.test-broken-svgs-remix.pages.dev/ (scroll down)
* I've rewritten those attributes to camelCase: and again, renders fine - https://1af766a8.test-broken-svgs-remix.pages.dev/
* This is all deployed via the Pages Build system; no local builds at all.
* Someone else on the team has an Astro example stood up with the specific unplugin-icons library: https://astro-svg.pages.dev/ - cannot reproduce the invalid SVG attributes.
We're going to continue investigating but don't see this as widespread and don't yet have any other reports. That there is a _difference_ between the direct deploy vs. using Pages Builds is a problem, though. We've also asked the Astro folks to understand if there's something up here as well.
(If not clear: I work at Cloudflare)