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?

Wald

What I'm not understanding is the reason why you'd want to remove the query-string from the URL. Is the content of the page changing in a way that the query-string is no longer relevant? – Ema

.htaccess would allow you to prettify the url, that can be turned into something like http://domain.com/searchfor/string. Would that be enough? If you're looking to get rid of string altogether, I don't think it's possible without POSTing. And you can't read POST data from html/js, only from the server end. – Gyromagnetic

Why does it bother you that you are making a restful application? – Bernete

Possible solution: #824849 – Zugzwang

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.

Kimbra

This looks like it will be the easiest to implement, handing code off to the other group now. – Wald

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

Cahill

This is a good solution, but will be more work to implement for this change. Upvote! – Wald

This is by far the best answer, but you should include, perhaps, how to hide specific parameters (e.g., http://example.com/index.html?search=cats&utm_source=app) where you want to hide the source for analytics but you want to include the search so users can share the link or bookmark it. – Trews

The only answer I needed. Thx a lot @lostsource. – Oldie

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.

Ema

We are, and in general it's a big ugly. – Wald

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.

Gentleman

Answer 5

Use this:

function urlParameter__to__HiddenFormVariables(sURL) {
    var query = sURL.split("?").pop().split("&");
    var split, elem;
    var formName = "frmTest";
    
    for (var i=0; i < query.length; i++ ) {
        split = query[i].split("=");

        $j('<input>').attr({
            type: 'hidden',
            name: split[0],
            value: split[1].replace(/"/g, '\\"')
        }).appendTo(formName);
    }
}

or

function urlParameter__to__HiddenFormVariables(sURL) {
    var query = sURL.split("?").pop().split("&");
    var split, elem;
    var formName = "frmTest";
    
    for (var i=0; i < query.length; i++ ) {
        split = query[i].split("=");

        var input = document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", split[0]);
        input.setAttribute("value", split[1].replace(/"/g, '\\"'));

        var x = document.getElementById(formName);
        if(x != null){
            x.appendChild(input);
        }
    }
}

Diegodiehard

When posting a block of code, it is helpful to explain what the code is doing and how to use it. For example, "the code inserts hidden elements into a form. When submit, the data appears at the server as if had been submit through a form POST" – Apuleius