search

vakata / jstree

jquery tree plugin
http://jstree.com
MIT License
5.13k stars 1.39k forks source link

Inline Style Conflict with CSP #2750

Closed rwdevlead closed 10 months ago

rwdevlead commented 10 months ago

When using a Content Security Policy without the keyword unsafe-inline in the style-src, some styles are being blocked.

To reproduce:

  1. Create a Tree with nested nodes.
  2. Rename a child node.
  3. Collapse the highest parent.

Using the browser's Dev Tools window under the console tab, you will see the CSP blocks an inline style attempt.

This was last reproducible with version 3.3.14

vakata commented 10 months ago

As far as I remember - the only thing that conflicts with CSP inline is the animation, which you can toggle off in your config: core : { 'animation' : 0, ...

rwdevlead commented 10 months ago

Actually anytime you attribute a tag with style like <div style="display:none">Foo</div> it is considered inline style and will be blocked by the browser engine.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src

https://content-security-policy.com/examples/allow-inline-style/

Looking through the source code, it seems most formatting is done via CSS, but there are a few places where style is used to hide or display items. This is a common practice, yet it does not play well when using strict CSP rules.

Creating a class like jstree-hide and jstree-show then adding / removing class instead of setting style easily fixes the issue.

shjulberg commented 4 months ago

I'm running into this as well. Is there any intention of fixing this? Example of what my console looks like with a tree I have, as well as the effect in the app:

image

image