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

Question

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?

Answer 1

You could also try something like this if you're receiving, say, a json string from an API response that needs to be further parsed.

I actually just encountered this scenario - a json payload was sent with a field that itself was (improperly) stringified json ¯\_(ツ)_/¯ ):

function replaceBadControlCharacters(jsonString) {
  return jsonString.replace(/[\u0000-\u001F\u007F-\u009F]/g, ''); 
}

const jsonString = '{"test": "Bad\x02 Data"}'; // Example with a control character
const validJSONString = replaceBadControlCharacters(jsonString);

console.log(validJSONString); // {"test": "Bad Data"}

Answer 2

\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?