pass object to javascript in ExpressJS

Question

I have problem to convert back json string containing double quote to javascript object in JSON.parse(). Here is details below.

I have a object saved in variable groupdatain nodejs app.js

[{"_id":"56adb85319dec52455d11c21","fullName":"NY Metro Office 365 What New\" group","createdAt":"2015-08-25T17:03:59.000Z","stats":{"members":65}}]
In my nodejs app.js code, groupdata object is passed to client as a json string.

function doRender() { res.render('groupdata', { 'groupdata': JSON.stringify(groupdata) }); }
My client code tries to prevent XSS attack first by function htmlDecode() then JSON.parse() a valid json string to object.

JSON.parse(test1) will succeed if only the string does not contain double quote. JSON.parse(test2) will fail as error below

     function htmlDecode(input){  //prevent XSS attack;
         var e = document.createElement('div');
         e.innerHTML = input;
         return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
     }
     console.log('groupdata: ' + "<%= groupdata %>");
     var test1 = htmlDecode("<%= (groupdata) %>");
     console.log('test1: ' + test1);
     var test2 = htmlDecode("<%= JSON.stringify(groupdata) %>");
     console.log('test2: ' + test2);
     JSON.parse(test1);  // Succeed if only test1 value contains no double quote
     JSON.parse(test2);  // ERROR: Uncaught SyntaxError: Unexpected token _

The console log in client chrome browser:

groupdata: [{&#34;_id&#34;:&#34;56adb85319dec52455d11c21&#34;,&#34;fullName&#34;:&#34;NY Metro Office 365 What New&#34; group&#34;,&#34;createdAt&#34;:&#34;2015-08-25T17:03:59.000Z&#34;,&#34;stats&#34;:{&#34;members&#34;:65}}]
test1: [{"_id":"56adb85319dec52455d11c21","fullName":"NY Metro Office 365 What New" group","createdAt":"2015-08-25T17:03:59.000Z","stats":{"members":65}}]
test2: "[{"_id":"56adb85319dec52455d11c21","fullName":"NY Metro Office 365 What New\" group","createdAt":"2015-08-25T17:03:59.000Z","stats":{"members":65}}]"

Question: How can I convert json string with double quote to javascript object in this case?

You should JSON.parse before doing anything with the data. And you should always JSON.parse inside try catch because it throws an exception if somethings goes wrong, and you do not want this to stop your server. After you parsed the data, you can htmlDecode the fullName for example. — crackmigg
– crackmigg, Commented Jan 31, 2016 at 19:49
I fully understand that JSON.parse should be done at first, but I also perceive that in EJS, I need to use <script> var myVar = <%- JSON.stringify(myVar) %>; </script> to pass myVar to client side javascript. However, This exposes to XSS attack and I do need to decode the string before JSON.parse(). I wonder how to accomplish both requirements? — Xi Xiao
– Xi Xiao, Commented Jan 31, 2016 at 21:28
@migg I had a look at this but it didn't work out first time. Now I tried again and it actually works! Perhaps I did something wrong originally. This is so much cleaner than manual html decoding. Thank you so much migg! I will post my result here once the code is ready. — Xi Xiao
– Xi Xiao, Commented Feb 1, 2016 at 7:23

Xi Xiao · Accepted Answer · 2016-02-01 13:24:26Z

2

It turns out that EJS has its own way to htmlescape to protect from XSS attack

    <script type="text/javascript">
     var groupdata = <%- JSON.stringify(groupdata); %>
    </script>

This is simple and clean. Thanks to @migg again for his commenting.

answered Feb 1, 2016 at 13:24

Xi Xiao

9731 gold badge12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rohan Kandwal Over a year ago

I am getting expression expected error while using Webstorm, however the code is running fine.

Collectives™ on Stack Overflow

pass object to javascript in ExpressJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related