Introduction

The part of a URL after the hash sign is called the fragment. Browsers use fragments for client side navigation and state, but fragments are not sent in HTTP requests to the server. If backend logic needs fragment information, client code must extract it and send it explicitly, because no server side framework can recover something the browser never transmitted.

Fragment Basics and Request Boundaries

URL structure has several parts, including path, query string, and fragment. Only path and query are included in network requests. Fragment remains in the browser.

Example URL:

https://example.com/dashboard?lang=en#tab=reports&range=7d

Server receives:

• Path: /dashboard
• Query: lang=en
• No fragment fields

Browser sees full URL including fragment.

Read Fragment in JavaScript

Use window.location.hash to access fragment string.

const raw = window.location.hash;
const fragment = raw.startsWith("#") ? raw.slice(1) : raw;
console.log(fragment);

If you encode key value pairs in fragment, parse with URLSearchParams.

1const params = new URLSearchParams(fragment);
2const tab = params.get("tab");
3const range = params.get("range");
4console.log(tab, range);

This avoids ad hoc string splitting and handles decoding correctly.

React to Fragment Changes

Single page applications often update fragment without full page reload. Listen for hashchange to react in real time.

1function readStateFromHash() {
2  const value = window.location.hash.replace(/^#/, "");
3  const params = new URLSearchParams(value);
4  return {
5    tab: params.get("tab") || "overview",
6    range: params.get("range") || "24h",
7  };
8}
9
10window.addEventListener("hashchange", () => {
11  const state = readStateFromHash();
12  console.log("updated state", state);
13});

This keeps UI state synchronized with URL fragments.

Send Fragment Data to Backend When Needed

If server must persist or validate fragment state, send it via API request.

1async function syncHashState() {
2  const state = readStateFromHash();
3  await fetch("/api/state", {
4    method: "POST",
5    headers: { "Content-Type": "application/json" },
6    body: JSON.stringify(state),
7  });
8}

Do not assume server frameworks can read fragment from incoming request objects.

Security and Privacy Notes

Fragments are not sent in HTTP requests, but they are still visible in browser history and sometimes in screenshots or copied links. Do not store secrets or authentication tokens in fragment values.

If sensitive state is needed, use secure cookies or server side sessions instead.

Fragment vs Query String

Use query string when server needs the value on first request. Use fragment when value is purely client side navigation or view state.

Typical pattern:

• Query for shareable server filtered resources.
• Fragment for client tab selection or panel location.

Clear separation prevents confusion in routing and analytics pipelines.

Another useful rule is to ask whether the value should affect cache keys or server rendered content. If yes, it belongs in the query string or path rather than in the fragment.

Debugging Tips

If you expect fragment on server and see null values:

1. Verify request URL on server logs, fragment will not appear.
2. Confirm client parser reads window.location.hash correctly.
3. Confirm API payload includes parsed values.
4. Confirm hashchange listener is registered before user interaction.

This sequence isolates client parser bugs quickly.

Routing Strategy in Single Page Apps

Front end routers often store route state in fragment mode for legacy compatibility. If your app uses hash based routing, keep API parameters separate from routing path segments to avoid parser confusion.

1// Example hash route style:
2// #/reports?tab=monthly&range=30d
3const route = window.location.hash.replace(/^#/, "");
4console.log(route);

When migrating from hash routing to history routing, verify analytics, deep links, and server fallback rules so old links continue to resolve correctly.

You may also need redirect logic that reads an old fragment route and maps it to the new path based format. That keeps bookmarked legacy links usable during a gradual migration.

Common Pitfalls

• Expecting backend request objects to include fragment values.
• Parsing fragment manually with brittle split logic.
• Forgetting to handle fragment updates after initial page load.
• Placing sensitive data in fragment parameters.
• Mixing query and fragment semantics without a clear routing policy.

Summary

• Fragment data after # is browser side state, not part of HTTP request payload.
• Parse fragment using window.location.hash and URLSearchParams.
• Listen for hashchange in dynamic frontends.
• Send fragment data explicitly to backend when server processing is required.
• Keep sensitive information out of fragments.