# Share URL parameters are properly encoded

- **Pattern:** `ab-001822` (`marketing-social-sharing.share-infrastructure.share-url-encoding`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001822
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001822)

## Why it matters

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.

## Severity rationale

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.

## Remediation

Wrap all dynamic values passed into social sharing URL query parameters with `encodeURIComponent`:

```ts
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.

## Detection

- **ID:** `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:

  ```ts
  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.

## External references

- cwe CWE-116

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001822