localStorage data contains JSON hostile data. Can it be fixed? - javascript

I am working on a website that tracks which links the user has clicked. The data is stored as a string in localStorage. I know that string data in localStorage can be converted to JS objects by using JSON.parse. The problem is that the stored url strings contain characters that aren't valid for JSON. I am getting the error:
1_0.html:1 Uncaught SyntaxError: Unexpected token h in JSON at position 0
at JSON.parse (<anonymous>)
at trackLink (tracking_functions.js:318)
at HTMLAnchorElement.onclick (1_0.html:46)
I tried cleaning the string before sending it through the JSON parser using this suggestion but that didn't do the trick. And I am not sure if cleaning the string is even an option because it might make the url string unusable as a hyperlink.
Is there a way to get around this?

encodeURI() This function encodes special characters, except: , / ? : # & = + $ # (Use encodeURIComponent() to encode these characters).
encodeURIComponent() This function encodes special characters. In addition, it encodes the following characters: , / ? : # & = + $ #
You have to do it this way
var url = "https://a.but/#safe=active&q=sf";
var json = {"link": encodeURIComponent(url)}
localStorage.setItem("urls", JSON.stringify(json));

Related

How can I resolve JSON parsing error 'JSON.parse: bad control character in string literal'?

In NodeJS Backend, I send my data to client as:-
res.end(filex.replace("<userdata>", JSON.stringify({name:user.name, uid:user._id, profile:user.profile}) ))
//No error here and Object is stringified perfectly
//user is object returned in mongoDB's result
The JSON string looks like this:
{"name":"Rishavolva","uid":"5f3ce234fd83024334050872","profile":{"pic":{"small_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ4fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0OH1dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.9NkGnEumn4JW8IN0KFgxgN_6_4wN8qOgezNTyzz9osY","big_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ3fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0N31dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.yxQ1GrhLsWPn8Qwu42EfTDXqaYwFtrM6f_7cAH2eLRY"},"aboutme":"I am Rishav Bhowmik\r\nand this is navratna pulaow"}}
and that UID is just a mongodb's primary key as string, and other two base 64 strings are just JWT tokens.
Now, when this JSON string reaches the Browser, I parse it with simple:
JSON.parse(`<userdata>`)
//remember I used filex.replace("<userdata>", JSON.stringify...) in the server
For reference, my MongoDB Document here is:
Now when JSON.parse is executed on the JSON string it will look like this on final JS code.
JSON.parse(`{"name":"Rishavolva","uid":"5f3ce234fd83024334050872","profile":{"pic":{"small_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ4fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0OH1dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.9NkGnEumn4JW8IN0KFgxgN_6_4wN8qOgezNTyzz9osY","big_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ3fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0N31dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.yxQ1GrhLsWPn8Qwu42EfTDXqaYwFtrM6f_7cAH2eLRY"},"aboutme":"I am Rishav Bhowmik\r\nand this is navratna pulaow"}}`)
I get this error:
Uncaught SyntaxError: JSON.parse: bad control character in string literal at line 1 column 702 of the JSON data
the string at position 702 of the JSON string is \n
First of all, how can \n be a control character?
What should I do to resolve this?
Has this problem arrised due to MONGODB result?
\n is a control character signifying a new line. In JSON, those control characters (more specifically the \) must be escaped inside strings.
This will raise the error:
JSON.parse(`{"hello":"world\n"}`)
This wont:
JSON.parse(`{"hello":"world\\n"}`)
So one way would be to use something like replace to ensure your aboutme is properly escaped before JSON serialization. See: How to escape a JSON string containing newline characters using JavaScript?
Ok have done some experimentation and have a solution.
The Trick is to do JSON.stringify() twice,
Like,
html_text.replace('/*<whatever>*/', JSON.stringify( JSON.stringify(the_object) ) )
If suppose html_text has a line which is
<script>
const object_inbrowser = JSON.parse(/*<whatever>*/)
// no need to add qotes, `JSON.stringify` in the server will do that for you
</script>

Why does json.parse break? and how to fix it

I have the following data coming in from my server into my js code, from my server.
{"triggers": [{"message_type": "sms","recipients": "[\"+91xxxxxxxxx\",\"+91xxxxxxxxx\"]","message": "This is a test"}]}
My code parses the above json string in the following manner.
data = '{"triggers": [{"message_type": "sms","recipients": "[\"+91xxxxxxxx\",\"+91xxxxxxxx\"]","message": "This is a test"}]}'
parsed = JSON.parse(data);
This throws the following exception
Uncaught SyntaxError: Unexpected token + in JSON at position 54
at JSON.parse (<anonymous>)
at eval (eval at <anonymous> (entry.html:2), <anonymous>:1:6)
at entry.html:298
I did a little bit of further digging and found the source of the json string.
Here is where the string is coming in from my python code
data = {"recipients": "[\"+91xxxxxxxxx\",\"+91xxxxxxxx\"]"} # This data comes in from my database, and I can't do anything about what quotes are used.
javascript_supplied_data = json.dumps(data) #This data goes to the frontend via webhook
I tried putting the same data into a json view via this online viewer, and it didn't throw any error and displayed the data correctly.
What I can't understand is, I am doing a json.dumps in my python code, so the string response should be json parsable. So why does JSON.parse throw this error?
Is there something wrong with the json libraries at the python end or the javascript end, or am I too much of a noob?.
Please help me figure out what is causing this issue, and how to solve it.
NOTE: I don't have any control over the string that comes in from the server.
When you have valid JSON, but put it in a string literal, the escapes treated by the literal notation in JavaScript make the string different. The backslashes are interpreted as for escaping the next character.
So either you have to go through the string literal and double all the backslashes, or you can apply String.raw to the string literal as template string:
var data = String.raw`{"triggers": [{"message_type": "sms","recipients": "[\"+91xxxxxxxx\",\"+91xxxxxxxx\"]","message": "This is a test"}]}`;
var parsed = JSON.parse(data);
console.log(parsed);
Note however, that the JSON you posted at the start of your question is valid.
On the other hand, the error you get indicates that the \" just before the first + is interpreted as just ". This means the \ is not actually there when the string is received from the server. This is usually caused by a similar escaping problem at the server side, where the programmer intended to send the backslash to the client, but actually just escaped the " on the server, which resulted in only the " being sent to the client and not \".
You have to use single quotes here while escape sequence.
if we use double quotes for escape sequence here it will result in
"recipients": "["+91xxxxxxxx","+91xxxxxxxx"]"
double quotes inside double quotes which is why your code breaks.
data = '{"triggers": [{"message_type": "sms","recipients": "[\'+91xxxxxxxx\',\'+91xxxxxxxx\']","message": "This is a test"}]}';
parsed = JSON.parse(data);
console.log(parsed)

JSON.parse fails to create an object from a string

I am using ruby on rails to create a cookie that returns an array containing the params of the request back to the view as a string. However, I get the following error when I JSON.parse that string:
JSON.parse('%7B%22specialty%22%3A%5B%22Anesthesiology%22%5D%7D')
Uncaught SyntaxError: Unexpected token % in JSON at position 0
how do I fix this?
The string is not valid json.
It is uri encoded so decode it using decodeURIComponent()
JSON.parse(decodeURIComponent('%7B%22specialty%22%3A%5B%22Anesthesiology%22%5D%7D'))
Other answers are correct in saying that the payload is URI encoded, but decodeURIComponent is only a javascript method. To decode it ruby-side, use URI.unescape.
JSON.parse(URI.unescape('%7B%22specialty%22%3A%5B%22Anesthesiology%22%5D%7D'))
You say you're using rails, so the URI object should already be available, but if you weren't using rails you would need to require 'uri' first.
You need to use decodeURIComponent to first decode the string.
JSON.parse(decodeURIComponent(
'%7B%22specialty%22%3A%5B%22Anesthesiology%22%5D%7D'
));
As the string is encoded. Once you decode it, you get the key value pair, i.e. the object in the form of a string. Now you can use JSON.parse to form the Javascript object.

Parsing string as JSON with single quotes on key and keyvalue [duplicate]

This question already has answers here:
Parsing string as JSON with single quotes?
(10 answers)
Closed 1 year ago.
var str = "{'a':'Your's'}";
JSON.parse(str);
My server response like above string. Not able to parse as JSON. It is as example text. While am parsing I got error as below:
JSON.parse(str);
VM1951:1 Uncaught SyntaxError: Unexpected token ' in JSON at position 1(…)(anonymous function) # VM1950:1
The same question already raised by someone. click here to see. But, not helpful. Please help on this. Thanks in advance.
TL;DR JSON only supports double quotes.
Please fix the error on the server, if this is possible.
JSON required double quotes, the single quotes are therefore not conform to the standard. There may be parsers, that support them anyway, but you can never rely on that. For more details on the JSON syntax, you may have a look at http://www.json.org/.
Besides this, the input string "{'a':'Your's'}"; is totally invalid itself, if the single quotes would be valid. The ' in Your's is breaking the string literal, the following s is outside the string and the next ' is opening a string, that contains } but is never closed by another '.
The correct syntax would be '{"a":"Your\'s"}'.
If you received the string and cannot correct the server output, you may try to replace all ' by ", but you will have problems with single quotes inside your payload strings. By far the easiest - and most stable(!) - fix should be correcting the server output instead of correcting the defect output on the client.
Converting on the client with the following code may be a good idea at the first thought, but would corrupt payload strings with single quotes in it.
replaceInString = function(fullString, search, replacement) {
return fullString.split(search).join(replacement);
};
var json = replaceInString("{'a':'Your's'}", "'", '"');
If you can be sure, there are no whitespace characters outside the payload and also there are no line breaks, you could use the following function. But also only, if you are sure, the search patterns are not in the payload strings.
var json = "{'a':'Your's'}";
replaceInString = function(fullString, search, replacement) {
return fullString.split(search).join(replacement);
};
json = replaceInString(json, "{'", '{"');
json = replaceInString(json, "'}", '"}');
json = replaceInString(json, "':", '":');
json = replaceInString(json, ":'", ':"');
json = replaceInString(json, "',", '",');
json = replaceInString(json, ",'", ',"');
json = replaceInString(json, "['", '["');
json = replaceInString(json, "']", '"]');
But using this code, e.g. the JSON `following JSON string would be corrupted.
{'mathTerm':'x=1-[2+A']'}
To be clear: Code like this gets you over a bump on the road to develop , test or learn something. But this is not a durable fix. Contact the server developer to fix his implementation and remove your client side fix before going to production.
JSON keys and values must be enclosed in double quotes (") instead of single quotes (')
This is correct:
var str = '{"a":"Your\'s"}';
JSON.parse(str);

JSON Lint says it's valid but JSON.parse throws error

I have simple JSON that I need to parse to object. Strangely it doesn't work even though if I copy and paste my JSON string to JSONLint (http://jsonlint.com/) it will show that it's valid.
var string = '{"token":"9eebcdc435686459c0e0faac854997f3","email":"201403050007950","id":"13","updated_at":"2014-03-05 10:34:51","messageguides":"[{\"name\":\"Un-named Messaging Guide 1\",\"pages\":[\"sustainabilitydirectors\",\"marketingnbusinessdevelopmentdirectors\"],\"date\":1394015692958}]"}';
var obj = JSON.parse(string); // Unexpected token n
console.log(obj);
The \ characters in the data are treated as JSON escape characters when you parse the raw JSON.
When you embed that JSON inside a JavaScript string, they are treated as JavaScript escape characters and not JSON escape characters.
You need to escape them as \\ when you express your JSON as a JavaScript string.
That said, you are usually better off just dropping the JSON in to the JavaScript as an object (or array) literal instead of embedding it in a string and then parsing it as a separate step.
var obj = {"token":"9eebcdc435686459c0e0faac854997f3","email":"201403050007950","id":"13","updated_at":"2014-03-05 10:34:51","messageguides":"[{\"name\":\"Un-named Messaging Guide 1\",\"pages\":[\"sustainabilitydirectors\",\"marketingnbusinessdevelopmentdirectors\"],\"date\":1394015692958}]"};

Categories