Encrypt variables in the URL

Asked

Viewed 219 times

0

With @dvd solution, we pass variables to the URL through a select: /a/277883/95735

There are several that look like this when they are passed: example.com/? background=img&cor=red

What I’d like to do now is: encrypt the variable and its value in the URL.

More or less like this: example.com/? d5t9a15d2a54ds54d5

javascript

  • For what purpose to do this ?

  • @Marcelorafael to short the URL with the variables passed.

  • You can convert the parameters to base64 with the btoa, but I’m telling you, it’s not gonna go down.

2 answers

2


You can change the URL in the browser with history.pushState. To generate a variable number, you can take system time with new Date().getTime() and put in the URL preserving past variables.

The URL in the browser would look something like: 

example.com/?1520231465457

The code would look like this:

document.addEventListener("DOMContentLoaded", function(){

   var url_short = new Date().getTime(),
       url_ = location.href,
       param = url_.substring(url_.lastIndexOf("/")+1, url_.length),
       params = ['layout','sidebar']; // insira aqui os nomes das variáveis

   history.pushState(null, '', '?'+url_short);

   for(var y=0; y<params.length; y++){
      if(param.indexOf(params[y]) != -1){

         var var_ = url_.substring(url_.indexOf(params[y])+params[y].length+1,url_.length).match(/^(\d|\w){1,}/)[0],
             a_ = document.body.querySelectorAll("a");

         document.body.querySelector("#"+params[y]).value = var_;

         for(var x=0; x<a_.length; x++){
            a_[x].href += (a_[x].href.indexOf("?") == -1 ? "?" : "&")+params[y]+"="+var_;
         }
      }
   }

   var sels = document.querySelectorAll("select");

   for(var x=0; x<sels.length; x++){
      sels[x].addEventListener("change", function(){

         var sId = this.id,
             sVa = this.value;

         if(sVa && url_.indexOf(sId) == -1){

            location.href = url_+(url_.indexOf("?") == -1 ? "?" : "&")+sId+"="+sVa;

         }else if(sVa && url_.indexOf(sId+"="+sVa) == -1){

            var var_ = url_.substring(url_.indexOf(sId)+sId.length+1,url_.length).match(/^(\d|\w){1,}/)[0];

            location.href = url_.replace(sId+"="+var_, sId+"="+sVa);

         }

      });
   }

});

Test page.

  • I applied it here, and it’s working as expected, I imagine that the small delay that exists in the browser input when masking the past vars is something inevitable in this case.

  • I’ll take a closer look at this delay and see if it can improve.

  • and a reset button would be possible?

  • as well as a button?

  • a button to reset all variables.

  • Just refresh the page without the variables.

  • Let’s go continue this discussion in chat.

  • these issues only you can resolve. https://answall.com/q/281563/95735

  • Do you want the value in pixels or %? Say, image 300x200, will give a ratio of 1.5... you want to convert that 1.5 in q?

  • It is in %, it is all based here: https://codepen.io/EightArmsHQ/full/OMGOyE/ 300x200 is equal to 66.67%; it is put in the padding-bottom

Show 5 more comments

1

Use the package Crypto-js

Just uncork the first var search to take the parametres 

//var search = window.location.search;
var search = '?name=fulaninho&pass=12312313&address=rua+dos+taubatucos+numero+22';
var pass   = '9090';

var enc = CryptoJS.AES.encrypt(search, pass).toString();
var dec = CryptoJS.AES.decrypt(enc, pass).toString(CryptoJS.enc.Utf8);

console.log(search);
console.log(enc);
console.log(dec);
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>

You asked to make the URL short, for me this is not possible. But it is there, in a certain way adds a little security to your application

  • I am trying to apply your solution to this https://answall.com/a/277883/95735code

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.