Requiring JavaScript on Tor Metrics
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA256 Hi everyone, I'm moving this (old but recently continued) thread from an internal mailing list to this list as suggested by Roger. Any feedback would be most useful by Wednesday, November 16. Thanks! All the best, Karsten On 07/12/15 14:09, Karsten Loesing wrote:
On 07/12/15 15:22, somebody else wrote:
http://blog.davidpadbury.com/2010/10/03/using-nodejs-to-render-js-charts-on-... On 08/12/15 00:34, somebody wrote:
On 09/12/15 08:45, another person wrote:
I'd like to know how much work it would be.
On 09/12/15 13:59, Karsten Loesing wrote:
On 12/11/16 16:37, Karsten Loesing wrote:
On 13/11/16 05:04, Roger Dingledine wrote:
as well as for external journalists.
On 13/11/16 10:08, Karsten Loesing wrote:
iQEcBAEBCAAGBQJYKIymAAoJEC3ESO/4X7XBMFUIAMAP1LJYv+QEEUtQN5AAXaGP ZvmPrIlWrnhvoY1Uy/iPkYMsLqTtHNn3RkIfvfBj5LOafBBinkRL/pm8DHnHDrGw OLoo12t1ZHKiQk62eB+FNnnBfXdDoitdcaFCm92N+aItHY37qe9pJRICkA/QvtwA eUHRBAsrn/g6F6CSQT+jpSTJfCOnmWuPrD9nEqA6DD3e37+f1MDyBnre/mgMQG2e hZ5jhdwToX4z4LBIL4ilJoFkWjLDPlc4H+MdaMEXN3CHwd5XTXK7xJUhsaJwb/+k JzujeI5J7p6kJCEx2PbhCZMqSyNLmjiFjTWE0Xi1YNLyaQ6QtDvf8nzpBdRcvkY= =HA4c -----END PGP SIGNATURE-----
Are there any privacy or security advantages to having client-side JavaScript? For example, if we download data from the server, and then render it on the client using JavaScript, then the server knows less about what the client is requesting and visualising. Are there ways of coding the metrics website in JavaScript that improve client privacy in this way? (Or does it cost too much effort or too much bandwidth to pull down larger datasets just to hide what the client is looking at?)
Just to clarify, would users need JavaScript turned on to use the "Download Graph" or "Download graph data" buttons? Would it be possible to give others a URL for a specific graph, without having to save the graph on some other site? Would users need JavaScript enabled to view the graph? If we can't do this, it would be bad for how I and many others typically use Tor Metrics on mailing lists. (And if we do allow this feature, I'm not sure how that's any different from server-side rendering of graphs for clients that don't use JavaScript.) I'm also not sure what you mean by "tables" or "Download graph data" - will there still be CSV data downloads available? Is it the aggregated data that would be in the (JavaScript-only) tables, and the raw data in the static CSVs? In general, I would prefer to be able to use the Tor Metrics website without enabling JavaScript. I don't like the idea that we provide Tor Browser, where we recommend(?) people turn JavaScript off, and then also provide websites where they need to turn it on. But if the advantages outweigh the security and consistency considerations, I'd be ok with it. (Just like I use Atlas, and the Metrics Bubble graphs.) But my preference would be for users without JavaScript to still have some level of basic functionality, even if it's only static images and tables (which I think should be available for offline use as well). T -- Tim Wilson-Brown (teor) teor2345 at gmail dot com PGP C855 6CED 5D90 A0C5 29F6 4D43 450C BA7F 968F 094B ricochet:ekmygaiu4rzgsk6n xmpp: teor at torproject dot org ------------------------------------------------------------------------
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA256 Hi teor, On 14/11/16 10:34, teor wrote:
On 08/12/15 00:34, somebody wrote:
Fine question. I assume most Tor Metrics users don't care that much about leaking to the server what part of the data they're looking at. And I assume that those who do might download the CSV files and look at them locally. But my assumptions might be wrong. So, the switch to JavaScript may or may not address this. If we pick something like Shiny, graphs will still be generated on the server, and there wouldn't be any difference with regard to client privacy. If we use D3.js, the browser downloads the data it needs and produces a graph locally. I think, overall, I wouldn't add Tor Metrics client privacy towards the server as a hard requirement, because we already have too many of those. If the solution we decide on offers more client privacy than the current solution, great. But if it doesn't, okay.
Right, very good point. I don't know Shiny enough yet to give you an answer with absolute certainty, but I think that we should be able to provide a page with a static image that can be used on mailing lists. That page would just have no controls for further customizing the graph, unless the browser supports JavaScript.
One major difference is that Shiny, for example, allows us to generate a user interface with just a few lines of code, whereas we'd otherwise have to write and maintain that user interface ourselves. And I'm not very optimistic to find a framework similar to Shiny that works without client-side JavaScript, mostly because that's not a requirement for most websites.
The following is not at all final yet, but ideally, all parts that are updated twice per day in the background can be obtained without JavaScript whereas any data that gets filtered or aggregated by user request would require JavaScript. So, the current CSV data would still be available without JavaScript.
Right, this possible inconsistency is what has stopped me in the past. And I think if we really want to be consistent here, we'll have to rewrite Atlas and the Metrics bubble graphs to not require client-side JavaScript anymore, which is certainly doable. And we should probably look at other torproject.org websites that require JavaScript in the browser and rewrite those parts. But do we really want this? If we recommend that people turn JavaScript off, why do we even support modes in Tor Browser where they turn it on again, isn't that inconsistent, too? I think no, because we acknowledge that not everybody has the same requirements. And in this case I believe that the target audience of Tor Metrics is not exactly the same as the set of high-security Tor Browser users. On the other hand I see that weakening the no-JavaScript rule for the Tor Metrics case might influence future decisions for other torproject.org websites. Not an easy decision.
Right. Two examples for parts of Tor Metrics that would require JavaScript are (1) the graphs where users can change the x axis, change lines, add new lines, and so on, and (2) a dashboard where users can configure the graphs they want to see next to each other. But users without JavaScript should still be able to navigate the website, learn about where the data comes from, download the raw or pre-processed data, and contemplate the graphs posted on mailing lists. Thanks for your input here! All the best, Karsten -----BEGIN PGP SIGNATURE----- Comment: GPGTools - http://gpgtools.org iQEcBAEBCAAGBQJYKZsCAAoJEC3ESO/4X7XBjy4IAK6f8GUhOk+tp4mAaJ8XFBAD Y7XXFxjMClDH5g6Xi4VDEyVq4xytD/Y1u60un7oh57ZKnVSBH38TkZSCuZfNiLM8 GTWEZsYJRr53JLajCbHpZB+JRw6wvxuzwPoNp5SvY/2aDtvHm0ke379r3PfKDyNs 1SxCD6oAbg4kh9GFlbfBHPpdwyJftZ7k0Hu9oGdJE0erC0J0lLsviPk91eKiP8nf BsaYNKXtcZ29bba/GkkMGxayzjJO8bJciNOIFZ7SymOVwKalquwqS7q2VCIkZnO0 P+wnGOrlRqb69HWynb1RM024922YSU3kDSsfUMBt6GIVcGTqFY3vNYzIUZc4aJs= =P1q7 -----END PGP SIGNATURE-----
Hi, Karsten asked me back in January to investigate possible solutions to this problem and I reported back to the metrics-team mailinglist [0]. That mail contains a more detailed evaluation of technical approaches and available solutions. The gist of it is that there’s no need to decide between "either static pages or interactive JavaScript" but that one can have the best of both worlds: a website that starts static with plain old HTML and graphs as static images to glare at, but gets interactive _if_and_as_soon_as_ JavaScript is enabled (a hint to those not having JS enabled that they miss interactive exploration of the data might be appropriate). The technique behind this is called "isomorphic". It has been a hot topic during the last 2 years and is now implemented in many mayor frameworks - see below [1] for some background. The real question here is not what is possible but how much effort it needs and if it’s worth it. Everything non-trivial on the web needs some JavaScript and is helped by a clever use of available frameworks. Also it is easier to build a JavaScript-only version (or a static version) than it is to build one that provides both (an "isomorphic" one), but it’s absolutely possible and done in a lot of high profile places (twitter and airbnb for example). [2] Regarding the question if it’s worth it it I’d say: yes. Nobody should need to switch back to medium security just to view basic graphs if that’s all they need. The amount to which websites rely on JavaScript today is ridiculous (and dangerous) and there’s no need to support and increase that trend. OTOH interactive graphs are definitely not just eye candy. They can provide controls and levers that enable the user to manipulate them, tweak time frames, add or subtract dimensions and through that interactively get a much better understanding of what’s going on in the Tor network and how it works. That chance should not be waisted. A mildly interactive version without JavaScript but with form buttons and server roundtrips could provide a middle ground of functionality without enabling JavaScript but this version would probably be tedious to maintain and will never provide the same level of interactivity and fluidness since the clumsyness of forms and the necessity of server roundtripping makes it tedious and time consuming to use. Regarding R/Shiny: I don’t know R/Shiny but some googling for "isomorphic R/Shiny" didn’t unearth anything meaningful. So I guess it doesn’t support the creation of static representations in the absence of JavaScript. That would not be surprising since R/Shiny is really a niche product thathasn’t much incentive to go there. R/Shiny is probably an easy route to take in the short term but besides the lack of a static version it also IMHO has too many lock ins. R/Shiny only works with R and while R is very common it’s not the only data manipulation language aroud. Any meaningfull data manipulation tool can serialize to CSV or JSON and that’s all you need to feed a visualization engine like D3.js (D3.js is the predominant visualization framework on the web but there are others too, that are less powerful and less initimidating). Loose coupling of the analytics engine (whatever, if it exports at least CSV or JSON), the web framework (in any case isomorphic, maybe AngularJS because of Apache Zeppelin [3]) and a visualization engine (like D3.js), would provide a much more flexible and resistant solution. Regarding Rogers question: saving SVG graphs from the browser to a static, local PNG file is possible but depends on deploying yet another JavaScript library (phantom.js). The positive side is that you cannot only save the initially showed graph but also any result of your interaction with it. But it’s also possible to serve PNGs first and then, if JS is enabled, go interactive . [4] Regarding Teors question if client side rendering provides anonymity advantages: the size of the data to be transferred to the client is not to be underestimated and it quickly grows. If you need hourly data than the volume is 24x that of daily data. If you want to look at it by country than you might have to transfer 2 orders of magnitude more data (of course it all depends on how elaborately the application is structured and on how outlandish your information desire is). As a rule of thumb you can expect to quickly be in the hundreds of KB and low MB figures. It doesn’t seem efficient to try to hide your real interest in a noisy web app. You should probably rather download the data in big chunks and run it in a local application. Regarding another question of Teor: any solution will produce a visualization embedded in a webpage that you can link to just as you do now. But right now you have no guarantee that the graph pictured on the page you're linking to won’t change (although I don’t know about the PNGs on the metrics site themselves - maybe they are preserved). Providing a link to a visualization of precisely some chunk of data with specific parameters is in principal possible with an interactive solution. In practice though it depends on the framework - not all of them provide a URL for every state in interactive web applications and the addition of D3.js makes things even more complicated. This would have to be evaluated. Thomas (full disclosure: I went under 3 different handles in the past - "tomlurge", "thms" and "oma" - which is entirely my fault and not cool. but it’s all just me) [0] https://lists.torproject.org/pipermail/metrics-team/2016-January/000036.html There’s also some CMS discussion mixed in - maybe just try to ignore that. The question on security was resolved later but might surface again with every new JS library needed. [1] With "web 2.0" a lot of big websites started to use JavaScript backed web frameworks that did a lot of work in the browser which before was done on the server. It was a logical evolution of AJAX/web 2.0 and made the websites ever more richer in functionality and shinyness. But as more and more functionality was moved from the server into JavaScript libraries and towards the browser initial page load became slower and slow initial page loads turn customers away. The solution to this problem was called "isomorphic" web framework: the framework supports rendering the page in the browser or just as well, with the same logic, on the server (like in the old days, but with a JavaScript based engine, almost always running in an JavaScript environment called Node.js) - so either dumping the whole data and code on the browser and let it do the work or serving a HTML page. This technique is a solution to the problem described above when only the startpage and some initial state is rendered server-side and enables very fast initial page load in the browser while in the background also the JS libraries and additional data get transferred and, transparent to the user, the page in the browser becomes interactive. Because this technique provides the best of both worlds and is a solution to a real problem - loosing users because of long page loads- it has been implemented in many mayor web frameworks during the last 2 years. [2] It is possible to use this technique with JavaScript graphing libraries. D3.js is the most prevalent of those libraries and there are examples around on how to generate SVG graphs with D3 either on the server or make them render on the client. The whole solution is not without complexities but it’s not rocket science either. [3] An interesting route to examine might be Apache Zeppelin: that is a tool to visualize data and generate interactive, shareble "notebooks" about findings in the data. Those findings (data and visualizations) can also be send around and embedded in web pages. Technically interesting is that is not primarily a web tool but it is build with web technolgies, namely D3.js and the AngularJS web framework. So far I haven’t had time to check for myself but maybe there’s a way to drive both a website and that tool with the same data that provides a path - from static images of graphs - to interactive versions on the web - to full blown locally run analytics. That to me seems like a path worth investigating with respect to the website and generally better accessability of metrics data. [4] On a website that is static at first, these graphs can be rendered as SVG (which works without JavaScript) but could be PNG as well (although that’s a little harder). Users that have JavaScript enabled would seamlessly get additional interactive controls that allow them to tweak parameters of the visualization and drill into the data. If they don’t have JavaScript enabled, those controls don’t show up and the graph remains static.
.
On 15 November 2016 at 19:07, tl <tl@rat.io> wrote:
I don't think this should count for much, but when I added graphs to Consensus Health, I chose D3 because that's what Atlas used, and I thought it would be beneficial to minimize the variety of third party libraries we use as a project. (It uses Javascript to render SVG graphs, nothing fancy.) D3 is extremely powerful, and therefore complicated as heck. -tom
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA256 On 16/11/16 14:58, Tom Ritter wrote:
Good point. By the way, Atlas uses D3, because I rewrote the earlier graphs that were using flot for the exact same reason. The advantage of Shiny, for example, is that we can keep using our R code and expertise and the powerful ggplot2 graphing library. And maybe there are other great frameworks out there that we haven't looked at yet. The good thing is that we don't have to decide on a framework today, we should just talk about reasons for or against picking any of them, because none of them seems to work without JavaScript. And we really shouldn't write our own. All the best, Karsten -----BEGIN PGP SIGNATURE----- Comment: GPGTools - http://gpgtools.org iQEcBAEBCAAGBQJYLLtFAAoJEC3ESO/4X7XBLFYH/jqSOsRIGpAhFhCCBYYDvaaP g22woolxDFdOw6V3//eWOjEDWCYcJCtqVvJzShCmumADcG2pNmPLtRBDWHVmN8RF oxJSwmdCuqdz4/fVxuIWx8Kl/DbQzTH/ONkZOrao+hahpRl6z2rpWNGWHU4XdG8L z/Dza5Tduyrw2l+cLrEVPBhi2/oEYcw5+Pj9rerkf4/9wMqf/KfqAZCDS65sBNWs B18nw4Z0Ok3H9brvoyo0HJV6h5FvDNMbcexNwOibR/0kfRLBpvm6ta+Y8FE9kyxw WVDKiiTj72eyLVSkO/kQBAmLpC9BAt8pUTp1X3V0aeuWo/15Us52/TSgpnpKIcY= =pd/+ -----END PGP SIGNATURE-----
D3 is extremely powerful, and therefore complicated as heck.
These two qualities tend to be coupled.
I do quite like R.
And maybe there are other great frameworks out there that we haven't looked at yet.
From my exposure, I've felt that it was between flot and D3, with D3 increasing in popularity lately. It seems that most of my friends in UC Berkeley/Bay Area startups use one of these two. And R is predominantly used by academics. But I agree that there may be another framework that we haven't found. I'm personally would like D3 > R+ggplot2, but I use R more (so I guess that says something too, doesn't it...).
I really think that we should incorporate JS. The additional functionalities we could add would really provide a lot of value to many people. (We can provide a minimal functionality for people who do not have JS enabled.)
And we really shouldn't write our own. +1
Cheers, Linda -- Current Key: https://pgp.mit.edu/pks/lookup?search=lindanaeunlee GPG Fingerprint: FA0A C9BE 2881 B347 9F4F C0D7 BE70 F826 5ED2 8FA2
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA256 Thanks for the input, everyone! We briefly touched on this topic in today's metrics team meeting where we concluded that having permanent links to graph images would be quite useful and that we'd prototype something that requires JavaScript for as few things as possible. Later in the Vegas meeting we decided that even though compatibility of Tor websites with Tor Browser's high-security mode is an ideal that many share, our resources are too limited to do all the things, so we should do as many as we can, as efficiently as possible. We should make sure that our data sets remain fully available for people who don't like JavaScript, but we don't owe people a non-JavaScript visualization of our data. Thanks again for this discussion. It's too early to decide on a specific tool or framework, but once we need to make this decision, we won't be slowed down by having to work around JavaScript at all costs. That's very useful. If anything else comes to mind on this topic, feel free to post it here, and even though I cannot spend many more cycles on this now, I'll take another look at this thread when comparing web frameworks and prototyping future Tor Metrics websites! All the best, Karsten -----BEGIN PGP SIGNATURE----- Comment: GPGTools - http://gpgtools.org iQEcBAEBCAAGBQJYLhQGAAoJEC3ESO/4X7XBTpkIAMOiFjIrQ2VpVEWKGlyTSA0a yVeoSQlfY5e16jPbeYcU8TTF0QfEg/HS7cFSxSGrtxIbhLACcnH/yC8Erpq7/Ojo LdSpQscZAG9pFCPNnRDfV2VnHgZNReILuLY/xJMZG72nhGdaMDY6IiaFKPij6EgM LPhSzJAWlpyFvu3NfwIGM7aX5T+q48+8O0tso9jX3TnXagjQT6bBrrn481xWNK+m Mn2ND4g4V0R2iYb2YczdfUaD3rwD8seikADc6vMgiq6f1RdYXbRIObyZmIrhYyR4 txBlhIm3FX+dTiHjmH2nwIyN1rTejNDiUIZVx/D2guLgopnFk1AIgxLfvMDVgWM= =s00s -----END PGP SIGNATURE-----
-----BEGIN PGP SIGNED MESSAGE----- Hash: SHA256 On 16/11/16 02:07, tl wrote:
[...] The whole solution is not without complexities but it’s not rocket science either.
It's not without complexities, and it seems bad to attempt to solve those complexities before solving all the other problems that are less complex and have bigger impact on what we do. Frankly, I'm not interested in discussing this any further with you, after having asked you to leave the metrics team four months ago. It's code that counts, and you only keep sending words. Karsten -----BEGIN PGP SIGNATURE----- Comment: GPGTools - http://gpgtools.org iQEcBAEBCAAGBQJYLLkGAAoJEC3ESO/4X7XB3+8IAJFIFtzkACCGOMqV6Hun2RQD NFoXEX61iCgLAORG7FG/ITxpfoMzHMV4Mds/W/Cm6q635XvaEhBZ3UIj9y5y1wCN bf5evLEj5AKpoinol05scQ6ppBtyfpz0HOvf/TcWZ1B3Wb08mqh3yn3f4eLb35mf Vt7NHR/rG751+2Dn/bVPDb9Zmc0omlk/SuP8mmF2ulJpgQKav4vuCYeLcr0gz0vu jyDuJg+n2KwkHf0KRe0AEZ0CWvMet6ZN7TlnnI4Dt6Pe8wbgPW2c4/keC+W4Zaxy m0AGUSp4mewFifC391bvHgE4q/BKWArk0s2bXuS7igc0rNWgvF0CXV0DZiAzt9A= =j6ZU -----END PGP SIGNATURE-----
participants (6)
-
Karsten Loesing -
Linda Naeun Lee -
Silvia [Hiro] -
teor -
tl -
Tom Ritter