Social sharing URLs constructed by string concatenation without encodeURIComponent break silently when the page URL or share text contains query parameters, ampersands, hash fragments, or non-ASCII characters. A share button that constructs https://twitter.com/intent/tweet?url=${pageUrl} where pageUrl is /products?id=42&color=red produces a malformed URL: the &color=red portion is interpreted as a second top-level parameter to the tweet intent, not part of the content URL. Per CWE-116, failure to encode output in the correct context causes encoding injection. The user-facing result is a broken share flow: the shared URL navigates to the wrong destination or fails to open entirely.
Medium because unencoded share URL parameters cause broken share flows for any page URL containing query parameters or special characters, directly affecting social distribution for parameterized routes.
Wrap all dynamic values passed into social sharing URL query parameters with encodeURIComponent:
const twitterShareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(pageUrl)}&text=${encodeURIComponent(shareText)}`
const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(pageUrl)}`
const facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(pageUrl)}`
Locate all share button components in your src/components/ directory and apply this pattern. Static hardcoded share URLs with no dynamic content do not require encoding.
ID: marketing-social-sharing.share-infrastructure.share-url-encoding
Severity: medium
What to look for: If the project has share buttons or links that construct social sharing URLs (e.g., https://twitter.com/intent/tweet?url=...&text=..., https://www.linkedin.com/sharing/share-offsite/?url=..., https://www.facebook.com/sharer/sharer.php?u=...), check that the URL and text parameters are properly encoded using encodeURIComponent. Look in component files for share button implementations, social share utility functions, and any hardcoded social share URLs. Count all instances found and enumerate each.
Pass criteria: All share button URLs use encodeURIComponent (or equivalent) on dynamic URL and text parameters. Static share URLs with no dynamic content are acceptable without encoding. At least 1 implementation must be confirmed.
Fail criteria: Any share button constructs a URL by concatenating a page URL or text directly into a sharing URL string without encoding (e.g., `https://twitter.com/intent/tweet?url=${pageUrl}` where pageUrl is not encoded).
Skip (N/A) when: No social share buttons or manual share link construction found in the codebase. Social sharing is handled entirely by native browser share API without custom URL construction.
Detail on fail: "Share button in components/ShareButton.tsx constructs Twitter share URL without encodeURIComponent — URLs with query parameters or special characters will be malformed"
Remediation: When constructing social sharing URLs, always encode the parameters:
const twitterShareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(pageUrl)}&text=${encodeURIComponent(shareText)}`
const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(pageUrl)}`
Failure to encode means that page URLs containing ?, &, or # will generate malformed sharing URLs, breaking the share flow for those pages.