Cloudflare's Email Address Obfuscation may cause crashing on hydration

[7nik]

Describe the bug

Cloudflare's Email Address Obfuscation feature replaces emails in text with something like

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="205744534b4d54474d48601112160e434f4d">[email&nbsp;protected]</a>

and then restores before SvelteKit hydration. If there is a text before and/or after the email, it results in multiple text nodes in a row, while only one is expected.

Example of such malformed DOM:

Reproduction

Found on not mine site on a personal page.

Logs

Uncaught (in promise) DOMException: Node.appendChild: Cannot add children to a Text

System Info

Svelte 5

Severity

annoyance

[trueadm]

I have no idea how we can support these external services that mess about with the HTML output of the SSR payload. Other than suggesting people don't use them or complain to CloudFlare that their implementation is buggy.

[7nik]

I agree that it's an external bug and the best solution is to ask CF to also merge text nodes during the restoring. But it needs a simple public reproduction, and I don't even have a CF account.

[nelisgz]

According to the Cloudflare documentation, one can prevent the obfuscation using html comments <!--email_off-->contact@example.com<!--/email_off-->

This way, Cloudflare doesn't change the dom, which causes the hydration to fail.

To keep the html comments in the output, use:

{@html '<!--email_off-->'}{user.email}{@html '<!--/email_off-->'}

Note: For a public-facing app where you actually want the obfuscation to happen, perhaps this workaround is not preferred.