/
SVG Out for Confluence Cloud

SVG Out for Confluence Cloud

What is it?

The SVG Out Cloud Confluence app closes a gap you might have discovered when including SVGs in your Confluence pages. Confluence is able to show and scale SVGs as images but it is not possible to use the links which might be included in the SVG. This app renders the SVG such that the links are still working. Furthermore it allows you to add links or replace the existing links in the SVG by Confluence links which are automatically updated when the content moves.

In addition the plugin offers the following functionality:

  • scale the SVG (independent in x- any y-direction)

  • cut out a region to show

  • align the image (left, center, right)

  • show/replace tool tips (only in case the link replacement functionality is used)

  • pan and zoom (including touch devices)

  • dynamic content within the SVGs (with some limitations)

  • export to PDF and Word

Security considerations

In order to allow functional links and sometimes even more (like dynamic SVGs with embedded JavaScript) SVG Out embeds the SVGs as they are and not in an img-tag. An attacker might manipulate SVGs in a way that they contain malicious code which can result in cross-site-scripting (XSS). SVG Out has (if not turned off by you) security scanners in place to minimize that risk - however they can’t eliminate the risk completely. Please consider this when using the app.

Legal and policy documents

The following legal documents apply for all of our apps:

Configuration

On the “Manage apps” screen of your Cloud instance expand the SVG Out Cloud app and click “Configure”

On the configuration screen you can select a security scanner, white-list SVGs in case you use the internal scanner and define whether PNG exports of SVGs for export are turned on or off per default.

Selecting a security scanner

The following security settings regarding the scanner are possible:

Internal scanner

The internal scanner checks SVGs before embedding them. In case it detects something questionable a warning is shown instead of the SVG asking an admin to whitelist the SVG after checking the SVG. Once whitelisted the SVG is shown - this option allows dynamic SVGs which contain JavaScript code inside script-tags. You can see an example here.
Please note that the internal scanner does not allow JavaScript outside script-tags as of 2022-09-04.

DOMPurify

Using this “scanner” all dangerous elements are removed from the SVG before embedding it. This option is the most secure one but does not allow the usage of dynamic SVGs and also limits some other SVGs like the ones using foreign objects (e.g. SVGs created by http://draw.io).

Please not that we use DOMPurify as it is. In case a SVG does not work as intended it will stay like this. We don’t and will likely never modify the behaviour of this tool.

No security scanner

Selecting this option turns of all security scanners. This option is not secure!

Switching between security scanners

You may switch between different security scanners. However links added to the app using one security scanner might stop working under the other security scanner in case you added links to elements not holding their own id. This is because DOMPurify removes elements which result in a different numbering.

Whitelisting of SVGs

In case you selected the internal scanner you can white-list SVGs by entering the SHA hash shown on the page where you embedded the SVG.

It is advisable to give the hash a name so that you can remember what it was like

clock:a46baffd1595006b2d9ae7c6e43e5b5841f542bc048139361a8630ae0799f851

Export settings

Under export settings you currently have only one option: turn the default PNG generation on or off.

The PDF export can’t embed SVGs directly therefore the app converts them to PNGs and saves them as attachment on the page

Usage

The app offers two macros. One to show SVGs in a block the other one to show SVGs inline (or kind of inline). Both have the same set of parameters.

Frequent support cases

Observation/Question

Explanation/Answer

Observation/Question

Explanation/Answer

Migration from Server / Data Center to Cloud

Please check Purde Software Cloud migration status

My SVG does not look as intended

Please check how you SVG looks when opening it in the browser. SVG Out can’t display it in a different way than your browser.

The SVG is not shown but a negative security check

In case your admin decided to use the internal security scanner some SVGs must be white-listed before they can be shown. This action must be performed by an admin as indicated here.

Dynamic parts of my SVG are not functioning.

In case dynamic parts are not executed multiple causes could apply:

  1. You are using DOMPurify as security scanner (actively selected or per transition on 2022-09-04).

  2. Your dynamic content is not inside script tags - this type of content has/will stop working from 2022-09-04 as indicated here

We continuously amend this list.

Known limitations

  1. In exports SVGs are rendered as PNGs in the resolution you defined.

Getting support

Please use our ticketing system to create a support ticket regardless whether you found a bug, have a feature request or questions.