CSP compilance

[anzorb]

Just ran into ripplejs. Good work! No other templating library handles expressions this well, which means it is easy to support ii18n, etc.

Something to start thinking about is CSP (Content-security policy)
Content-security policy disallows the use of eval and new Function on platforms such as Firefox OS, Chrome OS and Chrome Extensions manifest version 2.0.

AngularJS figured out a way around this (I am still trying to figure out how). Other templating languages are affected as well, but provide pre-compilation of templates, which turns the HTML template into a function during the build step. (see http://handlebarsjs.com/precompilation.html)

To see this in action, create a chrome extension with the following manifest.

{
  "manifest_version": 2,
  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html"
  }
}

You will see the following errors in the console:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

More on content security policy:
https://developer.mozilla.org/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy
https://developer.chrome.com/extensions/contentSecurityPolicy

Let me know your thoughts.
A.

[anthonyshort]

I thought this might be a problem originally. I think Angular gets around it by doing some pretty crazy manual parsing of the code which I really don't want to do. I'm not sure how else to get around it really. Using eval is the simplest way to do the expressions.

Hopefully however it can be solved it can just be turned into a plugin. I'd like to find out more about this if anyone knows more about this.

[thehydroimpulse]

@anthonyshort While I don't know how angular does this, I'm guessing that it's just a manual lexer + parser, which is actually pretty simple to implement. I have a lexer library that automates lexing, then parsing is just a few lines more.

I think I still have some old code for Tower's previous expression engine that had a recursive descent parser. It worked quite well and did so without eval-ling stuff.

(I say it's pretty easy to do now that I have been writing lexers and parsers for a while now. So it might not be "easy")

[anthonyshort]

It should be pretty easy to just swap out expression engine that the interpolation component uses. This method would just need to be updated https://github.com/ripplejs/interpolate/blob/master/index.js#L94

var View = ripple(template).use(csp);

Would be really nice.