Changes for interactive plantuml

server/modules/rendering/html-security/renderer.js

@@ -32,6 +32,59 @@ module.exports = {
  allowedAttrs.push('allow')
  }
 
+ //Changes to keep interactive plantuml object tag
+
+ //only allow specific attributes for plantuml object node
+ allowedTags.push('object')
+ allowedAttrs.push('data')
+ allowedAttrs.push('type')
+ allowedAttrs.push('style')
+ allowedAttrs.push('class')
+ allowedAttrs.push('alt')
+
+ DOMPurify.addHook('uponSanitizeElement', (node, data) => {
+ // keep object node only if it is
+ // authorised plantuml using the configured plantuml server
+ // force attribute values to configured params
+ // insert the plantuml inside the object as text for search
+ let isPumlNode=false
+
+ if (data.tagName === 'object') {
+ //console.log ("Found object node - validating")
+ //remove node if it doesn't conform to plantuml structure
+ if (!( 'data' in node.attributes
+ && 'class' in node.attributes
+ && 'style' in node.attributes
+ && 'type' in node.attributes
+ && 'alt' in node.attributes)
+ ) {
+ //console.log ("Attribute mismatch - removing object node")
+ return node.parentNode.removeChild(node)
+ }
+
+ dataAttribute = node.getAttribute ('data')
+
+ //only allow configured plantuml server and image format in url
+ if (dataAttribute
+ && dataAttribute.startsWith(`${pumlServer}/${pumlImageFormat}`)
+ ) {
+ //console.log ("Plantuml node found - setting atribute values")
+ isPumlNode=true
+ node.setAttribute ('type', `${pumlObjectType}`)
+ node.setAttribute ('style', `${pumlObjectStyle}`)
+ node.setAttribute ('class', `${pumlObjectClass}`)
+ node.setAttribute ('alt', '')
+ }
+
+ //if not a plantuml node, then sanitise it
+ if (!isPumlNode) {
+ console.log ("Removing unknown object node")
+ return node.parentNode.removeChild(node)
+ }
+ }
+ })
+ //End changes to keep interactive plantuml object tag
+
  input = DOMPurify.sanitize(input, {
  ADD_ATTR: allowedAttrs,
  ADD_TAGS: allowedTags

server/modules/rendering/markdown-plantuml/renderer.js

@@ -114,14 +114,74 @@ module.exports = {
 
  const zippedCode = encode64(zlib.deflateRawSync('@startuml\n' + contents + '\n@enduml').toString('binary'))
 
- token = state.push('uml_diagram', 'img', 0)
- // alt is constructed from children. No point in populating it here.
- token.attrs = [ [ 'src', `${server}/${imageFormat}/${zippedCode}` ], [ 'alt', '' ], ['class', 'uml-diagram prefetch-candidate'] ]
- token.block = true
- token.children = altToken
- token.info = params
- token.map = [ startLine, nextLine ]
- token.markup = markup
+ //Interactive plantuml changes start here
+
+ //Global variables that will be used in html-security
+ pumlImageFormat = imageFormat
+ pumlServer = server
+ pumlObjectType = 'image/svg+xml'
+ pumlObjectStyle = 'max-width:100%;height:auto'
+ pumlObjectClass = 'uml-diagram prefetch-candidate'
+
+ if (imageFormat === 'png') {
+ //non-interactive and not searchable - use the img tag
+ token = state.push('uml_diagram', 'img', 0)
+ // alt is constructed from children. No point in populating it here.
+ token.attrs = [ [ 'src' , `${server}/${imageFormat}/${zippedCode}` ],
+ [ 'alt' , '' ],
+ ['class', `${pumlObjectClass}` ]
+ ]
+ token.block = true
+ token.children = altToken
+ token.info = params
+ token.map = [ startLine, nextLine ]
+ token.markup = markup
+ }
+ else if (imageFormat === 'svg') {
+ // render svg interactively with object tag
+ /* <object data=<plantumlserver>/<format>/plantuml
+ alt='' class='uml-diagram prefetch-candidate'
+ style='max-width:100%;height:auto' type='image/svg+xml' > */
+ token = state.push('uml_diagram_obj', 'object', 0)
+ token.attrs = [ [ 'data' , `${server}/${imageFormat}/${zippedCode}`],
+ [ 'alt' , '' ],
+ [ 'class', `${pumlObjectClass}` ],
+ [ 'style', `${pumlObjectStyle}` ],
+ [ 'type', `${pumlObjectType}` ]
+ ]
+ token.block = true
+ token.children = altToken
+ token.info = params
+ token.map = [ startLine, nextLine ]
+ token.markup = markup
+
+ //backup img node for object render failure
+ //void element - doesn't need to be closed in html
+ /* <img src=data=<plantumlserver>/<format>/plantuml alt=''
+ class='uml-diagram prefetch-candidate'
+ type='image/svg+xml'> */
+ token = state.push('uml_diagram_img', 'img', 0)
+ // alt is constructed from children. No point in populating it here.
+ token.attrs = [ [ 'src' , `${server}/${imageFormat}/${zippedCode}` ],
+ [ 'alt' , '' ],
+ ['class', `${pumlObjectClass}`]
+ ]
+ token.block = true
+ token.children = altToken
+ token.info = params
+ token.map = [ startLine, nextLine ]
+ token.markup = markup
+
+ //add puml source in object node for wikijs search index
+ //as wikijs will not index svg content from object tag
+ //i.e. like <object ...>@startuml...@enduml</object>
+ token = state.push ('text', '', 0)
+ token.content = contents
+
+ //close object tag - </object>
+ token = state.push('uml_diagram_close', 'object', -1)
+ }
+ //Interactive plantuml changes end here
 
  state.line = nextLine + (autoClosed ? 1 : 0)