hide variables passed in URL

Question

We've been working on a web application and we've just about got it finished up, but there's one thing that bothering us (although by no means is it going to stop production.)

When we call one of the pages (index.html), we sometimes have to pass it a variable in the URL (searchid). So we get a page like http://domain.com/index.html?searchid=string.

We'd ideally like to not show the ?searchid=string, but I'm not sure how we'd do that.

My group doesn't own the index.html page (but we are working with the group that does), so I don't know how much we'd be able to do with anything like .htaccess or similar.

I was thinking about POSTing the variable, but I don't know how to receive it with just HTML and jQuery. Another person in my group thought that after the page loaded we could remove it from the URL, but I assume we would need a page refresh which would then lose the data anyway.

I'm trying to avoid XY problem where the problem is X and I ask about Y, so what's the right way to remove the variable from the URL?

Answer 1

Your question seems to indicate that the target page is not and will not be powered by some server-side script. If that's the case, I'd suggest changing the querystring to a hash, which has the advantage of being directly editable without triggering a page-load:

http://yourdomain.com/page.html#search=value

<script type='text/javascript'>
  // grab the raw "querystring"
  var query = document.location.hash.substring(1);

  // immediately change the hash
  document.location.hash = '';

  // parse it in some reasonable manner ... 
  var params = {};
  var parts = query.split(/&/);
  for (var i in parts) {
    var t = part[i].split(/=/);
    params[decodeURIComponent(t[0])] = decodeURIComponent(t[1]);
  }

  // and do whatever you need to with the parsed params
  doSearch(params.search);
</script>

Though, it would be better to get some server-side scripting involved here.

Answer 2

You can use the History API, but it does require a modern browser

history.replaceState({}, null, "/index.html");

That will cause your URL to appear as /index.html without reloading the page

More information here:

Manipulated the browser history

Answer 3

It's possible to rewrite the URL using JavaScript's history API. History.js is a library that does this very well.

That being said, I don't think there's any need for removing the query-string from the URL, unless you're dynamically changing the contents of the page to make the current query-string irrelevant.

Answer 4

You could post the data, then let the server include the posted data in the page, e.g.:

echo "<script> post_data = ".json_encode($_POST)." </script>";

This works cross-browser.