"Active" content (and Graphviz)

[skreisel]

Hi. Pico CMS doesn't allow "active" content and strips the html via HTML purifier / and doesn't allow SVG. I would love to host a clickable Graphviz graph; the usual way would be to export a graph via SVG. One could, however, also export using the html

[PhrozenByte]

What do you mean by "html tag"? You mean <svg>? AFAIK using <svg> directly indeed allows active content, the only way to safely include SVG is using the <img> tag. You can indeed create a .svg file in your Nextcloud and include it using the <img> tag. However, this doesn't allow clickable graph.

So, yes, to include this you'll have to create a Pico plugin and directly include it in your custom theme using Twig.

[skreisel]

Hi - sorry for the delay in responding. Graphviz exports via <svg>; that's active content and is prohibited in the Nextcloud Pico CMS setup; Graphviz can also export using the html <map> tag (somehow that specific piece of information got lost in my first post) - which doesn't seem to pose a security risk!? That would allow the graph to be "clickable" -> eg one could click on a node in the graph and have the html link opened as in:

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

Cheers

[PhrozenByte]

I see. Next to <map> you use <img> to include the actual image, right? Yeah, sounds reasonable.

I can think of three approaches:

1. Create a simple Pico plugin, hook into the onHtmlPurifier event and add a whitelist config for the <map> and <area> tags with their required attributes. I can't guarantee that <map> is really safe. I'd guess so, but no guarantee.

2. Create a custom theme and create both the <img> and <map> tags according to some YAML metadata, e.g. (untested!)

   ---
   graphviz:
       image: %assets_url%/path_to_graphviz.svg
       map:
           - shape: rect
             coords: 34,44,270,350
             href: computer.htm
           - shape: rect
             coords: 290,172,333,250
             href: phone.htm
   ---

   {% if meta.graphviz %}
       <img src="{{ meta.graphviz.image|url }}" alt="" usemap="#graphviz" />
       {% if meta.graphviz.map %}
           <map name="graphviz">
               {% for map in meta.graphviz.map %}
                   <area shape="{{ map.shape|e("html_attr") }}" coords="{{ map.coords|e("html_attr") }}" href="{{ map.href|url }}" />
               {% endfor %}
           </map>
       {% endif %}
   {% endif %}

3. If you're rather just trying to add a single Graphviz graph, you could also simply dump the whole SVG in a Twig template (however, please note that all themes can be used by all users).

[skreisel]

Thanks - will try my luck! Best - Stefan

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in two days if no further activity occurs. Thank you for your contributions! :+1: