Best way to send data to client js from node.js

Question

What is the best way to send some data (in the form of a json object ideally) from a node.js server to the client's javascript. I've thought of a couple options, but none of them seem to be very suitable in my opinion. A second opinion, or some other suggestions is what I'm looking for.

1. Have the server output some code in a <script> tag to set a global variable.

   I've used this before, but I dislike the idea of it, mostly because it has potential for XSS, and I think it's bad practice, even if the data being sent isn't defined by a user.

2. Set a cookie with the data inside it.

   This option is a little better, but since the data is likely to change for every page load (at least in my setup), it doesn't really fit since, in my opinion, cookies aren't supposed to be this volatile.

3. Have the client javascript make an ajax request to the server on page load to request the json file.

   This works as well, but it adds a lot of unneeded overhead. 2 requests per page seems unnecessary.

Background:

I have a site with 2 templates: an index for logged-out users, and the main content template.

My server side is built off node.js, express.js, jade, and less.

I am using history.pushState for all my links and crossroads.js for the client's page routing. I want to be able to send the loaded template, and a user's id / if they are logged in to the client javascript, so it can handle page changes accordingly. Logged out users can view content pages, just without editing privileges, and clicking on certain links should bring them back to the index template.

Answer 1

Just enclose the one-time data in <script > tags with type "text/template" or "application/json" and make sure they have IDs. Access their contents with jQuery or standard DOM methods. For shorter bits of data, you can use data-* attributes on key elements.

Answer 2

The <script> tag method is good. If you're worried about other scripts accessing the data then instead of setting a global variable write a function in your client js code that can accept the data.

So instead of generating:

<script>
  data = { foo : "bar" }
</script>

generate something like this:

<script>
  setData({ foo : "bar" });
</script>

Obviously I don't think I need to tell you that any data you generate should be serialized by a proper JSON serializer to avoid syntax errors etc.

Answer 3

您可以使用Socket.io或Now （实现 socket.io。它们不仅允许您轻松地在客户端和服务器之间来回传递数据，而且还允许客户端调用服务器上的函数，而不是 Ajax）

Answer 4

One way is to use a hidden paragraph to hold a delimited string.

I like to delimit my strings with characters that have no chance of being embedded in my data elements.

My favorite delimiter is:

char delim = (char) 1;  // the SOH character of the ASCII character map

The script tag is not a good choice because there are too many delimiters, and there is a likely chance that one of those delimiters is embedded in one of your data elements.

Using JSON has the same problem: too many delimiters.

A hidden HTML paragraph element gets my vote.

Server Side:

Inside a div with id="hiddenStrings" style="visibility:hidden" place paragraphs holding columns and values

    p id="delimitedColumnNames"> @Model._ticket.GetDelimitedColumns() /p
    p id="delimitedCoulmnValues"> @Model._ticket.GetDelimitedValues() /p

Client Side:

// The leading character is the delimiter.
var delimiter = document.getElementById("delimitedColumnNames").innerHTML.substr(0,1);
var delimited = document.getElementById("delimitedColumnNames").innerHTML.substr(1);
var ticketCols = delimited.split(delimiter);

var delimiter = document.getElementById("delimitedCoulmnValues").innerHTML.substr(0,1);
var delimited = document.getElementById("delimitedCoulmnValues").innerHTML.substr(1);
var ticketValues = delimited.split(delimiter);