These are chat archives for ractivejs/ractive

31st
May 2018
Trevor Morgan
@trvrm
May 31 2018 20:21
I've been asked to roll out a strict Content Security Policy, and I'm trying to work out how best to do that with Ractive apps. The biggest challenge I'm facing is ractive-managed CSS styles. They work if I use style-src 'unsafe-inline', but that kinda negates the whole reason to apply CSP in the first place, if I understand it correctly.
The other challenge I'm dealing with is one of my apps compiles components on the fly, which now breaks under a strict script-src CSP. I may be able to get round this by compiling the component templates on the backend.
(Although that's going to be an interesting challenge because we're a Python shop, and I'm trying hard to avoid installing the node ecosystem on my servers)
Joseph
@fskreuz
May 31 2018 20:32
There's a section in the docs dedicated to that https://ractive.js.org/concepts/#content-security-policy
Trevor Morgan
@trvrm
May 31 2018 20:33

Yeah, unfortunately the advice there is

Add style-src 'unsafe-inline' to your CSP directives.

Joseph
@fskreuz
May 31 2018 20:33
TL;DR: If you use the on-the-fly stuff (i.e. runtime expression evaluation, scoped CSS), you will encounter CSP errors since these are effectively doing code evaluation and insertion dynamically, on the browser, at runtime.
Trevor Morgan
@trvrm
May 31 2018 20:33
Which, if I understand it correctly, completely negates the point of having a CSP in the first place.
And my boss is asking me to use something stricter :-)

Also that section of the docs says:

In order to avoid violating style-src, either:

But only lists one option after the word 'either'.
It may be that I don't really have a choice here; I just want to make sure I'm understanding it all properly.
Joseph
@fskreuz
May 31 2018 20:37
I think the missing option was to avoid using component CSS. There was a fix added to prevent CSP warnings if css was empty/not present (Ractive added <style> even if css was empty). I might have forgotten to write that part completely.
Alternatively, you can still use CSS separate from the components. That's what I normally do to get around it. Of course, you also lose scoping, but you can get that back by using conventions like BEM.
Trevor Morgan
@trvrm
May 31 2018 20:39
Sorry, what's BEM?
Joseph
@fskreuz
May 31 2018 20:40
It's a CSS naming convention https://en.bem.info/methodology/css/
Trevor Morgan
@trvrm
May 31 2018 20:40
Ah, thank you, I'll read that.
Yes, I don't have any CSP errors on components that don't have a css member.
Ok, thank you, you've been very helpful.
Joseph
@fskreuz
May 31 2018 20:42
:thumbsup:
fwiw, VueJS operates on the same principles and encounters the same issue. https://vuejs.org/v2/guide/installation.html#CSP-environments . Angular 1.x too https://docs.angularjs.org/api/ng/directive/ngCsp .
Curtis Taylor
@curtistee
May 31 2018 22:10
Ractive gurus, random question: Is there anything you can think of offhand which would prevent a view from updating when a model attribute is updated? I’m seeing 0 errors in the console, and do get the updated value there as well, but the view is not reflecting any changes. Perplexing at best...
Joseph
@fskreuz
May 31 2018 22:13
First thing that comes into mind are static delimiters - they render once, and never again.
Another would be when you update data and Ractive doesn't know about it (i.e. not using ractive.set() to update the data)
In cases like this, you explicitly call ractive.update() to have the instance re-render with the updated data.
Typos are also a possibility :grin:
Curtis Taylor
@curtistee
May 31 2018 22:16
Right, I’m aware of those. Note I’m using an older version: v0.8.0-edge.
I have a conditional which re-renders a couple partials depending on device width (‘mobile’ or ‘desktop’). The desktop view works fine & dandy, mobile does not.
I saw the typos thread & am looking ;-)
{{#if mobile}} {{>partial1}} {{>partial2}} {{else}} {{>partial2}} {{>partial1}} {{/if}}
Chris Reeves
@evs-chris
May 31 2018 23:27
it's also entirely within the realm of possibility that 0.8 has a bug 😁