Passing an object to client in node/express + ejs?


Question

I have a pretty large object that I need to pass to a function in a client script. I have tried using JSON.stringify, but have run into a few issues with this approach - mostly performance related. Is it possible to do something like this in ejs?

app.get('/load', function(req, res) {
    var data = {
        layout:'interview/load',
        locals: {
            interview: '',
            data: someLargeObj
        }
    };
    res.render('load', data);
});

And in my client script, I would pass this object to a function like so

<script type="text/javascript">
    load(<%- data %>); // load is a function in a client script
</script>

When I try this I get either

<script type="text/javascript">
    load();
</script>

or

<script type="text/javascript">
    load([Object object]);
</script>
1
25
6/22/2012 7:08:47 AM

Accepted Answer

That is the expected behavior. Your template engine is trying to create a string from your object which leads to [Object object]. If you really want to pass data like that I think you did the correct thing by stringifying the object.

11
6/22/2012 7:18:02 AM

In Node.js:

res.render('mytemplate', {data: myobject});

In EJS:

<script type='text/javascript'>
  var rows =<%-JSON.stringify(data)%>
</script>

SECURITY NOTE : Don't use this to render an object with user-supplied data. It would be possible for someone like Little Bobby Tables to include a substring that breaks the JSON string and starts an executable tag or somesuch. For instance, in Node.js this looks pretty innocent...

var data = {"color": client.favorite_color}

but could result in a client-provided script being executed in user's browsers if they enter a color such as:

"titanium </script><script>alert('pwnd!')</script> oxide"

If you need to include user-provided content, please see https://stackoverflow.com/a/37920555/645715 for a better answer using Base64 encoding


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon