Hide URL parameters and read them

Question

Is there any method to hide URL parameters and then read the hidden parameters with code? For example I have this in my page: "example.com/transaction.html?price=10".

I have tried to encode with Base64, but it doesn't work as expected (encoding works, decoding not), so I want to hide either the price=10 or transaction.html?price=10.

I heard that AngularJS could hide parameters, but can it read "hidden" parameters or how does it work?

Thanks in advance!

function getUrlVar() {
    var result = {};
    var location = window.location.href.split('#');
    var parts = location[0].replace(/[?&]+([^=&]+)=([^&]*)/gi,function(m,key,value) {
        result [key] = value;
    });
    return result;
}

Are you trying to read the parameters on the server or the client? — nnnnnn
– nnnnnn, Commented Jun 21, 2017 at 3:59
you should provide a jsfiddle or something similar so we can help you. — JV Lobo
– JV Lobo, Commented Jun 21, 2017 at 4:13
or you can just hash the price=10 to make it meanless to a user but your server will be able to de-hash and understand it (or your client side js will hash/de-hash too)? — Dalin Huang
– Dalin Huang, Commented Jun 21, 2017 at 4:15
by hide url parameters you mean that your website address should still look like www.something.com but still the data is loaded or when you are fetching the data the address should be encoded that no one is able to understand ? — warl0ck
– warl0ck, Commented Jun 21, 2017 at 4:36

warl0ck · Accepted Answer · 2017-06-21 05:05:05Z

2

If you don't want to show the query parameters to the users in the address bar, you can easily achieve it using Javascript or jquery also need to switch to angular just for this.

What you can do is instead of using <a href = ....> </a> to fetch the data for that query which will redirect the user to the link say www.something.com?price=10 instead of this what you can do is use a button as

<button type="button" onclick="fetch()">Fetch Data</button>

and in your Javascript file you can make a GET or POST request in this way these parameters you want to hide won't be shown, it's just these will be send to the server in background without changing your address.

To make this GET Request you can do something like assuming you are sending the data from a text field :

$("#button").click(function() {
      $.ajax({
          type: "POST",
          url: "www.something.com/",
          data: {
            price: $("#price")
          },
          success: function(data) {
            // do something with the data you received}
          });
      })

<input type=text id="price" />
<button id="button">Send</button>

Now you got the data in background without showing the parameters to the user in their address bar.

answered Jun 21, 2017 at 5:05

warl0ck

3,4845 gold badges31 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prayson W. Daniel Over a year ago

This will hide the parameters from url but not from network, yes? If one monitors the network, he/she will see the get/post call, no?

warl0ck Over a year ago

Yes correct, if someone is reading the network tab there is no other way to hide Paramus except to encrypt it before sending them.

JV Lobo · Accepted Answer · 2017-06-21 05:10:29Z

I've created a snippet for you, I think something like that is what you are asking for.

I made it quick, so it'd need lot of improvement, but at least you got something to begin with:

let paramsRaw = "price=10";
let urlEncoded = "example.com/transaction.html?" + btoa(paramsRaw);

function getUrlVar() {
  var location = urlEncoded; //window.location.href.split('#');
  var paramsEncoded = urlEncoded.split('?')[1];
  var paramsDecoded = atob(paramsEncoded);
  var paramsDecodedValue = paramsDecoded.split('=')[1];
  
  return parseInt(paramsDecodedValue);
}

let price = getUrlVar();

document.getElementById('result').innerHTML = price * 50;

<span id="result"></span>

Take a look to that and let me know.

Cheers!

WhiteDragon · Accepted Answer · 2017-06-21 04:41:26Z

0

AngularJS passes the params by using $urlRouterProvider, AngularJS $urlRouterProvider

Your parameters is included like this:

$stateProvider.state('toState', {
  url: /your-url
  templateUrl:'wokka.html',
  controller:'stateController',
  params: {
  'referer': 'some default', 
'param2': 'some default', 
'etc': 'some default'
}
});

and your parameter isn't included in link, you could run $state.go function with your parameters in the controller.

But i also think that AngularJS using Ajax mechanism so actually, it doesn't mean the page is reloaded, just url and js, html is loaded

It is just the angularJs way and maynot your need. I found the link can be useful: Code-project how to hide parameters in url

edited Jun 21, 2017 at 4:41

answered Jun 21, 2017 at 4:15

WhiteDragon

5211 gold badge8 silver badges14 bronze badges

5 Comments

Maher Over a year ago

Please improve your answer by how can i get params from controller?

WhiteDragon Over a year ago

By my way, i considered the "state" as a page when i change my link to new page. So, you can use $state.go('newState',{id: yourId}). In your routing file, $stateProvider .state('newState', { url: "/new",<br/> templateUrl: 'tpl.html', params: { id: null, }, controller: newStateController }) and at the newStateController , inject $state and you can get the id by $state.params.id

Maher Over a year ago

Get item by id is more Logical than set params in the state, because it's more dynamic

WhiteDragon Over a year ago

in this question's case, i think that use POST method with params instead of GET because in generally, GET request isn't safe

Timppa Over a year ago

I have never used AngularJS before so I am not really sure what that does and how to use it, however I will look up to your link

Collectives™ on Stack Overflow

Hide URL parameters and read them

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related