Interactive Plantuml with searchable content

[bharatrajagopalan]

I use plantuml & markdown rather extensively so I thought it would be a good idea to extend the existing plantuml feature (https://requarks.canny.io/wiki/p/plantuml-support) in two ways

Make the plantuml Interactive:

Ensure that if the plantuml has links or other interactive content, they can actually be clicked upon.
Also currently plantuml is generated as an img and hence it renders as a picture. instead it needs to be rendered as html text.

Instead of using <img> when svg format is selected, use <object> in markdown-plantuml.

As <object> is normally cleaned up by xss, add an exception in html-security to only allow object if it is generated by the markdown-plantuml render, so that this cannot be exploited.

is only allowed IF the data attribute contains the configured plantuml server url (configured in wikijs by the admin) otherwise it's discarded. So the only url that is trusted is the plantuml server url that an admin configures. This is to avoid users to inject object tags with the same attributes but pointing to another malicious url. In addition, the code discards any extra attributes that may be passed with the object tag

Make the plantuml source searchable:

Plantuml can be used for interaction diagrams, activity diagrams, so the actual plantuml source content should be searchable. I noticed that wikijs searches for content within elements i.e. <tag> content </tag> where content is searchable but not for attribute values i.e. in the following <tag attr="content" /> , content is not searchable

So in order to make this searchable , it is a two step process

• add the content to a attribute in <object> i n markdown-plantuml (as i couldn't work out how to inject it directly into the tag using state.push
• when filtering object in html-security, move the content from the attribute into the element content

This is then picked up by wikijs search.

To test this

• i have used the attached markdown (attached as a txt file) which is pasted into a page in wikijs to test that the svg is now interactive and that links work from the uml diagrams.
• As I use markdown-enhanced in vscode I also change the plantuml renderer config to match markdown-enhanced plugin in vscode to pickup ` ` `plantuml/` ` ` instead of @startuml /@enduml so that i get the same result in both vscode and wikijs (ignore the change in server field, i was pointing it to my local plantuml install)
• Searching for "Abe" or "Cain" or "Graphviz" (or any other content that is inside the plantuml src) returns the above page, as the plantuml is pasted into element content (can be checked using View Page Source)

[Test-Plantuml.txt](https://github.com/Requarks/wiki/files/4005764/Test-Plantuml.txt)

Please let me know if there is anything else i need to do.

[NGPixel]

Thanks for the very detailed PR! 👍

My only concern is with the xss filter implementation. What's the prevent a malicious user from using a plantuml object to inject unsafe code? Your check only validates that the element has 3 specific attributes. One could add more attributes and it would be copied untouched in the final output.

[bharatrajagopalan]

@NGPixel
Thanks that makes sense!

Just committed a fix to return <object> only with the specific attributes needed. Also already checks that the object is only returned if the data element points to the wikijs admin configured plantuml server url. Updated the PR description to indicate this.

Let me know if this is sufficient.

[Naegolus]

Just installed Wiki.js. The PlantUML feature is awesome ..
Very fast too. I am very curious about the new page history feature.

[bharatrajagopalan]

@NGPixel notice that this was closed without being merged. This is still a valid requirement for maintainable /searchable content and I believe that I addressed the security concerns raised - can I check what else you require to merge this in?

[NGPixel]

You need to re-submit against the dev branch.

[zhuzhzh]

is this merged into released branch? I still can't use hyperlink in plantuml.

[zhuzhzh]

@bharatrajagopalan could you re-submit your pr into dev branch?

[bharatrajagopalan]

@zhuzhzh

You can see the new PR on dev referenced above your comment - It was submitted 3 years ago :).

I am no longer working on this, so someone else will need to take it forward as I am sure the underlying code base has changed since then

#2754

[zhuzhzh]

@bharatrajagopalan Got it, Thanks! Hope someone can merge this enhancement. It's really useful!