Javascript URI decode not performing as expected - javascript

I am using the following javascript method to decode a URL.
decodeURIComponent();
When entering the encoded version in the browser it shows the expected image. Following the use of the above decode function, the new URL does not display the image.
How can I decode this properly?
The URL is:
Encoded:
"https://external.xx.fbcdn.net/safe_image.php?d=AQB9-zMODCId1OZa&w=128&h=128&url=https%3A%2F%2Fscontent.xx.fbcdn.net%2Fhprofile-xpa1%2Fv%2Ft1.0-1%2Fp200x200%2F12289537_1025015047521253_6948708859100232371_n.png%3Foh%3Dd4b09489497f8705ca75467bd6af54e9%26oe%3D578DF677&upscale=1&ext=jpg”
Decoded:
"https://external.xx.fbcdn.net/safe_image.php?d=AQB9-zMODCId1OZa&w=128&h=128&url=https://scontent.xx.fbcdn.net/hprofile-xpa1/v/t1.0-1/p200x200/12289537_1025015047521253_6948708859100232371_n.png?oh=d4b09489497f8705ca75467bd6af54e9&oe=578DF677&upscale=1&ext=jpg"

The decodeURIComponent() function isn't decoding your URI the way you expect because it's really only intended to work with strings that were previously encoded with encodeURIComponent().
Instead, you want to use decodeURI().
var url = 'https://external.xx.fbcdn.net/safe_image.php?d=AQB9-zMODCId1OZa&w=128&h=128&url=https%3A%2F%2Fscontent.xx.fbcdn.net%2Fhprofile-xpa1%2Fv%2Ft1.0-1%2Fp200x200%2F12289537_1025015047521253_6948708859100232371_n.png%3Foh%3Dd4b09489497f8705ca75467bd6af54e9%26oe%3D578DF677&upscale=1&ext=jpg';
var decoded = decodeURI(url);
document.write(decoded);

Related

why is j: or s: are added when setting cookie

I was intending to set a cookie, and want do to some work with that in client side JS.
While decoding the URI through decodeURIComponent() function, some undesired characters were appended before the URI and also in decoded URI. I did a quick fix by removing some of the first characters in my URI and decoding it to get JSON,
I would like to know why was j: added in URI and also how to deal with it.
Also : It looks right i.e nothing was appended in cookie when seeing decoded URI in DevTools
For setting my cookie having name as note with JS object
res.cookie('note',note,{maxAge : 1000*60*60*24});
let decoded = decodeURIComponent(document.cookie.substring(9, ));
decoded = JSON.parse(decoded);
I did this to decode my cookie
and converting JSON I got from decodeURIComponent fun to JS Object which I want to use
I tried encoding my object with encodeURIComponent but it seems it automatically get encoded.

Encode in Java and Decode in Javascript

I want to pass a Base64 Image to the front end in a parameter.
I tried to send normal Base64 but it was giving me an error, probably because of the special characters in the Base64 Image.
So I tried in Java:
String base64Signature = Base64.getEncoder().encodeToString(image); // Encode to base64
return URLEncoder.encode(base64Signature, "utf-8"); // This class contains static methods for converting a String to the application/x-www-form-urlencoded MIMEformat
And in Javascript data.Signature has the image data. Neither
vm.Signature = data.Signature;
or
vm.Signature = decodeURIComponent(data.Signature);
worked. I copied the image data String in a online converter and it didn't display anything.
How should I do this?
The problem could be that Java's URLEncoder encodes spaces as + signs and JavaScript's decoder expects spaces as %20s. You can try replacing the + signs, for example:
decodeURIComponent(data.Signature.replace(/\+/g, '%20'));

base64 encoding in javascript decoding in php

I am trying to encode a string in javascript and decode it in php.
I use this code to put the string in a inputbox and then send it via form PUT.
document.getElementById('signature').value= b64EncodeUnicode(ab2str(signature));
And this code to decode
$signature=base64_decode($signature);
Here there is a jsfiddle for the encoding page:
https://jsfiddle.net/okaea662/
The problem is that I always get a string 98% correct but with some different characters.
For example: (the first string is the string printed in the inputbox)
¦S÷ä½m0×C|u>£áWÅàUù»¥ïs7Dþ1Ji%ýÊ{\ö°(úýýÁñxçO9Ù¡ö}XÇIWçβÆü8ú²ðÑOA¤nì6S+̽ i¼?¼ºNËÒo·a©8»eO|PPþBE=HèÑqaX©$Ì磰©b2(Ðç.$nÈR,ä_OX¾xè¥3éÂòkå¾ N,sáW§ÝáV:ö~Å×à<4)íÇKo¡L¤<Í»äA(!xón#WÙÕGù¾g!)ùC)]Q(*}?­Ìp
¦S÷ ä½m0×C|u>£áWÅàUù»¥ïs7Dþ1Ji%ýÊ{\ö°(úýýÁñxçO9Ù¡ö}XÇIWçβÆü8ú²ðÑOA¤nì6S+̽ i¼?¼ºNËÒo·a©8»eO|PPþBE=HèÑ qaX©$Ì磰©b2(Ðç.$nÈR,ä_OX¾xè¥3éÂòkå¾ N ,sá W§ÝáV:ö~Å×à<4)íÇKo¡L¤<Í»äA(!xón#WÙÕGù¾g!)ùC)]Q(*}?­Ìp
Note that the 4th character is distinct and then there is one or two more somewhere.
The string corresponds to a digital signature so these characters make the signature to be invalid.
I have no idea what is happening here. Any idea? I use Chrome browser and utf-8 encoding in header and metas (Firefox seems to use a different encoding in the inputbox but I will look that problem later)
EDIT:
The encoding to base64 apparently is not the problem. The base64 encoded string is the same in the browser than in the server. If I base64-decode it in javascript I get the original string but if I decode it in PHP I get a slightly different string.
EDIT2:
I still don't know what the problem is but I have avoided it sending the data in a blob with ajax.
Try using this command to encode your string with js:
var signature = document.getElementById('signature');
var base64 = window.btoa(signature);
Now with php, you simply use: base64_decode($signature)
If that doesn't work (I haven't tested it) there may be something wrong with the btoa func. So checkout this link here:
https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
There is a function in there that should work (if the above does not)
function b64EncodeUnicode(str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
}));
}
b64EncodeUnicode(signature); // "4pyTIMOgIGxhIG1vZGU="

Check if part of URL is encoded

i've the following URL and I decode it which is working fine but the issue is that part of the URL is not encoded, there is a way to check which part of the URL is encoded and Decode just it. I need to decode it and do some logic and then encode it again and the problem is that I encode parts which doesn't need to encoded
for example this is the URL
http%3A%2F%2Fm-d6fe73.m.corp%3A506%2Flin%2Fcalack&client_id=ts2.node
As you can see the calack&client_id=ts2.node is not encoded here and it can be any parameter in the URL
This should work:
var url = 'http%3A%2F%2Fm-d6fe73.m.corp%3A506%2Flin%2Fcalack&client_id=ts2.node';
var result = url.split('&').map(function(item){
return (item.indexOf('%')>=0)? decodeURIComponent(item) : item;
});
console.log(result.join('&')); // will give you: http://m-d6fe73.m.corp:506/lin/calack&client_id=ts2.node

Error in displaying base64 encoded string as image in browser?

I am working on a website for a friend which takes in a signature from a wacom STU-300 signature tablet, to then be placed in the database. (as any data type as long it is readable, I tried BLOB and varchar). After checking the documentation I found out that there is a method where you can retrieve the data as a base64 encoded string after taking the signature. This is an example I printed from a signature after extracting the base64 encoded string:
"RlP5QhsBHAECGUVDFxYZVCQFBwkDBggLBA0MFB0cGhsYFTgCIgUgJx3EG8LuM6ZpqwR8ScEztVwTqbxuB8+gFfRUzHv7lXdFA46EAUMBARcEA1dITxYCASAZIgQgcKIShjL9FJx63Xpnkli3HoFMatdpMwfX7Bg528NKz2JUAgE0JAEBBQoBBQCsTaD5BQIABwoBBQDEE/mABgIBCQgBBQAAkE4EAAMJAmABCAIDXQAQBmcCYOIfBghgkBgoNERQYGhsdISAmJyktLCsoJSMeHBMMAvrz7egHl/5+gHs97/Dy8wvQP128/Lv6+jk3tzX1NEHQ+09jcB3/eDb2tcHVo2OHr+QgYKj5QX212fH17cGZURTYvHx4V/ACGoCYMMHCAhj/QkNEBIBF/QZFBMNBwP9+PPs497WAdO90tPX2drb2Nvf5u/4AAkSHiYxNz5FTVRXVVFQTkxKRkRHRkVCPzsxJRMF+Onc0MjBvLe5vcDCv73BydXl9QQTHicwNDcBNv01Nz49CwfIAQABAQEABAkCYAEIAQNdAEANYAJgYQUIWqA4UGh4kIiAYEgwKCAYgIAGICCA/AgMIEIB8BgoQEH4CgQCAAJP8AAH/yAf4EBgIAA/4gIH6H879gAKBhAgfof73+AgYQTwGCgggUIFv//Pr38/IPf3j0rWYAwIAQUA/wMAAAAUCAEEAKxNAMQTHQ8OBjAQs9uhtgasnhcBsPYcKypNaWNyb3NvZnQ7J1dpbmRvd3MgOCsnOyh1bmtub3duKTs7Ni4zLjk2MDAaFhVTVFU7J1NUVS0zMDAnOzEuMC44OzAbCQgwMDU3O1NUVRgHjJfKqQXgARUKAQTqA+k7tw23DTgBBA=="
Edit: Thanks vjdhama for removing the spaces now it does come up as a valid base64 string however I am still not able to convert this back into an image file. When I tried decoding this back into an image using the base64 decoder at WUtils, it comes up as
FS�BECT$
8" '���3�i�|I�3�\��nϠ�T�{��wE��CWHO " p��2��z�zg�X��Lj�i3��9��J�bT4$
instead of an image. I need to display the base64 encoded string in image form in the browser with php .
To check for validity of string we could use this regex
var base64 = new RegExp("^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{4})([=]{1,2})?$");
Just test your string by
base64.test(str);
You can read more here : RegEx to parse or validate Base64 data
UPDATE:
You can also decode data using window.atob(str) web api method.
You can read more it here : https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/atob
Refer this for more on base64 encoding and decoding : https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

Categories