render for restricted Content Security Policy like chrome apps about riot

[tipiirai]

My guess is that this is significantly slower because the template function is not compiled and cached. I maybe wrong. Would be nice to see benchmarks. Thanks!

[antonheryanto]

sorry if my issue not clear, but i just put the code as reference (as the only code that work i have now). actually i would like to request the riot.render version which not uses eval() or new Function() but has same functionality and acceptable performance. Thanks too for all great works has been done

[tipiirai]

I'm not sure if that's possible. The benefit of using Function construct is that these functions can be pre-compiled and reused on successive calls.

What is the actual concern here? You can use riot.render(template, data, true) to make automatic escaping and XSS prevention so that 3rd parties cannot execute unexpected javascript.

[antonheryanto]

we created the web application and chrome apps application targeting desktop and mobile. but chrome apps have restriction described here https://developer.chrome.com/extensions/contentSecurityPolicy so riot.render cannot be uses in chrome apps as it contains Function construct. so we need riot.render which not uses Function construct using option or separate implementation that can be uses to replace current riot.render in makefile. so the web version and chrome apps version shared same code based

[tipiirai]

Okay. That's a valid reason indeed. Maybe you can contribute this feature to the repository yourself?

[antonheryanto]

this is my rough riot.render implementation to handle CSP
it can be improved further as I'm still newbie in javascript world.
it pass render test, but lagging in performance in benchmark

Templating without HTML escaping...

riot x 65,759 ops/sec ±0.41% (100 runs sampled)
mustache x 89,176 ops/sec ±0.45% (98 runs sampled)
tmpl x 228,212 ops/sec ±0.44% (100 runs sampled)
underscore x 135,949 ops/sec ±0.55% (100 runs sampled)
ejs x 165,057 ops/sec ±0.28% (100 runs sampled)

Templating with HTML escaping...

riot x 32,433 ops/sec ±0.45% (100 runs sampled)
mustache x 34,667 ops/sec ±0.28% (100 runs sampled)
ejs x 43,559 ops/sec ±0.44% (101 runs sampled)

The question is, whether you willing to accept pull request for this CSP version ? my though it that we create another lib/render_csp.js which will be combined into riot.js using make csp options. or you have another way?

here the function

var FN = {}, // Precompiled templates (JavaScript functions)
  template_escape = {"\\": "\\\\", "\n": "\\n", "\r": "\\r", "'": "\\'"},
  render_escape = {'&': '&amp;', '"': '&quot;', '<': '&lt;', '>': '&gt;'};

function default_escape_fn(str, key) {
  return str == undefined ? '' : (str+'').replace(/[&\"<>]/g, function(char) {
    return render_escape[char];
  });
}

riot.render = function(tmpl, data, escape_fn) {
  if (escape_fn === true) escape_fn = default_escape_fn;
  tmpl = tmpl || '';

  return tmpl.replace(/{\s*([\w\.]+)\s*}/g, function(k, v) { 
    var p = v.split(".");
    var t = data[p[0]];
    if (t === undefined || t === null) return '';
    for (var i = 1; i < p.length; i++) t = t[p[i]];
    return (escape_fn ? escape_fn(t, v) : t || (t === undefined || t === null ? '': t));
  });
};

[kaustavdm]

I've been trying to use riot for Firefox OS apps, and hit the same issue. Content Security Policy blocks calls to Function(). I'll see if I can patch it up, or if @antonheryanto's patch works.

[kaustavdm]

@antonheryanto You just need to replace:

    var t = data[p[0]];

with

    var t = data ? data[p[0]] : null;

[tipiirai]

Hey all,

Nice catch! Can anyone make a pull request about the above change?

[kaustavdm]

@tipiirai The changes above work, but they slow down riot.render considerably. I'll see if I can patch up something better.

[tipiirai]

I think you can patch that directly without spending too much time on that. Riot 2.0 will be released soon with a new templating engine. More details later. Unfortunately I cannot give you ETA.

[kaustavdm]

@tipiirai Ah, that's nice. In that case, I should let @antonheryanto do the honour 👍

[antonheryanto]

thank for review and analysis @kaustavdm, to be save will wait for Riot 2.0 hope with more modular build so we can add and drop extension like CSP template engine, complete route and other. for now i just uses my minimal framework https://github.com/antonheryanto/riotjs-stack based on riotjs-admin which uses riotjs raw lib, add and drop it for production uses.

[tipiirai]

Perhaps you saw already that Riot 2.0 was released yesterday. Please poke around the new docs:

https://muut.com/riotjs/

I'm actually closing this one because Riot 2.0 made this issue obsolete. It's not based on templates anymore but custom tags instead.

I hope you like it.

[kaustavdm]

👍

[steelbrain]

The new Function() thingy is back in master, and I am unable to use riot in my atom/atom's package because of this.
https://github.com/muut/riotjs/blob/master/riot.js#L237

[JariInc]

I'm also affected by this. In a Chrome App you can define a file to be sandboxed to circumvent CSP, but then you can't make any CORS requests which makes it unusable.

Can this be reopened or do I make a new issue?

[tipiirai]

New issue would be clearer. Thanks