Atlassian's new security requirements and their impact on SVG Out Cloud

This post is only relevant for customers who are using JavaScript inside SVGs.

Background

Atlassian announced new security requirements effective from October 31st here. Those require that apps must set the Content Security Policy for script sources and should disallow the unsafe options unsafe-inline and unsafe-eval.

Impact

The impact depends on whether and if yes how you are using JavaScript inside SVGs:

You don’t have any SVGs which contain JavaScript => nothing to do for you.
You only use JavaScript inside script tags and don’t use unsafe evaluation functions => nothing to do for you. Our app will handle this for you.
In case you use JavaScript outside script tags like in this example
<circle stroke-width="12" r="43" cx="50" cy="50" fill="none" stroke="#111" onmousemove="console.log('Hi there');"/>
you must change the SVG and transfer all JavaScript functions (here onmousemove…) into a script tag.
In case you are using unsafe evaluation functions => get rid of them.

Timeline

We plan to roll out a compliant version on September 4th. In case you are impacted and you don’t want to loose functionality please perform your changes until September 3rd.

Further details

In the below example the first circle contains a onmouseover event. This event will not work anymore.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle stroke-width="12" r="43" cx="50" cy="50" fill="none" stroke="#111" onmousemove="console.log('Hi there');"/>
  <circle r="6" cx="59" cy="23" fill="#000"/>
  <g stroke-linejoin="round" stroke-linecap="round" stroke-width="1" stroke="#000" fill="none">
    <path d="M36,36c5,0,3,2,8-1c1,2,1,3,3,2c3,0-6,7-3,8c-4-2-9,2-14-2c4-3,4-4,5-7c5,0,8,2,12,1"/>
    <path fill="#000" d="M34,29h31c2,5,7,10,7,16l-8,1l8,1l-3,31l-5,-18l-11,18l5-34l-3-8z"/>
    <path stroke-width="2" d="M27,48h23M28,49h21l-3,28h-14l-4,-28h5l3,28h3v-28h5l-2,28m3-4h-13m-1-5h16m0-5h-16m-1-5h18m0-5h-19"/>
  </g>
  <path stroke="#F00" stroke-width="1"/>
</svg>

After the following change the event works again:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle id="c1" stroke-width="12" r="43" cx="50" cy="50" fill="none" stroke="#111"/>
  <circle r="6" cx="59" cy="23" fill="#000"/>
  <g stroke-linejoin="round" stroke-linecap="round" stroke-width="1" stroke="#000" fill="none">
    <path d="M36,36c5,0,3,2,8-1c1,2,1,3,3,2c3,0-6,7-3,8c-4-2-9,2-14-2c4-3,4-4,5-7c5,0,8,2,12,1"/>
    <path fill="#000" d="M34,29h31c2,5,7,10,7,16l-8,1l8,1l-3,31l-5,-18l-11,18l5-34l-3-8z"/>
    <path stroke-width="2" d="M27,48h23M28,49h21l-3,28h-14l-4,-28h5l3,28h3v-28h5l-2,28m3-4h-13m-1-5h16m0-5h-16m-1-5h18m0-5h-19"/>
  </g>
  <path stroke="#F00" stroke-width="1"/>
  <script>
	$("#c1").on("mousemove", function() {
		console.log('Hi there');
	});
  </script>
</svg>

The circle gt an id to allow an easier reference to it and the onmousemove event has been moved into the script tag.

Questions

Please use our ticketing system. In case you can’t or don’t want to use the ticketing system you can also write us an email.

We will also update this post in case of additional information.