How to encrypt and decrypt URL in JavaScript?

Question

In this guide, we will explain how you can pass secure and sensitive data in a Formyoula URL using AES encryption. If you have any questions, please email us [email protected].

Table of Contents Show

Definition and Usage
Return Value
Browser Support
How to encrypt a URL in JavaScript?
How to decrypt a URL in JavaScript?
How to encrypt and decrypt data in JavaScript?
How do I encrypt a URL?

Sharing a form link publicly with sensitive data and record id's in the URL can lead to security issues. To overcome these issues, Formyoula URL's allow users to pass confidential information using AES encryption.Please use the encrypt method of Salesforce crypto apex class to encrypt JSON data from Salesforce.Contact Formyoula support to generate a secure SHA 256 key, that will be used to encrypt and decrypt secure query strings.

Once the key is generated, the SHA 256 key can be found on the account setup page ( https://app.formyoula.com/setup/account ).

The initialisation vector must be 128 bits (16 bytes.) and should be first 16 bytes of the SHA 256 key.

Salesforce example to create encrypted data.

//Set Key
Blob key = Blob.valueOf('tx@M_VCmD#yccau9&A?%7%xfjAC?7%s8');
// Get first 16 bytes of SHA 256 key.
Blob iv = Blob.valueOf('tx@M_VCmD#yccau9');
// Data should be a valid JSON
Blob  data = Blob.valueOf( '{"f17a-b50e-22ea": "secure value", "f677-a8a9-8872" : "record id"}');
String encrypted_data = EncodingUtil.base64Encode(Crypto.encrypt('AES256', key, iv, data));

JavaScript example using CryptoJS library.

//Create Key
var key = CryptoJS.enc.Utf8.parse('tx@M_VCmD#yccau9&A?%7%xfjAC?7%s8');
//Get Iv
var iv = CryptoJS.enc.Utf8.parse('tx@M_VCmD#yccau9');
//Data to be encrypted
var pw = CryptoJS.enc.Utf8.parse( '{"f17a-b50e-22ea": "secure value", "f677-a8a9-8872" : "record id"} );
//Encrypt
var encrypted = CryptoJS.AES.encrypt(pw, key,{ iv: iv});
//Encrypt string
var encrypted_data = encrypted.toString();

Now the encrypted_data can be passed into the Formyoula form URL using f_d query string value.

Please see below example URL.https://app.formyoula.com/mobile?form_id=5c5d4ef2cb373100143d75bf&f_d=7pojog%2Bi4yWI7aPzmpe6fQHoSi%2FWWlFPC5H4RVd%2Bjs7Pm3%2BjpOoRcUabJpqiIs47iSSWrh%2BsBG0Zntn9B5B0vIvxMK9bj93g6i%2BhWI8P2vQ%3D

Example

Encode a URI:

let uri = "my test.asp?name=ståle&car=saab";
let encoded = encodeURI(uri);

Try it Yourself »

Definition and Usage

The encodeURI() method encodes a URI.

Syntax

Parameters

ParameterDescriptionuriRequired.
The URI to encode.

Return Value

TypeDescriptionA string.The encoded URI.

Browser Support

encodeURI() is an ECMAScript1 (ES1) feature.

ES1 (JavaScript 1997) is fully supported in all browsers:

ChromeEdgeFirefoxSafariOperaIEYesYesYesYesYesYes

User-666819122 posted

Hi, I have found a close match to your requirement.

The thing is that you need to do a client side XOR encyption, and decrypt again serverside. There are debates over the "visible" client side encryption, however, something is better than nothing.

js code:

 password = document.getElementById('txtPassword').value;

var xorKey = 129; /// you can have other numeric values also.

    var result = "";
    for (i = 0; i < password.length; ++i) {
        result += String.fromCharCode(xorKey ^ password.charCodeAt(i));
    }

send this to the server by available means (form submit / query string / handler / request.form)

now @ server side (I had used c# code)

public bool Authenticate(string userName, string password)
    {
        byte result = 0;

        StringBuilder inSb = new StringBuilder(password);
        StringBuilder outSb = new StringBuilder(password.Length);
        char c;
        for (int i = 0; i < password.Length; i++)
        {
            c = inSb[i];
            c = (char)(c ^ 129); /// remember to use the same XORkey value you used in javascript
            outSb.Append(c);
        }
        password = outSb.ToString();

       // your rest of code
    }

This I have tested and found to work flawlessly in my project too..

The good thing is that the data is "safe" from being seen even if Fiddler is used.

Happy coding.

Links to refer: http://th.atguy.com/mycode/xor_js_encryption/
http://www.eggheadcafe.com/tutorials/csharp/8b53894c-a889-4914-8c46-122980cc44ae/simple-xor-encryption.aspx

Encoding and Decoding URI and URI components is a usual task in web development while making a GET request to API with query params. Many times construct a URL string with query params and in order to understand it, the response server needs to decode this URL. Browsers automatically encode the URL i.e. it converts some special characters to other reserved characters and then make the request. For eg: The space character ” ” is either converted to + or %20.

Example:

Open www.google.com and write a search query “geeks for geeks”.
After search results appear, observe the browser’s URL bar. The browser URL will consist %20 or + sign in place of space.
The URL will be displayed be like: https://www.google.com/search?q=geeks%20for%20geeks or https://www.google.com/search?q=geeks+for+geeks

Note: The browser converted the spaces into + or %20 signs automatically.

There are many other special characters and converting each of them by hardcode will be tedious. JavaScript provides the following functions to perform this task:

Encoding a URL: Encoding in Javascript can be achieved using

encodeURI function
escape()

JavaScript encodeURI Function: The encodeURI() function is used to encode complete URI. This function encodes the special character except for (, / ? : @ & = + $ #) characters.

Syntax:

encodeURI( complete_uri_string )

Javascript

https://www.google.com/search?q=geeks%20for%20geeks

2

https://www.google.com/search?q=geeks%20for%20geeks

3

https://www.google.com/search?q=geeks%20for%20geeks

4

https://www.google.com/search?q=geeks%20for%20geeks

5

https://www.google.com/search?q=geeks%20for%20geeks

6

https://www.google.com/search?q=geeks%20for%20geeks

3

https://www.google.com/search?q=geeks%20for%20geeks

8

https://www.google.com/search?q=geeks%20for%20geeks

3

encodeURIComponent( uri_string_component )

0

encodeURIComponent( uri_string_component )

1

Output:

https://www.google.com/search?q=geeks%20for%20geeks

JavaScript encodeURIComponent() Function: The encodeURIComponent() function is used to encode some parts or components of URI. This function encodes the special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #

Syntax:

encodeURIComponent( uri_string_component )

Output:

geeks%20for%20geeks

Difference encodeURIComponenet and encodeURI:

encodeURIComponentencodeURIDefinitionThe encodeURIComponent() function is used to encode some parts or components of URIThe encodeURI() function is used to encode complete URI. SyntaxencodeURIComponent( uri_string_component )encodeURI( complete_uri_string )Special Character Encoding This function encodes the special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #This function encode the special character except (, / ? : @ & = + $ #) characters.

JavaScript escape() function: This function takes a string as a single parameter & encodes the string that can be transmitted over the computer network which supports ASCII characters. Encoding is the process of converting plain text into ciphertext.

Syntax:

escape( string )

Note: The escape() function only encodes the special characters, this function is deprecated.

Exceptions: @ – + . / * _

Javascript

https://www.google.com/search?q=geeks%20for%20geeks

2

https://www.google.com/search?q=geeks%20for%20geeks

3

https://www.google.com/search?q=geeks%20for%20geeks

4

https://www.google.com/search?q=geeks%20for%20geeks

5

https://www.google.com/search?q=geeks%20for%20geeks

6

https://www.google.com/search?q=geeks%20for%20geeks

3

https://www.google.com/search?q=geeks%20for%20geeks

8

encodeURIComponent( uri_string_component )

9

https://www.google.com/search?q=geeks%20for%20geeks

3

encodeURIComponent( uri_string_component )

0

https://www.google.com/search?q=geeks%20for%20geeks

3

geeks%20for%20geeks

3

geeks%20for%20geeks

4

geeks%20for%20geeks

5

geeks%20for%20geeks

6

encodeURIComponent( uri_string_component )

1

Output:

https://www.google.com/search?q=geeks%20for%20geeks
https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks

Decoding a URL: Decoding in Javascript can be achieved using

decodeURI() function.
unescape() function.

JavaScript decodeURI() Function: The decodeURI() function is used to decode URI generated by encodeURI().

Syntax:

decodeURI( complete_encoded_uri_string )

Example: This example describes the decodeURI() function of Javascript.

Javascript

https://www.google.com/search?q=geeks%20for%20geeks

2

https://www.google.com/search?q=geeks%20for%20geeks

3

https://www.google.com/search?q=geeks%20for%20geeks

4

escape( string )

1

https://www.google.com/search?q=geeks%20for%20geeks

6

https://www.google.com/search?q=geeks%20for%20geeks

3

escape( string )

4

https://www.google.com/search?q=geeks%20for%20geeks

3

escape( string )

6

encodeURIComponent( uri_string_component )

1

Output:

https://www.google.com/search?q=geeks for geeks

JavaScript decodeURIComponent() Function: The decodeURIComponent() function is used to decode some parts or components of URI generated by encodeURIComponent().

Syntax:

decodeURIComponent( encoded_uri_string_component )

Example: This example describes the decodeURIComponent() of Javascript.

Javascript

https://www.google.com/search?q=geeks%20for%20geeks

2

https://www.google.com/search?q=geeks%20for%20geeks

3

https://www.google.com/search?q=geeks%20for%20geeks
https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks

0

https://www.google.com/search?q=geeks%20for%20geeks
https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks

1

https://www.google.com/search?q=geeks%20for%20geeks

3

https://www.google.com/search?q=geeks%20for%20geeks
https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks

3

https://www.google.com/search?q=geeks%20for%20geeks

3

https://www.google.com/search?q=geeks%20for%20geeks
https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks

5

encodeURIComponent( uri_string_component )

1

Output:

geeks for geeks

Difference decodeURIComponent and decodeURI:

decodeURIComponentdecodeURIDefinitionThe decodeURIComponent() function is used to decode some parts or components of URI generated by encodeURIComponent().Decoding in Javascript can be achieved using decodeURI function.SyntaxdecodeURIComponent( encoded_uri_string_component )decodeURI( complete_encoded_uri_string )Special Character Encoding It takes encodeURIComponent(url) string so it can decode these characters.It takes encodeURI(url) string so it cannot decoded characters (, / ? : @ & = + $ #)Example

decodeURIComponent(“%41”) It returns “A”

decodeURIComponent(“%26”): It returns “&”

decodeURI(“%41”): It returns “A”

decodeURI(“%26”): It returns “%26”

JavaScript unescape() Function: This function takes a string as a single parameter and uses it to decode that string encoded by the escape() function. The hexadecimal sequence in the string is replaced by the characters they represent when decoded via unescape() function.

How to encrypt a URL in JavaScript?

The “encodeURI()” method is utilized for encoding or encrypting the URL by passing the string as an argument. It encodes the special character excluding (A-Z a-z 0-9, / ? : @ & = + $ #) characters and returns a new string as an output that indicates the string is encoded as URI(Uniform Resource Identifier).

How to decrypt a URL in JavaScript?

Decoding a URL.

decodeURI() function − The decodeURI() function is used to decode the URI, i.e., converting the special characters back to the original URI language..

decodeURIComponent() function − This function decodes the complete URL back to its original form..

How to encrypt and decrypt data in JavaScript?

To decrypt the ciphertext back into the original plain text message, we can use the following decryption function: const decrypted = CryptoJS. AES. decrypt(encrypted, key);