I recently embarked on a highly interactive html5 application using d3.js and svg.
Though currently running entirely in the browser, I’ve taken care to separate code used to generate the svg structures from that manipulating them.
To protect at least the svg generation logic (by far the greater effort), I’m toying with the idea of it’s server-side generation using node.js, somehow “clipping” the resulting DOM or SVG structure, passing this to the browser and effectively “grafting” it onto (respectively) the local DOM or a prepared html div. The goals:
- none of the original “svg-generating” javascript would be transferred
- any resulting structure should ultimately be addressable using d3’s select() or selectAll() calls
I have no node.js and only vague html5 DOM knowledge. My questions:
- Is transfer of part of a raw DOM or SVG structure to the browser feasible, and how?
- If both possible, which would you recommend
- Are there specific security issues I should be aware of
I realise this is a potentially complex issue, welcome partial answers and relevant leads (books, tuturials, examples).
Though I searched intensively before posting this question, I missed
Accessing a DOM object defined in an external SVG file. Looks promising, but given the size and complexity of the structures I need to transfer, I’d welcome further comment.
Thanks
Is transfer of part of a raw DOM or SVG structure to the browser feasible, and how?
Yes, it is possible. Simply transfer any particular sub-node/tree of the SVG as its own XML document.
If both possible, which would you recommend
HTTP communication is all strings, so you can’t pass ‘DOM’ objects over the network. All you can pass are the serialized versions (the raw SVG XML).
Are there specific security issues I should be aware of
None that I can think of. This seems like standard server-side generation of content. What sort of issues were you thinking about? You’re not going to execute raw code sent in the HTTP request on your server, are you?