Hide URL parameters and read them

问题

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;
}

回答1:

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.

回答2:

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

回答3:

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!

回答4:

You can use input type hidden to transfer value from one page to another. For example

 <input type="hidden" name="price" value="10">

来源：https://stackoverflow.com/questions/44666648/hide-url-parameters-and-read-them

标签

javascript

html

angularjs

url

parameters