fix: obfuscate mailto email addresses to prevent scraping (#106)#108
Merged
fix: obfuscate mailto email addresses to prevent scraping (#106)#108
Conversation
Encode contact email + cc as base64 at the server→client boundary in layout.tsx and decode them in a new MailtoLink client component via useEffect, so addresses never appear in SSR HTML or the hydration payload. Also remove the plaintext email and phone link entries from the footer per request — the primary CTA mailto button stays. Implements the fallback approach from the SSW rule when a contact form isn't feasible: https://www.ssw.com.au/rules/avoid-using-mailto-on-your-website Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 tasks
Member
|
@vercel Deploy? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #106.
Summary
contactEmail/contactCcas base64 at the server→client boundary incomponents/layout/layout.tsxand decode them in a new<MailtoLink />client component viauseEffect, so addresses never appear in SSR HTML or the hydration payload.pennywalker@ssw.com.auand+61 2 9953 3000link entries from the footer per request — the footer's primary CTA mailto button stays.Why
Issue #106 flagged that
mailto:hrefattributes were exposing plaintext email addresses to scrapers. Acceptance criteria called for the email contact to remain usable while removing the plaintext exposure across all occurrences.What changed
New
lib/email-obfuscation.ts— isomorphic base64 encode/decode +buildMailtoHrefhelper.components/ui/mailto-link.tsx—'use client'component that renders<a href="#contact">server-side and swaps to a realmailto:URL viauseEffectafter hydration. Forwards refs so it composes with<Button asChild>.Modified
components/layout/layout.tsx— encodescontactEmail/contactCconce and strips the plaintext fields before they reachLayoutProvider.components/layout/layout-context.tsx— exposesencodedContactEmail/encodedContactCcvia context.components/blocks/fbc-pricing.tsx,components/blocks/fbc-certification.tsx,components/blocks/fbc-cta-banner.tsx— swap<a href={mailtoLink}>…</a>for<MailtoLink>(still wrapped by<Button asChild>).components/layout/nav/footer.tsx— primary CTA now uses<MailtoLink>; deleted the deadlink.href.startsWith('mailto:…')branch and the duplicatecontactEmailLinkconstant.components/layout/nav/header.tsx— removed unusedmailtoLinkdead code.content/global/index.json— removedpennywalker@ssw.com.auand+61 2 9953 3000link entries.Editors keep entering plaintext into the TinaCMS Global → Contact Email field. Encoding is internal.
Test plan
pnpm install,pnpm dev, open http://localhost:3000pennywalker,adamcogan,9953 3000, andmailto:pennywalker/adamcogan— zero matches/admin), edit Global → Contact Email, save, verify a CTA opensmailto:with the new addresspnpm lintclean🤖 Generated with Claude Code